From 712d6b2947c6b391f10201c5342167ff57777b2b Mon Sep 17 00:00:00 2001 From: Cyril Jacquet Date: Sun, 1 May 2022 00:45:07 +0200 Subject: [PATCH] add 2 themes --- src/app/src/themes.qrc | 2 + src/app/src/themes/snowblind.json | 31 +++ .../src/themes/the-answer-to-snowblind.json | 32 +++ src/plugins/themePage/ThemePage.qml | 192 ++++++------------ src/translations/skribisto_en_US.ts | 28 +-- 5 files changed, 146 insertions(+), 139 deletions(-) create mode 100644 src/app/src/themes/snowblind.json create mode 100644 src/app/src/themes/the-answer-to-snowblind.json diff --git a/src/app/src/themes.qrc b/src/app/src/themes.qrc index b446de836..9d124bebc 100755 --- a/src/app/src/themes.qrc +++ b/src/app/src/themes.qrc @@ -3,5 +3,7 @@ themes/default-light.json themes/space-opera-theme.json themes/default-dark.json + themes/the-answer-to-snowblind.json + themes/snowblind.json diff --git a/src/app/src/themes/snowblind.json b/src/app/src/themes/snowblind.json new file mode 100644 index 000000000..39aeaae13 --- /dev/null +++ b/src/app/src/themes/snowblind.json @@ -0,0 +1,31 @@ +{ + "colors": { + "accent": "#8bcecb", + "buttonBackground": "#D6D7D7", + "buttonForeground": "#000000", + "buttonIcon": "#000000", + "buttonIconDisabled": "#D6D7D7", + "divider": "#83d9d0", + "findHighlight": "#ffff00", + "listItemBackground": "#fbfbfb", + "mainTextAreaBackground": "#FFFFFF", + "mainTextAreaForeground": "#000000", + "menuBackground": "#ffffff", + "minimapFindHighlight": "#ffff00", + "minimapOtherHighlight_1": "#8bc34a", + "minimapOtherHighlight_2": "", + "minimapOtherHighlight_3": "", + "minimapSpellCheckHighlight": "#800000", + "otherHighlight_1": "", + "otherHighlight_2": "", + "otherHighlight_3": "", + "pageBackground": "#ffffff", + "pageToolBarBackground": "#e6e6e6", + "secondaryTextAreaBackground": "#ffffff", + "secondaryTextAreaForeground": "#000000", + "spellCheckHighlight": "#800000", + "toolBarBackground": "#b2d9d7" + }, + "isEditable": false, + "themeName": "Snowblind" +} diff --git a/src/app/src/themes/the-answer-to-snowblind.json b/src/app/src/themes/the-answer-to-snowblind.json new file mode 100644 index 000000000..6f0232e33 --- /dev/null +++ b/src/app/src/themes/the-answer-to-snowblind.json @@ -0,0 +1,32 @@ +{ + "colors": { + "": "", + "accent": "#b56c17", + "buttonBackground": "#0e0e0e", + "buttonForeground": "#b1b1b1", + "buttonIcon": "#e2e2e2", + "buttonIconDisabled": "#414141", + "divider": "#9a9996", + "findHighlight": "#ffff00", + "listItemBackground": "#525252", + "mainTextAreaBackground": "#282525", + "mainTextAreaForeground": "#deddda", + "menuBackground": "#313131", + "minimapFindHighlight": "#ffff00", + "minimapOtherHighlight_1": "#8bc34a", + "minimapOtherHighlight_2": "", + "minimapOtherHighlight_3": "", + "minimapSpellCheckHighlight": "#7f7f7f", + "otherHighlight_1": "", + "otherHighlight_2": "", + "otherHighlight_3": "", + "pageBackground": "#313131", + "pageToolBarBackground": "#404142", + "secondaryTextAreaBackground": "#282525", + "secondaryTextAreaForeground": "#deddda", + "spellCheckHighlight": "#e66100", + "toolBarBackground": "#4a4842" + }, + "isEditable": false, + "themeName": "The Answer to Snowblind" +} diff --git a/src/plugins/themePage/ThemePage.qml b/src/plugins/themePage/ThemePage.qml index daafff2ad..319b13638 100755 --- a/src/plugins/themePage/ThemePage.qml +++ b/src/plugins/themePage/ThemePage.qml @@ -9,8 +9,6 @@ import "../../../../Items" import "../../../../Commons" import "../../../.." - - ThemePageForm { id: root property string pageType: "THEME" @@ -22,15 +20,14 @@ ThemePageForm { populateColorPropertiesListModel() } Component.onDestruction: { - if(rootWindow.visibility !== Window.FullScreen){ - SkrTheme.setDistractionFree(false) - } + if (rootWindow.visibility !== Window.FullScreen) { + SkrTheme.setDistractionFree(false) + } } //-------------------------------------------------------- //---View buttons----------------------------------------- //-------------------------------------------------------- - viewButtons.viewManager: root.viewManager viewButtons.position: root.position @@ -38,16 +35,14 @@ ThemePageForm { skrWindowManager.addWindowForProjectIndependantPageType(root.pageType) } - viewButtons.onSplitCalled: function(position){ + viewButtons.onSplitCalled: function (position) { viewManager.loadProjectIndependantPageAt(root.pageType, position) } titleLabel.text: title - //------------------------------------------------------------- //-----theme list----------------------------------------------- //------------------------------------------------------------- - addThemeButton.icon.source: "qrc:///icons/backup/edit-copy.svg" addThemeButton.onClicked: { SkrTheme.duplicate(selectedTheme, qsTr("%1 (copy)".arg(selectedTheme))) @@ -55,59 +50,55 @@ ThemePageForm { } //-------------------------------------------------------- - - ListModel { id: themeListModel } themeListView.model: themeListModel - function populateThemeListModel(){ + function populateThemeListModel() { themeListModel.clear() var list = SkrTheme.getThemeList() list.sort() var i - for(i = 0 ; i < list.length ; i++) { + for (i = 0; i < list.length; i++) { var isEditable = SkrTheme.isThemeEditable(list[i]) var name = list[i] - themeListModel.append({"text": name, "isEditable": isEditable}) - - + themeListModel.append({ + "text": name, + "isEditable": isEditable + }) } } //-------------------------------------------------------- - readonly property string currentLightThemeName: SkrTheme.currentLightThemeName readonly property string currentDarkThemeName: SkrTheme.currentDarkThemeName readonly property string currentDistractionFreeThemeName: SkrTheme.currentDistractionFreeThemeName property string selectedTheme: "" - themeListView.delegate: SkrListItemPane { id: themeDelegateRoot height: 60 - anchors{ + anchors { left: Qt.isQtObject(parent) ? parent.left : undefined right: Qt.isQtObject(parent) ? parent.right : undefined } - TapHandler { id: themeTapHandler - onSingleTapped: function(eventPoint) { + onSingleTapped: function (eventPoint) { themeListView.currentIndex = model.index selectedTheme = model.text themeDelegateRoot.forceActiveFocus() eventPoint.accepted = true } - onDoubleTapped: function(eventPoint) { + onDoubleTapped: function (eventPoint) { //console.log("double tapped") themeListView.currentIndex = model.index selectedTheme = model.text @@ -116,28 +107,25 @@ ThemePageForm { } } - - contentItem: RowLayout { anchors.fill: parent - Rectangle { id: themeCurrentItemIndicator color: "lightsteelblue" Layout.fillHeight: true Layout.preferredWidth: 5 - visible: themeListView.currentIndex === model.index && themeListView.activeFocus + visible: themeListView.currentIndex === model.index + && themeListView.activeFocus } Rectangle { id: themeOpenedItemIndicator - color: SkrTheme.accent + color: SkrTheme.accent Layout.fillHeight: true Layout.preferredWidth: 5 visible: model.text === selectedTheme } - SkrLabel { id: themeNameLabel text: model.text @@ -149,10 +137,8 @@ ThemePageForm { Layout.fillWidth: true } - SkrToolButton { - Layout.preferredHeight: 40 Layout.preferredWidth: 40 @@ -170,62 +156,61 @@ ThemePageForm { } } - Item { id: stretcher3 Layout.minimumWidth: 50 } - SkrRoundButton{ + SkrRoundButton { id: lightButton display: AbstractButton.IconOnly - text: SkrTheme.currentLightThemeName === model.text ? qsTr("Light") : qsTr("Set as light theme") - icon{ - source: SkrTheme.currentLightThemeName === model.text ? "qrc:///icons/backup/color-picker-white.svg" : "" + text: SkrTheme.currentLightThemeName === model.text ? qsTr("Light") : qsTr( + "Set as light theme") + icon { + source: SkrTheme.currentLightThemeName + === model.text ? "qrc:///icons/backup/color-picker-white.svg" : "" color: "transparent" } - onClicked:{ + onClicked: { SkrTheme.currentLightThemeName = model.text - } } - SkrRoundButton{ + SkrRoundButton { id: darkButton display: AbstractButton.IconOnly - text: SkrTheme.currentDarkThemeName === model.text ? qsTr("Dark") : qsTr("Set as dark theme") + text: SkrTheme.currentDarkThemeName === model.text ? qsTr("Dark") : qsTr( + "Set as dark theme") icon { - source: SkrTheme.currentDarkThemeName === model.text ? "qrc:///icons/backup/color-picker-black.svg" : "" + source: SkrTheme.currentDarkThemeName + === model.text ? "qrc:///icons/backup/color-picker-black.svg" : "" color: "transparent" } - - onClicked:{ + onClicked: { SkrTheme.currentDarkThemeName = model.text } } - SkrRoundButton{ + SkrRoundButton { id: distractionFreeButton display: AbstractButton.IconOnly - text: SkrTheme.currentDistractionFreeThemeName === model.text ? qsTr("Distraction free") : qsTr("Set as distraction free theme") - icon.source: SkrTheme.currentDistractionFreeThemeName === model.text ? "qrc:///icons/backup/view-fullscreen.svg" : "" + text: SkrTheme.currentDistractionFreeThemeName + === model.text ? qsTr("Distraction free") : qsTr( + "Set as distraction free theme") + icon.source: SkrTheme.currentDistractionFreeThemeName + === model.text ? "qrc:///icons/backup/view-fullscreen.svg" : "" - onClicked:{ + onClicked: { SkrTheme.currentDistractionFreeThemeName = model.text - } - } - } } //------------------------------------------------------------- //----- rename theme -------------------------------------------- //------------------------------------------------------------- - - SimpleDialog { id: renameDialog property string name: "" @@ -237,21 +222,17 @@ ThemePageForm { onAccepted: { renameDialog.accept() } - } - standardButtons: Dialog.Ok | Dialog.Cancel + standardButtons: Dialog.Ok | Dialog.Cancel onRejected: { renameDialog.name = "" - } onDiscarded: { - renameDialog.name = "" - } onAccepted: { @@ -262,26 +243,22 @@ ThemePageForm { } onActiveFocusChanged: { - if(activeFocus){ + if (activeFocus) { contentItem.forceActiveFocus() } - } onOpened: { contentItem.forceActiveFocus() renameTextField.selectAll() } - } //------------------------------------------------------------- //----- remove theme -------------------------------------------- //------------------------------------------------------------- - //-------------------------------------------------------- - removeThemeButton.icon.source: "qrc:///icons/backup/edit-delete.svg" removeThemeButton.onClicked: { removeDialog.name = selectedTheme @@ -289,26 +266,22 @@ ThemePageForm { populateThemeListModel() } - SimpleDialog { id: removeDialog property string name: "" title: qsTr("Remove a theme") - text: qsTr("Do you really want to remove the theme \"%1\"?").arg(removeDialog.name) + text: qsTr("Do you really want to remove the theme \"%1\"?").arg( + removeDialog.name) - - standardButtons: Dialog.Ok | Dialog.Cancel + standardButtons: Dialog.Ok | Dialog.Cancel onRejected: { removeDialog.name = "" - } onDiscarded: { - removeDialog.name = "" - } onAccepted: { @@ -318,24 +291,20 @@ ThemePageForm { } onActiveFocusChanged: { - if(activeFocus){ + if (activeFocus) { contentItem.forceActiveFocus() } - } onOpened: { contentItem.forceActiveFocus() removeDialog.selectAll() } - } - //------------------------------------------------------------- //------color properties-------------------------------------------- //------------------------------------------------------------- - onSelectedThemeChanged: { SkrTheme.selectedThemeName = selectedTheme populateColorPropertiesListModel() @@ -347,68 +316,62 @@ ThemePageForm { } propertiesListView.model: colorPropertiesModel - function populateColorPropertiesListModel(){ + function populateColorPropertiesListModel() { colorPropertiesModel.clear() var propertyHumanNamesMap = SkrTheme.getPropertyHumanNames() var propertyValuesMap = SkrTheme.selectedColorsMap var list = [] - for(var name in propertyValuesMap) { + for (var name in propertyValuesMap) { list.push(name) } list.sort() - - //is editable ? var isEditable = SkrTheme.isThemeEditable(selectedTheme) - - for(var i in list) { + for (var i in list) { var exactName = list[i] - if(SkrTheme.changedColorsMap[exactName]){ - colorPropertiesModel.append({"text": propertyHumanNamesMap[exactName], "propertyExactName": exactName, "color": SkrTheme.changedColorsMap[exactName], "isEditable": isEditable}) - } - else{ - colorPropertiesModel.append({"text": propertyHumanNamesMap[exactName], "propertyExactName": exactName, "color": propertyValuesMap[exactName], "isEditable": isEditable}) - + if (SkrTheme.changedColorsMap[exactName]) { + colorPropertiesModel.append({ + "text": propertyHumanNamesMap[exactName], + "propertyExactName": exactName, + "color": SkrTheme.changedColorsMap[exactName], + "isEditable": isEditable + }) + } else { + colorPropertiesModel.append({ + "text": propertyHumanNamesMap[exactName], + "propertyExactName": exactName, + "color": propertyValuesMap[exactName], + "isEditable": isEditable + }) } - - } - - - - - - } - property string currentProperty: "" - propertiesListView.delegate: SkrPane { id: delegateRoot height: 60 - anchors{ + anchors { left: Qt.isQtObject(parent) ? parent.left : undefined right: Qt.isQtObject(parent) ? parent.right : undefined } - TapHandler { id: tapHandler - onSingleTapped: function(eventPoint) { + onSingleTapped: function (eventPoint) { propertiesListView.currentIndex = model.index delegateRoot.forceActiveFocus() eventPoint.accepted = true } - onDoubleTapped: function(eventPoint) { + onDoubleTapped: function (eventPoint) { //console.log("double tapped") propertiesListView.currentIndex = model.index currentProperty = model.propertyExactName @@ -416,7 +379,7 @@ ThemePageForm { colorCodeTextField.enabled = model.isEditable - if(model.isEditable){ + if (model.isEditable) { colorDialog.currentColor = model.color colorDialog.open() @@ -426,12 +389,9 @@ ThemePageForm { } } - - RowLayout { anchors.fill: parent - Rectangle { id: currentItemIndicator color: "lightsteelblue" @@ -447,7 +407,6 @@ ThemePageForm { visible: model.propertyExactName === currentProperty } - SkrLabel { id: colorPropertyLabel text: model.text @@ -467,12 +426,10 @@ ThemePageForm { color: model.color border.color: "black" border.width: 1 - } SkrToolButton { - Layout.preferredHeight: 40 Layout.preferredWidth: 40 @@ -493,39 +450,29 @@ ThemePageForm { colorDialog.open() } } - - } } - - - //------------------------------------------------------------------------- //-------Examples ---------------------------------------------------------- //------------------------------------------------------------------------- - - forceLightButton.onClicked:{ + forceLightButton.onClicked: { SkrTheme.forceCurrentColorMode(SKRThemes.Light) } - forceDarkButton.onClicked:{ + forceDarkButton.onClicked: { SkrTheme.forceCurrentColorMode(SKRThemes.Dark) } - forceDistractionFreeButton.onClicked:{ + forceDistractionFreeButton.onClicked: { SkrTheme.forceCurrentColorMode(SKRThemes.DistractionFree) } - primaryTextAreaSample.textArea.text: qsTr("Primary text %1").arg("erroor") - - - + primaryTextAreaSample.textArea.text: qsTr("Primary text") //------------------------------------------------------------------------- //------------------------------------------------------------------------- //------------------------------------------------------------------------- - resetThemeButton.onClicked: { SkrTheme.resetColorProperties() populateColorPropertiesListModel() @@ -539,26 +486,21 @@ ThemePageForm { primaryTextAreaSample.textArea.width -= 1 } - //------------------------------------------------------------------------- //-------color picker---------------------------------------------------- //------------------------------------------------------------------------- - colorCodeTextField.onEditingFinished: { SkrTheme.setColorProperty(currentProperty, colorCodeTextField.text) populateColorPropertiesListModel() } - LabPlatform.ColorDialog { id: colorDialog - onAccepted: { var colorString = skrQMLTools.colorString(colorDialog.color) SkrTheme.setColorProperty(currentProperty, colorString) populateColorPropertiesListModel() } } - } diff --git a/src/translations/skribisto_en_US.ts b/src/translations/skribisto_en_US.ts index d89098e28..0221422e0 100644 --- a/src/translations/skribisto_en_US.ts +++ b/src/translations/skribisto_en_US.ts @@ -3442,13 +3442,13 @@ ThemePage - + Themes - + Edit color @@ -3458,57 +3458,57 @@ - + Light - + Dark - + Set as light theme - + Set as dark theme - + Set as distraction free theme - + Rename - + Rename a theme - + Remove a theme - + Do you really want to remove the theme "%1"? - - Primary text %1 + + Primary text - + Distraction free