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

@@ -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)

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);
     }

kcmkwin/kwindecoration/qml/OxygenScrollbar.qml

@@ -0,0 +1,147 @@
+/********************************************************************
+Copyright (C) 2012 Nuno Pinheiro <nuno@oxygen-icons.org>
+
+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 <http://www.gnu.org/licenses/>.
+*********************************************************************/
+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
+        }
+    }
+}

kcmkwin/kwindecoration/qml/main.qml

@@ -1,5 +1,6 @@
 /********************************************************************
 Copyright (C) 2012 Martin Gräßlin <mgraesslin@kde.org>
+Copyright (C) 2012 Nuno Pinheiro <nuno@oxygen-icons.org>
 
 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 <http://www.gnu.org/licenses/>.
 *********************************************************************/
 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 }
         }
     }
 }