Merge pull request #75 from neochapay/master

[Theming] Add white theme proto
nemomobile · Jul 30, 2019 · c360d16 · c360d16
2 parents bb24db7 + 20909df
commit c360d16
Show file tree

Hide file tree

Showing 15 changed files with 177 additions and 194 deletions.
diff --git a/examples/touch/glacier-components.qml b/examples/touch/glacier-components.qml
@@ -139,7 +139,6 @@ ApplicationWindow {
         }
     }
 
-
     initialPage: Page {
         id: pageItem
 
@@ -176,15 +175,17 @@ ApplicationWindow {
             drawerLevels: [
                 Button {
                     anchors.horizontalCenter: (parent==undefined) ? undefined : parent.horizontalCenter;
-                    text: "Nemo"
-                },
-                Button {
-                    anchors.horizontalCenter: (parent==undefined) ? undefined : parent.horizontalCenter;
-                    text: "Mobile"
+                    text: qsTr("Black theme")
+                    onClicked: {
+                        Theme.loadTheme("/usr/lib/qt5/qml/QtQuick/Controls/Styles/Nemo/themes/glacier_black.json")
+                    }
                 },
                 Button {
                     anchors.horizontalCenter: (parent==undefined) ? undefined : parent.horizontalCenter;
-                    text: "FTW"
+                    text: qsTr("White theme")
+                    onClicked: {
+                        Theme.loadTheme("/usr/lib/qt5/qml/QtQuick/Controls/Styles/Nemo/themes/glacier_white.json")
+                    }
                 },
                 RowLayout {
                     anchors.left: (parent==undefined) ? undefined : parent.left

diff --git a/qtquickcontrols-nemo.pro b/qtquickcontrols-nemo.pro
@@ -1,3 +1,5 @@
 #load(qt_parts)
 TEMPLATE=subdirs
 SUBDIRS += src examples
+
+DISTFILES += rpm/qtquickcontrols-nemo.spec
diff --git a/src/controls/controls.pro b/src/controls/controls.pro
@@ -30,6 +30,7 @@ QML_FILES += \
     qml/ToolButton.qml \
     qml/ScrollDecorator.qml \
     qml/TextField.qml \
+    qml/NemoIcon.qml \
     qml/ErrorStackPage.qml \
     qml/dialogs/QueryDialog.qml \
     qml/dialogs/SelectionDialog.qml \

diff --git a/src/controls/qml/HeaderToolsLayout.qml b/src/controls/qml/HeaderToolsLayout.qml
@@ -39,7 +39,7 @@ Item {
 
         visible: showBackButton
 
-        Image {
+        NemoIcon {
             anchors.centerIn: parent
             height: toolMeasure
             width: height
@@ -111,7 +111,7 @@ Item {
         }
     }
 
-    Image {
+    NemoIcon {
         id: dots
         anchors{
             right: parent.right

diff --git a/src/controls/qml/ListViewItemWithActions.qml b/src/controls/qml/ListViewItemWithActions.qml
@@ -115,7 +115,7 @@ Item {
             visible: mouse.pressed
         }
 
-        Image{
+        NemoIcon{
             id: itemIcon
             height: iconVisible ? parent.height-Theme.itemSpacingSmall : 0
             width: height
@@ -199,13 +199,13 @@ Item {
                     end: Qt.point( Theme.itemHeightExtraSmall / 2, 0)
                     gradient: Gradient {
                         GradientStop { position: 0.0; color: "transparent" }
-                        GradientStop { position: 1.0; color: "black" }
+                        GradientStop { position: 1.0; color: Theme.backgroundColor }
                     }
                 }
             }
         }
 
-        Image {
+        NemoIcon {
             id: arrowItem
             height: parent.height- Theme.itemSpacingSmall
             width: height

diff --git a/src/controls/qml/NemoIcon.qml b/src/controls/qml/NemoIcon.qml
@@ -0,0 +1,55 @@
+/****************************************************************************************
+**
+** Copyright (C) 2019 Chupligin Sergey <[email protected]>
+** All rights reserved.
+**
+** You may use this file under the terms of BSD license as follows:
+**
+** Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are met:
+**     * Redistributions of source code must retain the above copyright
+**       notice, this list of conditions and the following disclaimer.
+**     * Redistributions in binary form must reproduce the above copyright
+**       notice, this list of conditions and the following disclaimer in the
+**       documentation and/or other materials provided with the distribution.
+**     * Neither the name of the author nor the
+**       names of its contributors may be used to endorse or promote products
+**       derived from this software without specific prior written permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
+** ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+** WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+** DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDERS OR CONTRIBUTORS BE LIABLE FOR
+** ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+** (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+** LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
+** ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
+** SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+**
+****************************************************************************************/
+
+
+import QtQuick 2.6
+
+Image {
+    id: nemoIcon
+
+    layer.effect: ShaderEffect {
+        id: shaderItem
+        property color color: Theme.textColor
+
+        fragmentShader: "
+            varying mediump vec2 qt_TexCoord0;
+            uniform highp float qt_Opacity;
+            uniform lowp sampler2D source;
+            uniform highp vec4 color;
+            void main() {
+                highp vec4 pixelColor = texture2D(source, qt_TexCoord0);
+                gl_FragColor = vec4(mix(pixelColor.rgb/max(pixelColor.a, 0.00390625), color.rgb/max(color.a, 0.00390625), color.a) * pixelColor.a, pixelColor.a) * qt_Opacity;
+            }
+        "
+    }
+    layer.enabled: true
+    layer.samplerName: "source"
+}
diff --git a/src/controls/qml/ToolButton.qml b/src/controls/qml/ToolButton.qml
@@ -41,7 +41,7 @@ Button {
     property bool showZeroCounter: false
     property int counterValue: 0
 
-    Image {
+    NemoIcon {
         id: iconImage
         anchors.fill: parent
         fillMode: Image.PreserveAspectFit

diff --git a/src/controls/qml/qmldir b/src/controls/qml/qmldir
@@ -32,6 +32,7 @@ ScrollDecorator 1.0 ScrollDecorator.qml
 TextField 1.0 TextField.qml
 ProgressBar 1.0 ProgressBar.qml
 ActionButton 1.0 ActionButton.qml
+NemoIcon 1.0 NemoIcon.qml
 
 # MIRRORED CONTROLS: 
 # These are the controls that we take directly from official QQC.

diff --git a/src/controls/theme.h b/src/controls/theme.h
@@ -47,7 +47,7 @@ class Theme : public QObject
 public:
     explicit Theme(QObject *parent = 0);
 
-    bool loadTheme(QString fileName);
+    Q_INVOKABLE bool loadTheme(QString fileName);
     qreal itemWidthLarge(){return m_itemWidthLarge;}
     qreal itemWidthMedium(){return m_itemWidthMedium;}
     qreal itemWidthSmall(){return m_itemWidthSmall;}

diff --git a/src/styles/qml/CheckBoxStyle.qml b/src/styles/qml/CheckBoxStyle.qml
@@ -65,8 +65,8 @@ CheckBoxStyle {
                 end: Qt.point(0, Theme.itemHeightExtraSmall)
                 source: ball
                 gradient: Gradient {
-                    GradientStop { position: 0.0; color: "#ffffff" }
-                    GradientStop { position: 1.0; color: "#dcdcdc" }
+                    GradientStop { position: 0.0; color: Theme.textColor }
+                    GradientStop { position: 1.0; color: Theme.fillDarkColor }
                 }
             }
 

diff --git a/src/styles/styles.pro b/src/styles/styles.pro
@@ -8,26 +8,6 @@ QT+=qml
 
 # Styles
 QML_FILES = \
-    qml/ButtonStyle.qml \
-    qml/CheckBoxStyle.qml \
-    qml/ComboBoxStyle.qml \
-    qml/FocusFrameStyle.qml \
-    qml/GroupBoxStyle.qml \
-    qml/MenuBarStyle.qml \
-    qml/MenuStyle.qml \
-    qml/ProgressBarStyle.qml \
-    qml/RadioButtonStyle.qml \
-    qml/ScrollViewStyle.qml\
-    qml/SliderStyle.qml \
-    qml/SpinBoxStyle.qml \
-    qml/StatusBarStyle.qml \
-    qml/TableViewStyle.qml \
-    qml/TabViewStyle.qml \
-    qml/TextFieldStyle.qml \
-    qml/TextAreaStyle.qml \
-    qml/ToolBarStyle.qml \
-    qml/ToolButtonStyle.qml \
-    qml/IconButtonStyle.qml
 
 # Images
 QML_FILES += \
@@ -38,20 +18,35 @@ QML_FILES += \
     images/slider-trumpet-up.png \
     images/slider-trumpet.png
 
-OTHER_FILES += qmldir \
-    themes/Theme1.js \
-    themes/Theme2.js \
-    themes/glacier.json \
-    themes/ugly.json \
-    $$QML_FILES
-
 target.path = $$[QT_INSTALL_QML]/$$PLUGIN_IMPORT_PATH
 
-qmlfiles.files = $$_PRO_FILE_PWD_/qml/*.qml
-qmlfiles.files += $$_PRO_FILE_PWD_/qml/qmldir
+qmlfiles.files = qml/ButtonStyle.qml \
+                qml/CheckBoxStyle.qml \
+                qml/ComboBoxStyle.qml \
+                qml/FocusFrameStyle.qml \
+                qml/GroupBoxStyle.qml \
+                qml/MenuBarStyle.qml \
+                qml/MenuStyle.qml \
+                qml/ProgressBarStyle.qml \
+                qml/RadioButtonStyle.qml \
+                qml/ScrollViewStyle.qml\
+                qml/SliderStyle.qml \
+                qml/SpinBoxStyle.qml \
+                qml/StatusBarStyle.qml \
+                qml/TableViewStyle.qml \
+                qml/TabViewStyle.qml \
+                qml/TextFieldStyle.qml \
+                qml/TextAreaStyle.qml \
+                qml/ToolBarStyle.qml \
+                qml/ToolButtonStyle.qml \
+                qml/IconButtonStyle.qml
+                qml/qmldir
+
 qmlfiles.path = $$[QT_INSTALL_QML]/$$PLUGIN_IMPORT_PATH
 
-themes.files = $$_PRO_FILE_PWD_/themes/*.json
+themes.files = $$_PRO_FILE_PWD_/themes/glacier_black.json \
+               $$_PRO_FILE_PWD_/themes/glacier_white.json
+
 themes.path = $$[QT_INSTALL_QML]/$$PLUGIN_IMPORT_PATH/themes
 
 images.files = $$_PRO_FILE_PWD_/images/*.svg\
@@ -65,7 +60,9 @@ HEADERS += \
 SOURCES += \
     qquicknemostyleextensionplugin.cpp
 
-INSTALLS += target images qmlfiles themes
+INSTALLS += target \
+            images \
+            qmlfiles \
+            themes
 
 DEFINES += 'THEME_DIR=\'\"$$[QT_INSTALL_QML]/$$PLUGIN_IMPORT_PATH/themes"\''
-
diff --git a/src/styles/themes/glacier.json b/src/styles/themes/glacier.json
diff --git a/src/styles/themes/glacier_black.json b/src/styles/themes/glacier_black.json
@@ -0,0 +1,36 @@
+{
+    "itemWidthLarge" : 320,
+    "itemWidthMedium" : 240,
+    "itemWidthSmal" : 120,
+    "itemWidthExtraSmal" : 72,
+
+    "itemHeightHuge" : 80,
+    "itemHeightExtraLarge" : 75,
+    "itemHeightLarge" : 63,
+    "itemHeightMedium" : 50,
+    "itemHeightSmal" : 40,
+    "itemHeightExtraSmal" : 32,
+
+    "itemSpacingHuge" : 40,
+    "itemSpacingLarge" : 20,
+    "itemSpacingMedium" : 15,
+    "itemSpacingSmal" : 10,
+    "itemSpacingExtraSmal" : 8,
+
+
+    "fontSizeExtraLarge" : 44,
+    "fontSizeLarge" : 35,
+    "fontSizeMedium" : 28,
+    "fontSizeSmal" : 24,
+    "fontSizeTiny" : 16,
+    "fontWeightLarge" : 63,
+    "fontWeightMedium" : 25,
+    "fontFamily" : "/usr/share/fonts/google-opensans/OpenSans-Regular.ttf",
+
+    "accentColor" : "#0091e5",
+    "fillColor" : "#474747",
+    "fillDarkColor" : "#313131",
+    "textColor" : "#ffffff",
+    "backgroundColor" : "#000000",
+    "backgroundAccentColor" : "#ffffff"
+}