From 1e231624ccb3ac637308ff9b8bfcab8e5e859898 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Martin=20Gr=C3=A4=C3=9Flin?= Date: Fri, 20 Jan 2012 11:11:45 +0100 Subject: [PATCH] Add an oxygen styled scrollbar in decoration list Thanks to Nuno for providing the QML based scrollbar. Obviously this does not improve the consistency with other widget styles, so a proper solution is still required. BUG: 291612 --- kcmkwin/kwindecoration/CMakeLists.txt | 3 +- kcmkwin/kwindecoration/kwindecoration.cpp | 4 + .../kwindecoration/qml/OxygenScrollbar.qml | 147 ++++++++++++++++++ kcmkwin/kwindecoration/qml/images/arrowup.png | Bin 0 -> 194 bytes .../qml/images/arrowupactive.png | Bin 0 -> 219 bytes kcmkwin/kwindecoration/qml/images/bg.png | Bin 0 -> 263 bytes kcmkwin/kwindecoration/qml/images/glow.png | Bin 0 -> 406 bytes kcmkwin/kwindecoration/qml/images/scrool.png | Bin 0 -> 621 bytes .../qml/images/scroolactive.png | Bin 0 -> 882 bytes kcmkwin/kwindecoration/qml/images/shadow.png | Bin 0 -> 390 bytes kcmkwin/kwindecoration/qml/main.qml | 67 ++++++-- 11 files changed, 205 insertions(+), 16 deletions(-) create mode 100644 kcmkwin/kwindecoration/qml/OxygenScrollbar.qml create mode 100644 kcmkwin/kwindecoration/qml/images/arrowup.png create mode 100644 kcmkwin/kwindecoration/qml/images/arrowupactive.png create mode 100644 kcmkwin/kwindecoration/qml/images/bg.png create mode 100644 kcmkwin/kwindecoration/qml/images/glow.png create mode 100644 kcmkwin/kwindecoration/qml/images/scrool.png create mode 100644 kcmkwin/kwindecoration/qml/images/scroolactive.png create mode 100644 kcmkwin/kwindecoration/qml/images/shadow.png diff --git a/kcmkwin/kwindecoration/CMakeLists.txt b/kcmkwin/kwindecoration/CMakeLists.txt index da02993ce9..4762bb983b 100644 --- a/kcmkwin/kwindecoration/CMakeLists.txt +++ b/kcmkwin/kwindecoration/CMakeLists.txt @@ -30,4 +30,5 @@ install(TARGETS kcm_kwindecoration DESTINATION ${PLUGIN_INSTALL_DIR} ) ########### install files ############### install( FILES kwindecoration.desktop DESTINATION ${SERVICES_INSTALL_DIR} ) -install( FILES qml/main.qml qml/AuroraeDecoration.qml qml/AuroraePreview.qml DESTINATION ${DATA_INSTALL_DIR}/kwin/kcm_kwindecoration) +install( FILES qml/main.qml qml/AuroraeDecoration.qml qml/AuroraePreview.qml qml/OxygenScrollbar.qml DESTINATION ${DATA_INSTALL_DIR}/kwin/kcm_kwindecoration) +install( DIRECTORY qml/images/ DESTINATION ${DATA_INSTALL_DIR}/kwin/kcm_kwindecoration/images) diff --git a/kcmkwin/kwindecoration/kwindecoration.cpp b/kcmkwin/kwindecoration/kwindecoration.cpp index 5b2936cd85..286e51b3f0 100644 --- a/kcmkwin/kwindecoration/kwindecoration.cpp +++ b/kcmkwin/kwindecoration/kwindecoration.cpp @@ -89,6 +89,10 @@ KWinDecorationModule::KWinDecorationModule(QWidget* parent, const QVariantList & m_proxyModel->setSourceModel(m_model); m_proxyModel->setFilterCaseSensitivity(Qt::CaseInsensitive); m_ui->decorationList->setResizeMode(QDeclarativeView::SizeRootObjectToView); + m_ui->decorationList->setAttribute(Qt::WA_TranslucentBackground); + QPalette pal = m_ui->decorationList->palette(); + pal.setColor(m_ui->decorationList->backgroundRole(), Qt::transparent); + m_ui->decorationList->setPalette(pal); foreach (const QString &importPath, KGlobal::dirs()->findDirs("module", "imports")) { m_ui->decorationList->engine()->addImportPath(importPath); } diff --git a/kcmkwin/kwindecoration/qml/OxygenScrollbar.qml b/kcmkwin/kwindecoration/qml/OxygenScrollbar.qml new file mode 100644 index 0000000000..9e0ad233d6 --- /dev/null +++ b/kcmkwin/kwindecoration/qml/OxygenScrollbar.qml @@ -0,0 +1,147 @@ +/******************************************************************** +Copyright (C) 2012 Nuno Pinheiro + +This program is free software; you can redistribute it and/or modify +it under the terms of the GNU General Public License as published by +the Free Software Foundation; either version 2 of the License, or +(at your option) any later version. + +This program is distributed in the hope that it will be useful, +but WITHOUT ANY WARRANTY; without even the implied warranty of +MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU +General Public License for more details. + +You should have received a copy of the GNU General Public License +along with this program. If not, see . +*********************************************************************/ +import QtQuick 1.0 + +Item { + property variant list + property int itemHeight: 1 + id: verticalScroolbar + width:19 + height: parent.height-1 + anchors.right: parent.right + anchors.rightMargin: 2 + clip:true + + Item { + id: scroolerArea + width: parent.width + height: parent.height-uparrow.height*2 + y:uparrow.height + opacity: scroolerAreaOver.containsMouse? 1:list.moving?1:dragarea.containsMouse? 1:dragarea.pressed?1: 0.3 + Behavior on opacity { + NumberAnimation { duration: 600 } + } + MouseArea { + id: scroolerAreaOver + anchors.bottomMargin:-uparrow.height + anchors.topMargin: -uparrow.height + anchors.fill: parent + hoverEnabled: true + + } + BorderImage { + id: scroller + source: "images/scrool.png" + width:parent.width + height:Math.max (14,parent.height*list.height/list.contentHeight) + y:parent.height*list.contentY/list.contentHeight + border.left: 7; border.top: 7 + border.right: 7; border.bottom: 8 + opacity: 1 + } + + BorderImage { + id: scrolleractive + source: "images/scroolactive.png" + width:parent.width + height:Math.max (14,parent.height*list.height/list.contentHeight) + y:parent.height*list.contentY/list.contentHeight + border.left: 7; border.top: 7 + border.right: 7; border.bottom: 8 + opacity:scroolerAreaOver.containsMouse? 1:dragarea.containsMouse?1:dragarea.pressed?1:0.01 + Behavior on opacity { + NumberAnimation { duration: 400 } + } + MouseArea{ + id:dragarea + anchors.fill:parent + hoverEnabled: true + drag.target: scrolleractive + drag.axis: Drag.YAxis + drag.minimumY: 0 + drag.maximumY: scroolerArea.height-scrolleractive.height + onPositionChanged: list.contentY=scrolleractive.y*list.contentHeight/(scroolerArea.height) + } + } + } + + Item{ + id:uparrow + width:parent.width + height: parent.width-4 + Image{ + anchors.horizontalCenter: parent.horizontalCenter + anchors.verticalCenter: parent.verticalCenter + source:"images/arrowup.png" + opacity:uparrowOver.containsMouse? 0:1 + + Behavior on opacity { + NumberAnimation { duration: 300 } + } + } + Image{ + anchors.horizontalCenter: parent.horizontalCenter + anchors.verticalCenter: parent.verticalCenter + source:"images/arrowupactive.png" + opacity: uparrowOver.containsMouse? 1:0 + Behavior on opacity { + NumberAnimation { duration: 300 } + } + } + MouseArea { + id: uparrowOver + anchors.fill: parent + hoverEnabled: true + onClicked: list.contentY -= itemHeight + } + } + + Item{ + id:downarrow + width:parent.width + height: parent.width-4 + anchors.bottom: parent.bottom + anchors.bottomMargin: 0 + Image{ + rotation: 180 + anchors.horizontalCenter: parent.horizontalCenter + anchors.verticalCenter: parent.verticalCenter + source:"images/arrowup.png" + opacity:downarrowOver.containsMouse? 0:1 + + Behavior on opacity { + NumberAnimation { duration: 300 } + } + } + Image{ + rotation: 180 + anchors.horizontalCenter: parent.horizontalCenter + anchors.verticalCenter: parent.verticalCenter + source:"images/arrowupactive.png" + opacity: downarrowOver.containsMouse? 1:0 + Behavior on opacity { + NumberAnimation { duration: 300 } + } + } + MouseArea { + id: downarrowOver + anchors.fill: parent + hoverEnabled: true + onClicked: list.contentY += itemHeight + } + } +} diff --git a/kcmkwin/kwindecoration/qml/images/arrowup.png b/kcmkwin/kwindecoration/qml/images/arrowup.png new file mode 100644 index 0000000000000000000000000000000000000000..ebb1d58912f1e1c5df30f160936cdc22eac82d4d GIT binary patch literal 194 zcmeAS@N?(olHy`uVBq!ia0vp^>_E)I!3HFqj;YpyIK@t$Asj$Z!;#Vf2?p zUk71ECym(^Ktah8*NBqf{Irtt#G+J&^73-M%)IR4oR)vU~?8#_%ExEH}lI@)X&7vDF hvFDumuhrc7m(j~zEhS4mC<$m3gQu&X%Q~loCIG3YJT(9S literal 0 HcmV?d00001 diff --git a/kcmkwin/kwindecoration/qml/images/arrowupactive.png b/kcmkwin/kwindecoration/qml/images/arrowupactive.png new file mode 100644 index 0000000000000000000000000000000000000000..a92e3dbcc7800035bc46aaa697251f352a5da1c5 GIT binary patch literal 219 zcmeAS@N?(olHy`uVBq!ia0vp^>_E)I!3HFqj;YpyIK@t$Asj$Z!;#Vf2?p zUk71ECym(^Ktah8*NBqf{Irtt#G+J&^73-M%)IR4nZdW06)3q=3>HHIcDgPOjV%5UBm)`IN+QH!I>gTe~ HDWM4fZKOyo literal 0 HcmV?d00001 diff --git a/kcmkwin/kwindecoration/qml/images/bg.png b/kcmkwin/kwindecoration/qml/images/bg.png new file mode 100644 index 0000000000000000000000000000000000000000..5aa56957dc0a46f5fa11e8911e5f65d85cd804e6 GIT binary patch literal 263 zcmeAS@N?(olHy`uVBq!ia0vp^#z3sZ!3HEhX+IPJQY^(zo*^7SP{WbZ0pxQQctjQh z)n5l;MkkHg6+l7B64!{5;QX|b^2DN4hVt@qz0ADq;^f4FRK5J7^x5xhq=1TAJY5_^ zB3j?x+{oKtAmALRE+oBCfXCJIsM$%s`AwoqM;+^gf4n{=yn&JZLPYT6+xtZyOeo2& zO=q07r1sk+#wx}cdy}SERUh!^ESxG4j+5Bm{c^KA&!yE%vcGjXuG4xsu_Ws*cWLeK f`JWc6H^i+yaxY2r+|gE`dl)=j{an^LB{Ts5I&fY- literal 0 HcmV?d00001 diff --git a/kcmkwin/kwindecoration/qml/images/glow.png b/kcmkwin/kwindecoration/qml/images/glow.png new file mode 100644 index 0000000000000000000000000000000000000000..ec173b47455dbb4ca4038626afc8a68e94877af8 GIT binary patch literal 406 zcmeAS@N?(olHy`uVBq!ia0vp^#z3sZ!3HEhX+IPJQY^(zo*^7SP{WbZ0pxQQctjQh z)n5l;MkkHg6+l7B64!{5;QX|b^2DN4hVt@qz0ADq;^f4FRK5J7^x5xhq!<_&g*{yy zLn2z=-Zb<&oFLQoQ9VA`!`^V>goCP^15BGa^dx0i_ycS@pMOyL#?sW>yjVjwtl-6y zM+%CH65WPBZJfI%tpD_X?t|KA*B{>EajTYD?9n*m>}R*rf3IuvpUX(|^Ev!-L&8F@ zRr{uwUd>zlx}i4xz}#*n*)*LyJ(j$#_aE;HGG#pA@A8UiqgLgjg(vjP^ws7xX|3$& z2)&>DZ_<$)UP(EshTA4dM0@tERXG+Wl&sykaVnDV-_;W4A5X-aM6LaBIP-q-wMW~f z=2kp;cO>1CTatN27IQp9?>gsW!t<8~*UUaV+yC4;JC0}CWxwREhd!DZ?u|fsE{IVIr_+<_m&18z~YQZWQ1u^>o_4hJ;Z^vy|j*Mp_Gy4;N978e>2{ZMu`Y@ zm{SV{Sh6iDr4*nn7imDml7=$ZGJpd#foH%|1Ezrl_z4UFodb#p*|!23zVB}ZL9iQ! z;b{~_VtN>cr$G?x`o6yfG-g6XA$++=Ni zoiAUH_S)_CN8r1NXbLrOfK|`)cH%fDP192ClH?bI{yCoK?EtIh`66h=b=~dJXjFpC zY?vgtuDcDa+y_!XL$tmZa$DDFOd~r}0s$yp;eqPApL1)a2RVnLoRvWp6xm`*AYDO` zEykj#LTZ+n|01fiOD7rWUQWIu^G;rNJJ~6Ra=+MCcu#90J$b86ZE5YT)YA z{(fgX9yi~m-GWw6l)*3htjBE&djEeUP_}8@p9z2 zA;K%-Xgb9QFriRmsLCIS@nn?n=VqPJ1m;ha4P$Cy$ogvy-v7K^e)-{=zIS8A!r3}J z$=u10NAlCR``*{RG26qKec*%%sMAFT0b#>q^RssG#V675ZvXeE{2a%aDrzOBN}~~l zAK$!r*V-@HH$(rcQNXiKmoXhw9Js*%DTJ_IqjjfQ-tPDNj7FomhQ;xay~n?Cr&->v z*Ju?&I2a%foB$*VA|8P$&FeuKrfGUk?;(j}t_NjkN>e<7B&nJq07Zlgd<5`J^<2m# zPIJ7#M~bK#51Ah3I0L74IY>=0aF$n)GoXLIcHT%|oHGYnR?(%PE3C+tP_!s#{%T9i z(W0CMik7(Af}9tMu7sk0@jtp4^#6NnFBB~U`p?>bxuQimSA8J;4b1aUF?3l)VyNe# z{zm24Do~0QV@mVL4rt_DP;e39fJSZ}Suv*c(+SAIS_>7(tmJS<)*ot-vj`?m@I8+m zS$}9HhXUDJ3&nw$VcU<;EFw*OdiQDH`#!kUe_Ga5iyYGuXBFhoU)65-M*lwTdx=jk zi%7R0p=Q|BjK1?7LB7H2HP~FM@pf~CcLSeWW&{Avk>>?_!;D{!#_Yz>3kDoN_>_EV zMh(pEQoQ*A!(7?hSN=LF+3`K1((nL0M_H64&vK6Zlw%b}4|XZe*yBk|Z1Q99Bk;2n z(csjP<=9FcO`v!kidm0c&4k&R1?DhwY?)xst!mG4T9VoIH`BTxMYy%6&Hw-a07*qo IM6N<$f+IDZ>i_@% literal 0 HcmV?d00001 diff --git a/kcmkwin/kwindecoration/qml/images/shadow.png b/kcmkwin/kwindecoration/qml/images/shadow.png new file mode 100644 index 0000000000000000000000000000000000000000..ee8dcfa530c52fc3ac59b96e8606f4b0ccce4626 GIT binary patch literal 390 zcmeAS@N?(olHy`uVBq!ia0vp^#z3sZ!3HEhX+IPJQY^(zo*^7SP{WbZ0pxQQctjQh z)n5l;MkkHg6+l7B64!{5;QX|b^2DN4hVt@qz0ADq;^f4FRK5J7^x5xhq!<_&nLS+` zLn2z=-cwA(g9=b)J}v>2=G?{|p(89thrG{5xrN zniaE^f_DRV0)I`#`+Bjtrp+BaKEJt{Wf~Yibg!Fr-uSJ(#G~FHr`PMHnVP7DNC|88 za!x(g;+5>Q)NtXY83CC-Ds+IKEXtZ8Izd?}uvPYZUc=h0Wgc^iV`Hyt ze&F3Be?KodvB6uR^jzts@3q&qy^W2WrtW)rj?nc$iS9)|)~tG^eg1Rx$9vKb+J4y2 co>$Kp+-?6vcArQzFw7V{UHx3vIVCg!0K|cm82|tP literal 0 HcmV?d00001 diff --git a/kcmkwin/kwindecoration/qml/main.qml b/kcmkwin/kwindecoration/qml/main.qml index e39ec7783c..9112b688cf 100644 --- a/kcmkwin/kwindecoration/qml/main.qml +++ b/kcmkwin/kwindecoration/qml/main.qml @@ -1,5 +1,6 @@ /******************************************************************** Copyright (C) 2012 Martin Gräßlin +Copyright (C) 2012 Nuno Pinheiro This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by @@ -16,19 +17,34 @@ along with this program. If not, see . *********************************************************************/ import QtQuick 1.1 import org.kde.qtextracomponents 0.1 as QtExtra -import org.kde.plasma.components 0.1 as PlasmaComponents -Item { +BorderImage { property alias currentIndex: listView.currentIndex + source: "images/bg.png" + border { + left: 4 + top: 4 + right: 4 + bottom: 4 + } + + MouseArea { + id: focusOver + anchors.fill: parent + hoverEnabled: true + } + ListView { id: listView - height: parent.height - width: parent.width - scrollBar.width + x: 3 + height: parent.height - 1 // -1 on the account of the last pixel being a glow pixel + width: parent.width - 6 - scrollbar.width model: decorationModel - highlight: PlasmaComponents.Highlight { - width: listView.width - 10 - height: 140 - hover: true + highlight: Rectangle { + width: listView.width + height: 150 + color: "lightsteelblue" + opacity: 0.5 } delegate: Item { width: listView.width @@ -51,13 +67,34 @@ Item { } } } - PlasmaComponents.ScrollBar { - id: scrollBar - flickableItem: listView - anchors { - right: parent.right - top: parent.top - bottom: parent.bottom + OxygenScrollbar { + id: scrollbar + list: listView + itemHeight: 150 + } + + BorderImage { + id: shadow + source: "images/shadow.png" + anchors.fill:parent + border.left: 4; border.top: 4 + border.right: 4; border.bottom: 5 + opacity:focusOver.containsMouse? 0.01:1 //insert here a proper focus mechanism + Behavior on opacity { + NumberAnimation { duration: 300 } + } + + } + + BorderImage { + id: glow + source: "images/glow.png" + anchors.fill:parent + border.left: 4; border.top: 4 + border.right: 4; border.bottom: 5 + opacity:focusOver.containsMouse? 1:0 //insert here a proper focus mechanism + Behavior on opacity { + NumberAnimation { duration: 300 } } } }