From 03953d6bd13b86dcea77b6179f84bf5f9853fd81 Mon Sep 17 00:00:00 2001 From: Alexandre Van de Sande Date: Mon, 9 Mar 2015 19:27:49 -0300 Subject: [PATCH] Top bar integrated with on hover opacity effect --- cmd/mist/assets/qml/main.qml | 379 ++++++++++-------- .../assets/window-control/window-close.png | Bin 448 -> 479 bytes .../assets/window-control/window-close@2x.png | Bin 894 -> 920 bytes .../assets/window-control/window-minimize.png | Bin 378 -> 0 bytes .../window-control/window-minimize@2x.png | Bin 706 -> 748 bytes .../assets/window-control/window-zoom.png | Bin 368 -> 406 bytes .../assets/window-control/window-zoom@2x.png | Bin 720 -> 775 bytes 7 files changed, 204 insertions(+), 175 deletions(-) delete mode 100644 cmd/mist/assets/window-control/window-minimize.png diff --git a/cmd/mist/assets/qml/main.qml b/cmd/mist/assets/qml/main.qml index 4b05bef1d4..4255cdb6ee 100644 --- a/cmd/mist/assets/qml/main.qml +++ b/cmd/mist/assets/qml/main.qml @@ -270,12 +270,22 @@ ApplicationWindow { id: blockModel } + + + + Rectangle { id: windowChrome color: "#EBE8E8" anchors.fill: parent radius: 3 + + + + + + /************************/ /* */ /* Resizeable Borders */ @@ -348,30 +358,6 @@ ApplicationWindow { } } - MouseArea { - id: topResizableBar - anchors { - top: parent.top - right: parent.right - left: parent.left - } - height: 5 - cursorShape: Qt.SizeVerCursor; - - property real lastMouseY: 0 - property real lastTop: root.y + root.height - onPressed: { - lastMouseY = mouseY - lastTop = root.y + root.height - } - onPositionChanged: { - if (!(root.height - mouseY + lastMouseY < root.minimumHeight)) { - root.height -= (mouseY - lastMouseY) - root.y = lastTop - root.height - } - } - } - MouseArea { id: bottomRightResizableHandle anchors { @@ -397,52 +383,211 @@ ApplicationWindow { root.height += (mouseY - lastMouseY) } } + } + } + + Rectangle { + id: topBar + anchors { + top: parent.top + left: parent.left + right: parent.right + } + height: 18.4 + z: 100 + color: "transparent" + + MouseArea { + id: menuMouseArea + anchors.fill: parent + property real lastMouseX: 0 + property real lastMouseY: 0 + hoverEnabled: true + onPressed: { + lastMouseX = mouseX + lastMouseY = mouseY + } + onPositionChanged: { + if (menuMouseArea.pressed){ + root.x += (mouseX - lastMouseX) + root.y += (mouseY - lastMouseY) + } + + } + onEntered: { + topBar.state = "hovered" + } + onExited: { + topBar.state = "normal" + } } - // Commenting this out because it's causing too many crashes - // MouseArea { - // id: bottomLeftResizableHandle - // anchors { - // bottom: parent.bottom - // left: parent.left - // } - // width: 5 - // height: 5 - // cursorShape: Qt.SizeBDiagCursor; + // gradient: Gradient { + // GradientStop { position: 0.0; color: "#FFFFFFFF" } + // GradientStop { position: 1.0; color: "#00FFFFFF" } + // } - // Rectangle { - // anchors.fill: parent - // color: "red" - // } + - // property real lastMouseX: 0 - // property real lastMouseY: 0 - // property real lastRight: root.x + root.width + Rectangle { + anchors { + top: parent.top + right: parent.right + bottom: parent.bottom + left: parent.left + leftMargin: 194 + } + radius: 3 + gradient: Gradient { + GradientStop { position: 0.0; color: "#FFFFFFFF" } + GradientStop { position: 1.0; color: "#00FFFFFF" } + } + } - // onPressed: { - // lastMouseX = mouseX - // lastMouseY = mouseY - // lastRight = root.x + root.width - // } - // onPositionChanged: { - // if (!(root.width + mouseX - lastMouseX < root.minimumWidth)) { - // root.width += (mouseX - lastMouseX) - // } + Rectangle { + id: topbarBackground + anchors.fill: parent + opacity: 0.0 + radius: 3 + color: "#AAA0A0" + } + - // if (!(root.height - mouseY + lastMouseY < root.minimumHeight)) { - // root.height -= (mouseY - lastMouseY) - // root.y = lastTop - root.height - // } - // } - // } + states: [ + State { + name: "normal" + when: menuMouseArea.hovered + PropertyChanges { + target: topbarBackground + opacity: 0 + } + }, + State { + name: "hovered" + when: menuMouseArea.hovered + PropertyChanges { + target: topbarBackground + opacity: 1 + } + }] + + + transitions: Transition { + NumberAnimation { + properties: "opacity" + duration: 250 + easing.type: Easing.InOutQuad + } + } + + /************************/ + /* Semafor Buttons */ + /************************/ + + Rectangle { + id: semaforButtons + color: "transparent" + height: 32 + + anchors { + top: parent.top + left: parent.left + right: parent.right + } + + Rectangle { + color: 'transparent' + width: 13 + height: 20 + x: 3 + + Image { + height: 13 + width: 13 + source: toolbarCloseButton.containsMouse ? "../window-control/window-close.png" : "../window-control/window-close-hover.png" + anchors.centerIn: parent + + MouseArea { + id: toolbarCloseButton + anchors.fill: parent + hoverEnabled: true + onClicked: Qt.quit() //gui.stop(); + + onEntered: { + topBar.state = "hovered" + } + } + } + } + Rectangle { + color: 'transparent' + width: 13 + height: 20 + x: 21 + + Image { + height: 13 + width: 13 + source: toolbarminimizeButton.containsMouse ? "../window-control/window-minimize.png" : "../window-control/window-minimize-hover.png" + anchors.centerIn: parent + + MouseArea { + id: toolbarminimizeButton + anchors.fill: parent + hoverEnabled: true + onClicked: { + console.log("Minimize"); + // Neither works.. + //root.visibility = QWindow.minimized; + // root.showMinimized(); + } + onEntered: { + topBar.state = "hovered" + console.log(topBar.state ) + } + } + } + } + + Rectangle { + color: 'transparent' + width: 13 + height: 20 + x: 40 + + Image { + height: 13 + width: 13 + source: toolbarzoomButton.containsMouse ? "../window-control/window-zoom.png" : "../window-control/window-zoom-hover.png" + anchors.centerIn: parent + + MouseArea { + id: toolbarzoomButton + anchors.fill: parent + hoverEnabled: true + onClicked: { + console.log("Maximize"); + // Neither works.. + //root.visibility = QWindow.maximized; + //root.showMaximized(); + } + onEntered: { + topBar.state = "hovered" + } + } + } + } + } } + SplitView { property var views: []; id: mainSplit anchors.fill: windowChrome anchors.margins: 2 + z: 50 //color: "brown" //radius: 5 @@ -484,6 +629,8 @@ ApplicationWindow { return {view: view, menuItem: menuItem} } + + /********************* * Main menu. ********************/ @@ -851,94 +998,6 @@ ApplicationWindow { return comp } - /************************/ - /* Semafor Buttons */ - /************************/ - - Rectangle { - id: semaforButtons - color: "transparent" - height: 32 - - anchors { - top: parent.top - left: parent.left - right: parent.right - } - - Rectangle { - color: 'transparent' - width: 13 - height: 20 - x: 3 - - Image { - height: 13 - width: 13 - source: toolbarCloseButton.containsMouse ? "../window-control/window-close.png" : "../window-control/window-close-hover.png" - anchors.centerIn: parent - - MouseArea { - id: toolbarCloseButton - anchors.fill: parent - hoverEnabled: true - onClicked: Qt.quit() //gui.stop(); - } - } - } - Rectangle { - color: 'transparent' - width: 13 - height: 20 - x: 21 - - Image { - height: 13 - width: 13 - source: toolbarminimizeButton.containsMouse ? "../window-control/window-minimize.png" : "../window-control/window-minimize-hover.png" - anchors.centerIn: parent - - MouseArea { - id: toolbarminimizeButton - anchors.fill: parent - hoverEnabled: true - onClicked: { - console.log("Minimize"); - // Neither works.. - //root.visibility = QWindow.minimized; - // root.showMinimized(); - } - } - } - } - - Rectangle { - color: 'transparent' - width: 13 - height: 20 - x: 40 - - Image { - height: 13 - width: 13 - source: toolbarzoomButton.containsMouse ? "../window-control/window-zoom.png" : "../window-control/window-zoom-hover.png" - anchors.centerIn: parent - - MouseArea { - id: toolbarzoomButton - anchors.fill: parent - hoverEnabled: true - onClicked: { - console.log("Maximize"); - // Neither works.. - //root.visibility = QWindow.maximized; - //root.showMaximized(); - } } - } - } - - - } ColumnLayout { id: menuColumn @@ -1059,36 +1118,6 @@ ApplicationWindow { anchors.top: parent.top color: "#00000000" - Rectangle { - id: topMovingHandle - anchors { - top: parent.top - left: parent.left - right: parent.right - } - height: 37 - z: 100 - - MouseArea { - anchors.fill: parent - property real lastMouseX: 0 - property real lastMouseY: 0 - onPressed: { - lastMouseX = mouseX - lastMouseY = mouseY - } - onPositionChanged: { - root.x += (mouseX - lastMouseX) - root.y += (mouseY - lastMouseY) - } - } - - gradient: Gradient { - GradientStop { position: 0.0; color: "#FFFFFFFF" } - GradientStop { position: 1.0; color: "#00FFFFFF" } - } - } - Rectangle { id: mainView color: "#00000000" @@ -1102,7 +1131,7 @@ ApplicationWindow { return view; } - } + } } } diff --git a/cmd/mist/assets/window-control/window-close.png b/cmd/mist/assets/window-control/window-close.png index 39ecae905c0990685e912e4d057f6c719b31204f..fe7f4b9d734a9e667d6a4e1a2bf2f167add11863 100644 GIT binary patch delta 440 zcmV;p0Z0D81K$IXF@Kp!L_t(26`fMsN&-<7T{GxR4~}UU3A3bzE)+!+1rbF_7y5(f z2mFOTp)ZNP!03WS5kWx@Wn!ZCp!v`}$1EMu&KjDiw`jrPoU_;3GkdRnB>ceH;qgkr zcwH|R3IWrs$WEtHbGh9)x7N5eJ~OpxOC=s6k%+1}m93}8hkseUw_j>%Zh=eFP&5pP z7}Ci^UBnLJneB?~Ie@ ii=f{66A#2+-`*$v+t%2`EDfvx0000Q=`m~D_C`2536DqO5B{vfp@o-L1Mb(S$vJgXppph!?;sXW2!9bc zlZefF)$xt_cSY)fO5%i4ArDRaU|7pEQ7#qGX+N_H2uFC4nx-CjghF9lWKU49R&bs@ zhV3{AMJ8C9aDRjsNhNBUM>*BA_&iZq7B7=XYUg@iW1#3zt^cn00000NkvXXu0mjf D3i!Yh diff --git a/cmd/mist/assets/window-control/window-close@2x.png b/cmd/mist/assets/window-control/window-close@2x.png index 49bd12a0ebe2233666bbe405a7917ab53a5ad9fe..042342d2ee67203ea13f7d840903006e12c8d48a 100644 GIT binary patch delta 884 zcmV-)1B?9r2ABtsF@I7?L_t(Y4ZW6IPt-sZ$IlkKEvwuGxfnG-kOwqe6xkpIqalU| z0R+?sE`r>3>28H}f5oX~Z-9xOr0L9b&i~ixoHM6B z*~JF>`#XPzt()QSk8_boB*%_MbX;`5VH<|A9ta$KaUfvcYJX{M?a3tNOZV{2^U$@$ zZwt3qR+b9W&GC-s=NB#&9WK7nbUt|3JFePEpziK&BjC$=wJ<+d7mLMwx~|KSvI;3J zuaHAIxngFUj<2<0$@xn%7igL$m4DSWQgyOcblvauNow16R3^tpWolwvwzjq;ub^PLq@<*=AsGCuCc7Y3 zl4aYoKuj}R&IDT}zhF;aO=-!>@{+s`^^0X~IIvA!FH$#}^H>&_o*%2SjwS@qg?|;^&G)EaA#z1cleoKnqQ@ zd8WPW>$^+{6J2b)*8qf`^~ykBZ(7)=cmO6jv z#>&c%9&?B2msTWyZg&EW*q@%pDNL8ME0eJ&Y9&BaL}m(o%i7k2p>fm$_`bfDmXo;g z?Uy>8J;jIcPX|-^1w*5rK$x4EP68dmTB)r&?Sg2ij8By(JdecpftRVP zZxFxVV92r2p+T7#9~BB>=hZ7kPSjBuDO%JMj(V>FNC#n_VVcs|+_D3L23lyM%{&K0 z`E8{#QnaWi8yjJs{gvU123lyU((dLF<(JAx(dvKlIB8{jp|TQuRpCQZ`MDLAf&Ws< z6?s2DCqx@*vG1P~1>^qDf496a+7w1=R;C|FaqOh z-@#{4pGAEJ-$9KRs2561j3N+lkwr<^Xyj{G*tWZEo&T6=x~1I(6FJGI?d&=KUuWi= zIn}6zZLF?NyPp5hb={k;ThDl|*M<yd3nf9n}cz^gsGbt_U&yBV9dycjL z*m3NWNj~9mT{pILv;9He(7@C1xVk?8DijKaLE3xUs*d=+uW5`?y1j$a=?+TiI*D1x zSTQ@QI}TN=dsN-uBj58#(=^{O)AKg@*Yo+jtsuBIfJ(*UkZspKIF8jLqA1hZO_{E4 zVvL7l4%~a5OMjK!9jcUfh_!}C~f`2Bo@h4j^7Vjd3kzLsMumSM) z^$fjxGm{7_u6&_aFQ3!5)vw`DsRd1FqZS#t-hFr=h2yeItboX-ax4sxg}ILn0QCSZ zXu?qN3>A+D)JfC~u>=#hr^GUJ9)N`*qhr_T{P2Znc%TV}0M#?_KrzNy9IUXk7|bLI z64nHRseiLeRs3OK%Zu~Utr-LkN)wErj^Y5}G0d#*++Z+-=d=C&!E>t{v1hCXC!Af) z411zx0*K1UW~r|Lj}H5`QLAU(IacQ)4|r3+)4j#wbtkwWZ}v zRB)!Nhq`)t!>pj<Hq)$ diff --git a/cmd/mist/assets/window-control/window-minimize.png b/cmd/mist/assets/window-control/window-minimize.png deleted file mode 100644 index ff68c8da9372e4258e0b1dc679f8b4ef795971b9..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 378 zcmV-=0fqjFP)Px$G)Y83R45glQqe90K@^>t9W$#b8qyMq2%oSYfEST?>O&*G#3%R?5f7du-tZH= zY#U06RETM&E2ln>Od=1H6~_^Ife_-=3MMA ztSlX6REmY~`_iTCOhwUpajHb6bO|35L=P2-qLB37gG5Mq*$LjZJkJ}ZMfZ*7xiMyA zx;#r9hi4al$2ivH^|?cA>x;#;)lG^gh5g=PWxh&(E66HQ*nMm#ZlSnGTYlr#9WN|T zOqR0z$oTmYkZ{m%F$|3v@&G*WIaI>X!0E~H$l9G+JrxIh+Pu2fGnF|<L_t(Y4ZW7jZqq;%hR4%5aYEB3g{DorL4be-8}3A*3xtGF z#EJzQo&k6k;2GGkV1*)tgjkd)+}W@I1c*&9q>!WyI8L0#@J%(Yq4eTnI8x-9c;@?O z>^bMRAvTG}mCCuE?Oe0%?ZJYuc{c6(8Qd5g*^b6a9W)3}>^ATrPLyaG~%? z5B7!F$$;z5A!1ocajZ}jne3LHnr4Y+qb{CTE5dQwN^IFQ^Ll4ekK%D@k>Z)Np+(@Z zFy^vQSTHqT3Gw22Cp<28l1!%b{m@tD!hi)6HV`Gm>3`zI^G?D(u0O2=1}vDcmC)1a z>GK?6P8Tmes#rNhrhrW@%C6JB0-Phf+35PQa_DxGM#{PCKJhM!0N-6$L0DlA47?)7?cYS&;|6=roe zxU$vZ;eT3=4uZ>^&s3CY_a1-=!Hz zP|;x$7^6HfHFXcu!cQpmQ3WiRuyJ2?>TpI(3qPUM|82m41rs(rC4~LrjF=XF(r(+^ z)?zLUSTMD<`+0=@;*6M9<>7;E?Tno;R~sKpy+C5$Vfo{~Sh-dX^KnA%krtspPP7=; tfBv}@6r+tX;#nJgK$453$?tQ6{U6}Dg-fe~;e-GH002ovPDHLkV1hM*Yi9re delta 669 zcmV;O0%HB_1;Pc8F@JnXL_t(Y4ZW7nZqq;zhsV2)?W776gg~hj)KugK9FP!ifH-jC zz=dZ3o&|UYE*v;fe;j;Cb8qS@#kobp|mBz?HuA=XXpFvznQTk zN7&BR)=iV74~;Q5jES3xNou$#t!7%gBdztOR?effjg41_p?{o%{@mFf+>55;$59lX zJ!nk%z32H~y`b@6ZN2@p{NA?r3H5qC-xud~IGtQh)6{X4l6qrB>h%?IJx{V#`fF+&tzWGJhdv#)2pJC zF8l0jCy9~K_kUd({n!;rQ}MjuoA1}IwK|<`JGc;HB{h={5m8#px$`aY{J@U;r)LyS z<;&-xB*x@oGwrnO%9JIrT~_2mtG%!Y943Y@6NLrS@^c{$o-<*)Sc!J$=U@jd^28Sg zESRwI&xN>M96V>T=yv^W5-?!Fgq;fw`u$s6VQv=(Uw@Usf(e^gRAQ3*z`4Rl-L6F@ z0ShKZz$+r24slYoStc5pP~1d-V656K6AjnqE*tSy?8WnEwz<&r_MN-Mc*{hih@;}) zV`{i$VG}1Fxl5^E+gG01vf3~)G_oLeM|4P#Rhwm^kqPNd1jxcwn`NS*M5`ycP?qY+ z!c`e8%6|t&VN~r-=OsmpdP1tN%3#5SP4&%h9hH%yMLi+a|F6M-1rs*Bq8@$heRw;a zjIWU5N%hNSa1+P!X*kGhQc!QayV$*S6`>-ID8E!jiWUQxSs6Z71Qtw0uwq4YPNbA0 zgq_I8$y{pwd+eWEWii?mMrzh!ACSZ%Ve+SMxfcHu;5v8-2CKR800000NkvXXu0mjf D3(QbB diff --git a/cmd/mist/assets/window-control/window-zoom.png b/cmd/mist/assets/window-control/window-zoom.png index fe30855db659ed073704a540d7281e4670a7a235..63250608469893dbaee8ca6bf01b2b25b1e94726 100644 GIT binary patch delta 366 zcmV-!0g?Xj0+s`iF@I1=L_t(26^)Y3O2a@9$0uvj^pI4o-Ygz0h`3#D~2(`ls0Mn<#3H<6pv9`0_7vs3xgFi=uli4*1) z7XKt1A07UrN~9BqgICnRm69j?(g}w+9K51vY8b@e;B~r0(OB|I{p+pm9kDE1;C0#> zc4>%$3B<+*$!9gX?|TBTm;-Gc#Ngl+gJTZuR_ot9;&AZMaIeoVD$J?B?eQ)ogmaRV zXZ_`*s`f-pk9YS6#^@uX^|H0O zl+w2<2>MC|hf8a#$79rE6UTAb@#MMAvdzhrLQMq1jDNJqvQ&J3Bt;O0SA*nz zCyJs`>GW{hyRg=7&CD$b-&f;+)tcugl+D35jl0m^S2ip3Vu*1RsZ%#x{3%kqUhEM(C>oallNQE1AxpL+nJ3j)x%)|z@ a{d+&f0J~xunW*>x0000E z+xNXk6KmLmT<&D#@av~HbG z@8{2b{ z#bWWE{P}koG{J0BwIF&q*|G-yx1;9l0JH@ZxV2r z7-N|zSYRrANyNc(CTtfg35CL{e^q(?+Eu~V%@_*?Sbt!Gjjtr)c5(2WNx$3mD?%{9 z0uyXW^k{neBv+W*#ld@JE0@R+U=xda(`=pxoGZN6?doR|V1bDd@H!DsgE;Zp63KB1 z35QNvp+zuyZIPj22?>W!sbo}gZG+9yIfs6)$0LCED|O^k9D`d0Wubf UI%BnwrvLx|07*qoM6N<$f?>06MgRZ+ delta 683 zcmV;c0#yBn2G9kNF@K6lL_t(Y4ZW7ZZqq;zhR3^(?W78{2!T>5sHw;eI3QKL0ph@k z0~ekFcoyIpxNzXa0r3VE5(nTG)Ko-j1VT`Vn#7LR#-Gs|LrF@&?MT+H?b+|&_3q5r zkt1wxXXm;}()-4kYsSRQ#3VI_D6M8%yCbdjwpPxA_07!}i+@ngyq9~sgFDf5{4k2b zGxL1P&ppro>;;W`>l^LI<>$74NT}EA`Mx+W!|CKwnx>AUl++t5Qm?Ow>v@u`A|IQr zPU0w%$>cyL;{!>PL>$LS{hTz?XT0ShMVTxihm-+$l;bGq30stguP*uGv&U16Sq?B9b6Ztu@VzkHpyHysWPb6WaW-a=GBo+yi-^Z5kzXKFqfh{X< R6^#G@002ovPDHLkV1h4dRz&~+