Customization Integration

Author: MarianArlt

Background.qml

@@ -1,5 +1,10 @@
 # Changelog
 
+## [0.5.3] - 2018-10-12
+
+### Changed
+- A lot of new options in theme.conf, see README for details
+
 ## [0.5.2] - 2018-07-22
 
 ### Changed

CHANGELOG.md

@@ -10,8 +10,11 @@ import org.kde.plasma.components 2.0 as PlasmaComponents
 SessionManagementScreen {
 
     property bool showUsernamePrompt: !showUserList
-
+    property int usernameFontSize
+    property string usernameFontColor
     property string lastUserName
+    property bool passwordFieldOutlined: config.PasswordFieldOutlined == "true"
+    property bool hidePasswordRevealIcon: config.HidePasswordRevealIcon == "false"
 
     //the y position that should be ensured visible when the on screen keyboard is visible
     property int visibleBoundary: mapFromItem(loginButton, 0, 0).y
@@ -43,10 +46,10 @@ SessionManagementScreen {
     PlasmaComponents.TextField {
         id: userNameInput
         Layout.fillWidth: true
-        Layout.minimumHeight: 24
+        Layout.minimumHeight: 21
         implicitHeight: root.height / 28
         font.family: "Noto Sans"
-        font.pointSize: root.height / 75
+        font.pointSize: usernameFontSize
         opacity: 0.5
         text: lastUserName
         visible: showUsernamePrompt
@@ -63,21 +66,28 @@ SessionManagementScreen {
 
     PlasmaComponents.TextField {
         id: passwordBox
+        
         Layout.fillWidth: true
-        Layout.minimumHeight: 24
-        implicitHeight: root.height / 28
+        Layout.minimumHeight: 21
+        implicitHeight: usernameFontSize * 2.85
+        font.pointSize: usernameFontSize * 0.8
+        opacity: passwordFieldOutlined ? 0.75 : 0.5
         font.family: "Noto Sans"
-        font.pointSize: root.height / 85
-        opacity: 0.5
-        placeholderText: i18nd("plasma_lookandfeel_org.kde.lookandfeel", "Password")
+        placeholderText: config.PasswordFieldPlaceholderText == "Password" ? i18nd("plasma_lookandfeel_org.kde.lookandfeel", "Password") : config.PasswordFieldPlaceholderText
         focus: !showUsernamePrompt || lastUserName
         echoMode: TextInput.Password
+        revealPasswordButtonShown: hidePasswordRevealIcon
         onAccepted: startLogin()
 
         style: TextFieldStyle {
-            textColor: "black"
+            textColor: passwordFieldOutlined ? "white" : "black"
+            placeholderTextColor: passwordFieldOutlined ? "white" : "black"
+            passwordCharacter: config.PasswordFieldCharacter == "" ? "●" : config.PasswordFieldCharacter
             background: Rectangle {
                 radius: 3
+                border.color: "white"
+                border.width: 1
+                color: passwordFieldOutlined ? "transparent" : "white"
             }
         }
 

Login.qml

@@ -32,10 +32,12 @@ PlasmaCore.ColorScope {
     id: root
     colorGroup: PlasmaCore.Theme.ComplementaryColorGroup
 
-    width: 1600
-    height: 900
+    width: config.ScreenWidth
+    height: config.ScreenHeight
 
     property string notificationMessage
+    property string generalFontColor: "white"
+    property int generalFontSize: config.FontPointSize ? config.FontPointSize : root.height / 75
 
     LayoutMirroring.enabled: Qt.application.layoutDirection === Qt.RightToLeft
     LayoutMirroring.childrenInherit: true
@@ -66,6 +68,7 @@ PlasmaCore.ColorScope {
         }
         anchors.rightMargin: 14
         anchors.topMargin: 10
+        clockSize: root.generalFontSize
     }
 
 
@@ -95,6 +98,10 @@ PlasmaCore.ColorScope {
             userListModel: userModel
             userListCurrentIndex: userModel.lastIndex >= 0 ? userModel.lastIndex : 0
             lastUserName: userModel.lastUser
+            
+            usernameFontSize: root.generalFontSize
+            usernameFontColor: root.generalFontColor
+
             showUserList: {
                 if ( !userListModel.hasOwnProperty("count")
                 || !userListModel.hasOwnProperty("disableAvatarsThreshold"))
@@ -120,24 +127,27 @@ PlasmaCore.ColorScope {
             actionItems: [
                 ActionButton {
                     iconSource: "system-suspend"
-                    text: i18nd("plasma_lookandfeel_org.kde.lookandfeel","Suspend")
+                    text: config.translationSuspend ? config.translationSuspend : i18nd("plasma_lookandfeel_org.kde.lookandfeel","Suspend")
                     onClicked: sddm.suspend()
                     enabled: sddm.canSuspend
                     visible: !inputPanel.keyboardActive
+                    iconSize: root.generalFontSize * 4.25
                 },
                 ActionButton {
                     iconSource: "system-reboot"
-                    text: i18nd("plasma_lookandfeel_org.kde.lookandfeel","Restart")
+                    text: config.translationReboot ? config.translationReboot : i18nd("plasma_lookandfeel_org.kde.lookandfeel","Restart")
                     onClicked: sddm.reboot()
                     enabled: sddm.canReboot
                     visible: !inputPanel.keyboardActive
+                    iconSize: root.generalFontSize * 4.25
                 },
                 ActionButton {
                     iconSource: "system-shutdown"
-                    text: i18nd("plasma_lookandfeel_org.kde.lookandfeel","Shutdown")
+                    text: config.translationPowerOff ? config.translationPowerOff : i18nd("plasma_lookandfeel_org.kde.lookandfeel","Shutdown")
                     onClicked: sddm.powerOff()
                     enabled: sddm.canPowerOff
                     visible: !inputPanel.keyboardActive
+                    iconSize: root.generalFontSize * 4.25
                 }
             ]
 
@@ -318,6 +328,7 @@ PlasmaCore.ColorScope {
 
         SessionButton {
             id: sessionButton
+            sessionFontSize: root.generalFontSize
         }
 
     }

Main.qml

@@ -30,18 +30,36 @@ In the `[Theme]` section set `Current=plasma-chili`. For a more detailed descrip
 
 ### Theming the theme
 
-Chili is now customizable through its `theme.conf` file. You can now alter the intensity of the background blur or even not have any blur at all! Also there may be screens so big that the avatar just not looks correct. Change it in the config to something that better suits your screen!
+Chili is now **even more** customizable through its `theme.conf` file. You can alter the intensity of the background blur or even not have any blur at all! Have a custom password field to your likings! Also there may be screens so big that the avatar just not looks correct. Change it in the config to something that better suits your screen!
 
   * Change the path of the background image relative to the themes directory:
   `background=components/artwork/background.jpg`
 
-  * Disable blur or play around with its intensity:
-  `blur=true`
-  `recursiveBlurLoops=40`
-  `recursiveBlurRadius=4`
-
-  * Adjust the size of the user image:
-  `changeAvatarPixelSize=`
+  * Set the real screen size if anything looks odd:  
+  `ScreenWidth=1366`  
+  `ScreenHeight=768`  
+
+  * Disable blur or play around with its intensity:  
+  `blur=true`  
+  `recursiveBlurLoops=40`  
+  `recursiveBlurRadius=4`  
+
+  * Customize the password input field:  
+  `HidePasswordRevealIcon=true`  
+  `PasswordFieldOutlined=false`  
+  `PasswordFieldCharacter=`  
+  *Here are some funny ones you can copy: ⁙ ⁕ ○ █ ©*   
+  `PasswordFieldPlaceholderText=Password`  
+
+  * Adjust the sizes of the theme (dangerous!):  
+  `PowerIconSize=`  
+  `FontPointSize=`  
+  `changeAvatarPixelSize=`  
+
+  * Translate the power buttons if your language isn't available by default:  
+  `translationSuspend=`  
+  `translationReboot=`  
+  `translationPowerOff=`  
 
 You might see some grey pixels around your user image which is caused by the the anti-aliasing of the opacity mask. You may change the fill color of the mask that resides in `components/artwork/mask.svg` to a color that better matches with your user images colors. Do **not** change the *opacity* of the mask. Take note that this might affect other user images with different colors present on your system.
 

README.md

@@ -27,10 +27,11 @@ import QtQuick.Controls 1.3 as QQC
 PlasmaComponents.ToolButton {
     id: root
     property int currentIndex: -1
+    property int sessionFontSize
 
     visible: menu.items.length > 1
     font.family: "Noto Sans"
-    font.pointSize: footer.parent.height / 75
+    font.pointSize: sessionFontSize
 
     text: instantiator.objectAt(currentIndex).text || ""
 

SessionButton.qml

@@ -31,7 +31,7 @@ Item {
 
     activeFocusOnTab: true
     opacity: ( containsMouse || activeFocus ) ? 1 : 0.6
-    property int iconSize: units.gridUnit * 2
+    property int iconSize
 
     implicitWidth: Math.max(icon.implicitWidth + units.largeSpacing * 3, label.contentWidth)
     implicitHeight: Math.max(icon.implicitHeight + units.largeSpacing * 2, label.contentHeight)
@@ -43,8 +43,8 @@ Item {
             horizontalCenter: parent.horizontalCenter
         }
 
-        width: iconSize
-        height: iconSize
+        width: config.PowerIconSize ? config.PowerIconSize : iconSize
+        height: config.PowerIconSize ? config.PowerIconSize : iconSize
 
         colorGroup: PlasmaCore.ColorScope.colorGroup
         active: mouseArea.containsMouse || root.activeFocus
@@ -81,4 +81,4 @@ Item {
     Accessible.onPressAction: clicked()
     Accessible.role: Accessible.Button
     Accessible.name: label.text
-}
+}

components/ActionButton.qml

@@ -24,17 +24,20 @@ import org.kde.plasma.core 2.0
 import org.kde.plasma.components 2.0
 
 RowLayout {
+
+    property int clockSize
+    
     KeyboardButton {}
     Battery {}
     Label {
         font.family: "Noto Sans"
-        font.pointSize: root.height / 75
+        font.pointSize: clockSize
         text: Qt.formatDateTime(timeSource.data["Local"]["DateTime"], " ddd dd MMMM,")
         renderType: Text.QtRendering
     }
     Label {
         font.family: "Noto Sans"
-        font.pointSize: root.height / 75
+        font.pointSize: clockSize
         text: Qt.formatTime(timeSource.data["Local"]["DateTime"])
         renderType: Text.QtRendering
     }

components/Battery.qml

@@ -37,7 +37,7 @@ Item {
     property bool constrainText: true
     signal clicked()
 
-    property real faceSize: config.changeAvatarPixelSize ? config.changeAvatarPixelSize : Math.min(width, height - usernameDelegate.height - units.smallSpacing)
+    property real faceSize: config.AvatarPixelSize ? config.AvatarPixelSize : Math.min(width, height - usernameDelegate.height - units.smallSpacing)
 
     opacity: isCurrent ? 1.0 : 0.3
 
@@ -93,7 +93,7 @@ Item {
     PlasmaComponents.Label {
         id: usernameDelegate
         font.family: "Noto Sans"
-        font.pointSize: root.height / 60
+        font.pointSize: config.FontPointSize ? config.FontPointSize * 1.2 : root.height / 80 * 1.2
         renderType: Text.QtRendering
         font.capitalization: Font.Capitalize
         anchors {

components/Clock.qml

@@ -4,7 +4,7 @@ Description=The hottest theme for KDE Plasma
 Author=Marian Alexander Arlt
 License=GPLv3
 Type=sddm-theme
-Version=0.5.2
+Version=0.5.3
 Website=https://github.com/MarianArlt/kde-plasma-chili
 Screenshot=preview.png
 MainScript=Main.qml

components/KeyboardButton.qml

@@ -1,8 +1,22 @@
 [General]
 background=components/artwork/background.jpg
 
+ScreenWidth=1366
+ScreenHeight=768
+
 blur=true
-recursiveBlurLoops=20
-recursiveBlurRadius=4
+recursiveBlurLoops=4
+recursiveBlurRadius=15
+
+HidePasswordRevealIcon=true
+PasswordFieldOutlined=false
+PasswordFieldCharacter=
+PasswordFieldPlaceholderText=Password
+
+PowerIconSize=
+FontPointSize=
+AvatarPixelSize=
 
-changeAvatarPixelSize=
+translationSuspend=
+translationReboot=
+translationPowerOff=