From c4a5d406c7b338c71de042313c1f7e08bae73b09 Mon Sep 17 00:00:00 2001 From: cutls Date: Wed, 9 Oct 2019 01:14:27 +0900 Subject: [PATCH] Add Custom Themes scheme --- app/css/master.css | 2 +- app/js/ui/settings.js | 119 +++++++++++++++---------- app/main/css.js | 45 ++++++++-- app/view/make/language/en/setting.json | 7 ++ app/view/make/language/ja/setting.json | 7 ++ app/view/make/setting.sample.html | 41 ++++++++- 6 files changed, 162 insertions(+), 59 deletions(-) diff --git a/app/css/master.css b/app/css/master.css index a9d27e49..c39be0ce 100644 --- a/app/css/master.css +++ b/app/css/master.css @@ -336,7 +336,7 @@ blockquote:before, #menu { position: fixed; z-index: 9999; - background-color: var(--box); + background-color: var(--postbox); width: 540px; top: calc(50% - 150px); left: calc(50% - 250px); diff --git a/app/js/ui/settings.js b/app/js/ui/settings.js index 7beb8bd1..6d6a711b 100644 --- a/app/js/ui/settings.js +++ b/app/js/ui/settings.js @@ -518,14 +518,38 @@ function customComp() { if (!secondaryC) { secondaryC = "rgb(255,255,255)" } var textC = $("#color-picker2_value").val(); if (!textC) { textC = "rgb(255,255,255)" } - var accentC = $("#color-picker3_value").val(); - if (!accentC) { accentC = "rgb(255,255,255)" } var multi = localStorage.getItem("multi"); + if($("#pickers").hasClass("advanceTheme")){ + var accentC = $("#color-picker3_value").val(); + if (!accentC) { accentC = null } + var activeC = $("#color-picker4_value").val(); + if (!activeC) { activeC = null } + var modalC = $("#color-picker5_value").val(); + if (!modalC) { modalC = null } + var bottomC = $("#color-picker6_value").val(); + if (!bottomC) { bottomC = null } + var postboxC = $("#color-picker7_value").val(); + if (!postboxC) { postboxC = null } + var subcolorC = $("#color-picker8_value").val(); + if (!subcolorC) { subcolorC = null } + var advanceTheme = { + "TheDeskAccent": accentC, + "TheDeskActive": activeC, + "TheDeskModal": modalC, + "TheDeskBottom": bottomC, + "TheDeskPostbox": postboxC, + "TheDeskSubcolor": subcolorC + } + }else{ + var advanceTheme = {} + } + var my = JSON.parse(multi)[0].name; var id = $("#custom-edit-sel").val(); if (id == "add_new") { id = makeCID(); } + localStorage.setItem("customtheme-id", id) var json = { "name": nameC, "author": my, @@ -536,29 +560,21 @@ function customComp() { "secondary": secondaryC, "text": textC }, - "props": { - "TheDeskAccent": accentC - }, + "props": advanceTheme, "id": id } $("#custom_json").val(JSON.stringify(json)); - themes(); + themes("custom"); + $("#custom").prop("checked", true); $("#custom_name").val(""); $("#custom_desc").val(""); $("#dark").prop("checked", true); $("#custom_json").val(""); - $("#color-picker0-wrap").html('
') - $("#color-picker1-wrap").html('
') - $("#color-picker2-wrap").html('
') - $("#color-picker3-wrap").html('
') - $("#color-picker0_value").val(""); - $("#color-picker1_value").val(""); - $("#color-picker2_value").val(""); - $("#color-picker3_value").val(""); - pickerDefine(0, "fff"); - pickerDefine(1, "fff"); - pickerDefine(2, "fff"); - pickerDefine(3, "fff"); + for(var i =0;i <= 8; i++){ + $("#color-picker" + i + "-wrap").html('
') + $("#color-picker" + i + "_value").val(""); + pickerDefine(i, "fff"); + } postMessage(["themeJsonCreate", JSON.stringify(json)], "*") } function deleteIt() { @@ -567,18 +583,11 @@ function deleteIt() { $("#custom_desc").val(""); $("#dark").prop("checked", true); $("#custom_json").val(""); - $("#color-picker0-wrap").html('
') - $("#color-picker1-wrap").html('
') - $("#color-picker2-wrap").html('
') - $("#color-picker3-wrap").html('
') - $("#color-picker0_value").val(""); - $("#color-picker1_value").val(""); - $("#color-picker2_value").val(""); - $("#color-picker3_value").val(""); - pickerDefine(0, "fff"); - pickerDefine(1, "fff"); - pickerDefine(2, "fff"); - pickerDefine(3, "fff"); + for(var i =0;i <= 8; i++){ + $("#color-picker" + i + "-wrap").html('
') + $("#color-picker" + i + "_value").val(""); + pickerDefine(i, "fff"); + } postMessage(["themeJsonDelete", id], "*") } function ctLoad() { @@ -610,18 +619,11 @@ function custom() { $("#custom_desc").val(""); $("#dark").prop("checked", true); $("#custom_json").val(""); - $("#color-picker0-wrap").html('
') - $("#color-picker1-wrap").html('
') - $("#color-picker2-wrap").html('
') - $("#color-picker3-wrap").html('
') - $("#color-picker0_value").val(""); - $("#color-picker1_value").val(""); - $("#color-picker2_value").val(""); - $("#color-picker3_value").val(""); - pickerDefine(0, "fff"); - pickerDefine(1, "fff"); - pickerDefine(2, "fff"); - pickerDefine(3, "fff"); + for(var i =0;i <= 8; i++){ + $("#color-picker" + i + "-wrap").html('
') + $("#color-picker" + i + "_value").val(""); + pickerDefine(i, "fff"); + } $("#delTheme").addClass("disabled") } else { $("#delTheme").removeClass("disabled") @@ -632,27 +634,42 @@ function customConnect(args) { $("#custom_name").val(args.name); $("#custom_desc").val(args.desc); $("#" + args.base).prop("checked", true); + //Primary $("#color-picker0-wrap").html('
') pickerDefine(0, rgbToHex(args.vars.primary)) $("#color-picker0_value").val(args.vars.primary); + //Secondary $("#color-picker1-wrap").html('
') pickerDefine(1, rgbToHex(args.vars.secondary)) $("#color-picker1_value").val(args.vars.secondary); + //Text $("#color-picker2-wrap").html('
') $("#color-picker2_value").val(args.vars.text); pickerDefine(2, rgbToHex(args.vars.text)) + //TheDesk Only + advancedConncet(args, "TheDeskAccent", "secondary", 3) + advancedConncet(args, "TheDeskActive", "primary", 4) + advancedConncet(args, "TheDeskModal", "secondary", 5) + advancedConncet(args, "TheDeskBottom", "primary", 6) + advancedConncet(args, "TheDeskPostbox", "primary", 7) + advancedConncet(args, "TheDeskSubcolor", "primary", 8) + $("#custom_json").val(JSON.stringify(args)); +} +function advancedConncet(args, tar, sub, i){ if (args.props) { - if (args.props.TheDeskAccent) { - var accent = args.props.TheDeskAccent; + if (args.props[tar]) { + var color = args.props[tar]; + $("#pickers").addClass("advanceTheme") + $(".advanced").removeClass("hide") } else { - var accent = args.vars.secondary; + var color = args.vars[sub]; } } else { - var accent = args.vars.secondary; + var color = args.vars[sub]; } - $("#color-picker3-wrap").html('
') - pickerDefine(3, rgbToHex(accent)) - $("#custom_json").val(JSON.stringify(args)); + $("#color-picker"+i+"-wrap").html('
') + $("#color-picker"+i+"_value").val(color); + pickerDefine(i, rgbToHex(color)) } function customImp() { var json = $("#custom_import").val(); @@ -665,6 +682,10 @@ function customImp() { }) } } +function advanced(){ + $(".advanced").toggleClass("hide") + $("#pickers").toggleClass("advanceTheme") +} function clearCustomImport() { $("#custom_import").val(""); } diff --git a/app/main/css.js b/app/main/css.js index 4cef7045..bd429d75 100644 --- a/app/main/css.js +++ b/app/main/css.js @@ -67,21 +67,52 @@ function css(mainWindow) { if (json.props.TheDeskAccent) { var emphasized = json.props.TheDeskAccent } else { - var emphasized = secondary; + var emphasized = secondary + } + if (json.props.TheDeskActive) { + var active = json.props.TheDeskActive + } else { + var active = primary + } + if (json.props.TheDeskModal) { + var modal = json.props.TheDeskModal + } else { + var modal = secondary + } + if (json.props.TheDeskBottom) { + var bottom = json.props.TheDeskBottom + } else { + var bottom = primary + } + if (json.props.TheDeskPostbox) { + var postbox = json.props.TheDeskPostbox + } else { + var postbox = primary + } + if (json.props.TheDeskSubcolor) { + var subcolor = json.props.TheDeskSubcolor + } else { + var subcolor = primary } } else { - var emphasized = primary; + var emphasized = primary + var acs = secondary + var active = primary + var modal = secondary + var bottom = primary + var postbox = primary + var subcolor = primary } var css = ".customtheme {--bg:" + secondary + ";--drag:" + drag + ";" + "--color:" + text + ";--beforehover:" + beforehover + ";--modal:" + - secondary + ";--subcolor:" + primary + ";--box:" + primary + - ";--sidebar:" + primary + ";--shared:" + emphasized + ";" + - "--notfbox:" + secondary + ";--emphasized:" + primary + ";--his-data:" + + modal + ";--subcolor:" + subcolor + ";--box:" + subcolor + + ";--sidebar:" + bottom + ";--shared:" + emphasized + ";" + + "--notfbox:" + secondary + ";--emphasized:" + active + ";--his-data:" + secondary + - ";--active:" + primary + ";--postbox:" + primary + ";--modalfooter:" + + ";--active:" + active + ";--postbox:" + postbox + ";--modalfooter:" + primary + - ";--accentbtn:" + primary + ";--selected:" + selected + ";--selectedWithShare:" + selectedWithShare + "}"+ + ";--accentbtn:" + subcolor + ";--selected:" + selected + ";--selectedWithShare:" + selectedWithShare + "}"+ "--gray:" + gray + ";"+ ".customtheme #imagemodal{background: url(\"../img/pixel.svg\");}"; e.sender.webContents.send('theme-css-response', css); diff --git a/app/view/make/language/en/setting.json b/app/view/make/language/en/setting.json index 07ce404e..9f33f3c6 100644 --- a/app/view/make/language/en/setting.json +++ b/app/view/make/language/en/setting.json @@ -35,6 +35,13 @@ "themeSel": "Select theme", "customtheme": "Edit and add custom themes", "customthemeDirection": "Color scheme", + "advanced":"Advanced options(6 additional colors)", + "advancedWarn":"Advanced options will be null if you set nothing, while basic 3 options will be white(fff). They(adv. options) will be reset if you saved with advanced panel closed.", + "active": "Background of Show or CW buttons, selected options...", + "modal": "Background of modals", + "bottom":"Background of bottom bar", + "postbox":"Background of post box and menu", + "subcolor":"Subcolor, has harmony with secondary color", "primary": "Background color", "secondarycolor": "Background of components", "text": "Text color", diff --git a/app/view/make/language/ja/setting.json b/app/view/make/language/ja/setting.json index fb08d7a3..a66f86cb 100644 --- a/app/view/make/language/ja/setting.json +++ b/app/view/make/language/ja/setting.json @@ -35,10 +35,17 @@ "themeSel": "テーマの選択", "customtheme": "カスタムテーマの作成・編集", "customthemeDirection": "色の系統", + "advanced":"拡張項目(6つ)を開く", + "advancedWarn":"拡張項目は設定しないと「指定なし」に、基本3項目は白(fff)になります。拡張項目を閉じた状態で「変更」すると拡張項目はすべてリセットされます。", "primary": "全体の背景色など", "secondarycolor": "補助要素に使われる背景色", "text": "テキストの色", "accent": "ブーストの背景色など", + "active": "CWボタンやメニュー選択時の背景色", + "modal": "モーダルウィンドウの背景色", + "bottom":"下のメニューバーの背景色", + "postbox":"投稿ボックスやメニューの色", + "subcolor":"背景に準ずる色", "add_new": "新規作成", "name": "名前", "desc": "説明", diff --git a/app/view/make/setting.sample.html b/app/view/make/setting.sample.html index 27fd94d4..7409f086 100644 --- a/app/view/make/setting.sample.html +++ b/app/view/make/setting.sample.html @@ -160,7 +160,9 @@ Light - +
+ + @@advancedWarn@@
Primary
@@secondarycolor@@ @@ -183,13 +185,48 @@
-
+
Accent
@@accent@@
+
+
Active
@@active@@ +
+
+
+ +
+
+
Modal
@@modal@@ +
+
+
+ +
+
+
Bottom
@@bottom@@ +
+
+
+ +
+
+
Postbox
@@postbox@@ +
+
+
+ +
+
+
Subcolor
@@subcolor@@ +
+
+
+ +