diff --git a/app/css/master.css b/app/css/master.css index 8dc4e1f4..f2704c4d 100644 --- a/app/css/master.css +++ b/app/css/master.css @@ -6,7 +6,7 @@ body { user-select: none; cursor: default; height: 100vh; - color: var(--color); + color: var(--text); } html { font-size: 13px; @@ -14,9 +14,9 @@ html { .titlebar, .menubar-menu-container, .action-menu-item { - background-color: var(--notfbox) !important; + background-color: var(--subcolor) !important; filter: brightness(110%) !important; - color: var(--color) !important; + color: var(--text) !important; } .action-menu-item:hover { filter: brightness(80%) !important; @@ -232,7 +232,7 @@ blockquote:before, height: calc(100vh - 3rem); background-color: var(--bg); filter: brightness(50%); - color: var(--color); + color: var(--text); z-index: 99999; justify-content: center; align-items: center; @@ -243,7 +243,7 @@ blockquote:before, width: 100vw; height: 100vh; background-color: var(--bg); - color: var(--color); + color: var(--text); z-index: 99999; justify-content: center; align-items: center; @@ -254,7 +254,7 @@ blockquote:before, #pip { z-index: 504; width: 418px; - background-color: var(--subcolor); + background-color: var(--thirdColor); position: absolute; } .pip-bottom { @@ -315,10 +315,10 @@ blockquote:before, } .collapsible-header, .tabs { - background-color: var(--subcolor); + background-color: var(--thirdColor); } .collapsible-header:focus { - background-color: var(--subcolor) !important; + background-color: var(--thirdColor) !important; } .modal-footer { background-color: var(--modalfooter) !important; @@ -332,12 +332,13 @@ blockquote:before, } .release-do { border: solid 2px; - border-color: var(--color); + border-color: var(--text); padding: 5px; } #pickers { display: flex; flex-wrap: wrap; + flex-direction: column; } #menu { position: fixed; @@ -367,7 +368,7 @@ blockquote:before, display: flex; align-items: center; cursor: pointer; - color: var(--color); + color: var(--text); } #left-menu a:hover { background-color: var(--beforehover); @@ -398,7 +399,7 @@ blockquote:before, width: 13rem; height: 3.1rem; cursor: pointer; - color: var(--color); + color: var(--text); } #tltype .type span { width: calc(100% - 2.3rem); @@ -425,7 +426,7 @@ blockquote:before, text-align: center; width: calc(100% + 0.8rem); border-radius: 5px; - background-color: var(--box); + background-color: var(--subcolor); filter: brightness(80%); margin-left: -0.4rem; margin-right: -0.4rem; @@ -446,7 +447,7 @@ blockquote:before, position: fixed; bottom: -300px; width: 100vw; - background-color: var(--box); + background-color: var(--subcolor); z-index: 9999; padding: 0.8rem; display: grid; @@ -472,16 +473,16 @@ blockquote:before, } input, textarea { - color: var(--color); + color: var(--text); font-size: 1rem !important; font-family: inherit; } .swal2-popup { - background-color: var(--notfbox) !important; + background-color: var(--subcolor) !important; } .swal2-title, .swal2-content { - color: var(--color) !important; + color: var(--text) !important; } #src-contents svg { margin-right: 0.4rem; @@ -530,7 +531,7 @@ textarea { left: calc(50vw - 11.53rem); width: 23rem; max-width: 100%; - background-color: var(--box); + background-color: var(--subcolor); z-index: 501; padding: 0.4rem; } diff --git a/app/css/post.css b/app/css/post.css index 0d1132d6..9d46498d 100644 --- a/app/css/post.css +++ b/app/css/post.css @@ -86,7 +86,7 @@ textarea { max-height: 7.7rem; } #default-emoji a { - color: var(--color); + color: var(--text); margin-right: 0.15rem; } .character-counter { @@ -126,8 +126,8 @@ textarea { } #posttgl, #toot-post-btn { - background-color: var(--accentbtn); - color: var(--color); + background-color: var(--active); + color: var(--text); } /*mini*/ .mini-post .mize { diff --git a/app/css/sort.css b/app/css/sort.css index 1710a976..af833ae3 100644 --- a/app/css/sort.css +++ b/app/css/sort.css @@ -5,7 +5,7 @@ background-color: var(--modalfooter); margin: 0.4rem; border-radius: 0.4rem; - color: var(--color); + color: var(--text); padding: 3px; display: grid; grid-template-columns: 3.3rem 1fr 4.6rem; diff --git a/app/css/themes.css b/app/css/themes.css deleted file mode 100644 index 99ac7db5..00000000 --- a/app/css/themes.css +++ /dev/null @@ -1,192 +0,0 @@ -:root { - --bg: white; - --drag: rgba(255, 255, 255, 0.8); - --color: black; - --beforehover: #757575; - --modal: white; - --subcolor: #e0e0e0; - --box: white; - --sidebar: #eeeeee; - --shared: #cfd8dc; - --notfbox: white; - --emphasized: #81c784; - --his-data: rgba(255, 255, 255, 0.9); - --active: #e6ee9c; - --postbox: white; - --modalfooter: #fafafa; - --accentbtn: #009688; - --selected: #c0c0c0; - --selectedWithShare: #b2babd; - --gray: #757575; -} -#imagemodal { - background: url("../img/pixel.white.svg"); -} -.blacktheme { - --bg: #212121; - --drag: rgba(0, 0, 0, 0.8); - --color: white; - --beforehover: #9e9e9e; - --modal: black; - --subcolor: #212121; - --box: #424242; - --sidebar: #424242; - --shared: #004d40; - --notfbox: #333333; - --emphasized: #4e342e; - --his-data: rgba(0, 0, 0, 0.8); - --active: #757575; - --postbox: #424242; - --modalfooter: #212121; - --accentbtn: #3f51b5; - --selected: #3f3f3f; - --selectedWithShare: #003a30; - --gray: #cccccc; -} -.blacktheme #imagemodal { - background: url("../img/pixel.svg"); -} -.indigotheme { - --bg: #031833; - --drag: rgba(0, 0, 0, 0.8); - --color: white; - --beforehover: #9e9e9e; - --modal: #0d1351; - --subcolor: #0d1351; - --shared: #004d40; - --box: #0d1351; - --sidebar: #0d1351; - --notfbox: #0d47a1; - --emphasized: #4e342e; - --his-data: rgba(13, 19, 81, 0.8); - --active: #757575; - --postbox: #1a237e; - --modalfooter: #031833; - --accentbtn: #00acc1; - --selected: #214f8a; - --selectedWithShare: #003a30; - --gray: #cccccc ; -} -.indigotheme #imagemodal { - background: url("../img/pixel.svg"); -} -.browntheme { - --bg: #261411; - --drag: rgba(0, 0, 0, 0.8); - --color: white; - --beforehover: #9e9e9e; - --modal: #261411; - --subcolor: #4e342e; - --shared: #004d40; - --box: #4e342e; - --sidebar: #4e342e; - --notfbox: #4e342e; - --emphasized: #0d47a1; - --his-data: rgba(62, 39, 35, 0.8); - --active: #757575; - --postbox: #4e342e; - --modalfooter: #261411; - --accentbtn: #827717; - --selected: #6d352b; - --selectedWithShare: #003a30; - --gray: #cccccc; -} -.browntheme #imagemodal { - background: url("../img/pixel.svg"); -} -.greentheme { - --bg: #c8e6c9; - --drag: rgba(255, 255, 255, 0.8); - --color: black; - --beforehover: #757575; - --modal: #81c784; - --subcolor: #a5d6a7; - --box: #81c784; - --sidebar: #c5e1a5; - --shared: #ffcc80; - --notfbox: #a5d6a7; - --emphasized: #9e9d24; - --his-data: rgba(255, 255, 255, 0.9); - --active: #e6ee9c; - --postbox: #a5d6a7; - --modalfooter: #81c784; - --accentbtn: #33691e; - --selected: #78c17a; - --selectedWithShare: #caa266; - --gray: #757575; -} -.greentheme #imagemodal { - background: url("../img/pixel.white.svg"); -} -.bluetheme { - --bg: #c9e1ec; - --drag: rgba(255, 255, 255, 0.8); - --color: black; - --beforehover: #757575; - --modal: #b2ebf2; - --subcolor: #90caf9; - --box: #90caf9; - --sidebar: #b6e6f5; - --shared: #e0ffe4; - --notfbox: #90caf9; - --emphasized: #c5e1a5; - --his-data: rgba(255, 255, 255, 0.9); - --active: #b39ddb; - --postbox: #dff1ff; - --modalfooter: #2196f3; - --accentbtn: #2f7bb7; - --selected: #9dcade; - --selectedWithShare: #c1dac4; - --gray: #757575; -} -.bluetheme #imagemodal { - background: url("../img/pixel.white.svg"); -} -.polartheme { - --bg: #2e3440; - --drag: rgba(0, 0, 0, 0.8); - --color: white; - --beforehover: #8d94a0; - --modal: #3b4252; - --subcolor: #434c5e; - --box: #4c566a; - --sidebar: #3b4252; - --shared: #2d3b58; - --notfbox: #2a3857; - --emphasized: #2f4b86; - --his-data: rgba(0, 0, 0, 0.8); - --active: #2a3857; - --postbox: #434c5e; - --modalfooter: #485166; - --accentbtn: #2f4b86; - --selected: #464f61; - --selectedWithShare: #3e527e; - --gray: #cccccc; -} -.polartheme #imagemodal { - background: url("../img/pixel.svg"); -} -.snowtheme { - --bg: #eceff4; - --drag: rgba(255, 255, 255, 0.8); - --color: #36425a; - --beforehover: #344058; - --modal: #e5e9f0; - --subcolor: #d8dee9; - --box: #c0c8d6; - --sidebar: #eeeeee; - --shared: #c3d4e6; - --notfbox: #d8dee9; - --emphasized: #88c0d0; - --his-data: rgba(255, 255, 255, 0.9); - --active: #8fbcbb; - --postbox: #d8dee9; - --modalfooter: #b2bed4; - --accentbtn: #81a1c1; - --selected: #b4bdd0; - --selectedWithShare: #a3afbb; - --gray: #5c6c8c; -} -.snowtheme #imagemodal { - background: url("../img/pixel.white.svg"); -} \ No newline at end of file diff --git a/app/css/tl.css b/app/css/tl.css index d3a68897..8223fddd 100644 --- a/app/css/tl.css +++ b/app/css/tl.css @@ -18,7 +18,7 @@ padding: 0.23rem; padding-right: 0; padding-left: 3rem; - background-color: var(--sidebar); + background-color: var(--bottom); display: flex; justify-content: space-between; flex-wrap: wrap; @@ -62,7 +62,7 @@ } #bottom a, #demogroup a { - color: var(--color); + color: var(--text); } #bottom i { font-size: 2.3rem; @@ -436,7 +436,7 @@ iframe, } .btn-flat { - color: var(--color); + color: var(--text); } .area-side i { margin-left: 0.75rem; @@ -455,7 +455,7 @@ iframe, color: var(--beforehover); } .actct:hover { - color: var(--color); + color: var(--text); transition: 0.5s; } .contextMenu.dropdown-content { @@ -502,7 +502,7 @@ iframe, user-select: none; } .cbadge-hover { - color: var(--color); + color: var(--text); background-color: transparent; } .cbadge-hover:hover { @@ -518,7 +518,7 @@ p:not(:last-child) { margin-bottom: 0.76rem; } .shared { - background-color: var(--shared); + background-color: var(--accent); } .emphasized { background-color: var(--emphasized); @@ -528,7 +528,7 @@ p:not(:last-child) { } .notice-box { top: 0; - background-color: var(--notfbox); + background-color: var(--subcolor); filter: brightness(110%); position: relative; margin-right: 0.7rem; @@ -597,7 +597,7 @@ p:not(:last-child) { .notf-box { position: fixed; right: 5.4rem; - background-color: var(--box); + background-color: var(--subcolor); border: thin solid gray; z-index: 501; width: 30rem; @@ -653,10 +653,10 @@ p:not(:last-child) { display: none; } .modal-footer { - background-color: var(--box); + background-color: var(--subcolor); } .ballons { - background-color: var(--box); + background-color: var(--subcolor); position: absolute; bottom: 0px; right: 0px; @@ -714,11 +714,11 @@ p:not(:last-child) { transition-duration: 0.5s; } .votebtn:hover { - background-color: var(--color); + background-color: var(--text); } .leadPoll { position: absolute; - background-color: var(--box); + background-color: var(--subcolor); height: 1.5rem; border-radius: 0.23rem; } @@ -780,11 +780,11 @@ audio { .cw_btn { margin: 0.23rem; background-color: var(--emphasized); - color: var(--color); + color: var(--text); padding-left: 0.23rem; padding-right: 0.23rem; border-radius: 0.23rem; - border: 1px solid var(--color); + border: 1px solid var(--text); user-select: none; } .vis-data { @@ -874,7 +874,7 @@ audio { cursor: pointer; border: solid 1px; padding-left: 0.15rem; - background-color: var(--notfbox); + background-color: var(--subcolor); border-radius: 0.15rem; } .announReaction img { diff --git a/app/js/platform/first.js b/app/js/platform/first.js index d8b892b5..08c3446b 100644 --- a/app/js/platform/first.js +++ b/app/js/platform/first.js @@ -1,11 +1,11 @@ -$.strip_tags = function(str, allowed) { +$.strip_tags = function (str, allowed) { if (!str) { return '' } allowed = (((allowed || '') + '').toLowerCase().match(/<[a-z][a-z0-9]*>/g) || []).join('') var tags = /<\/?([a-z][a-z0-9]*)\b[^>]*>?/gi, commentsAndPhpTags = /|<\?(?:php)?[\s\S]*?\?>/gi - return str.replace(commentsAndPhpTags, '').replace(tags, function($0, $1) { + return str.replace(commentsAndPhpTags, '').replace(tags, function ($0, $1) { return allowed.indexOf('<' + $1.toLowerCase() + '>') > -1 ? $0 : '' }) } @@ -88,17 +88,18 @@ function formattimeutc(date) { } postMessage(['sendSinmpleIpc', 'custom-css-request'], '*') function makeCID() { - return ( - randomStr(8) + - '-' + - randomStr(4) + - '-' + - randomStr(4) + - '-' + - randomStr(4) + - '-' + - randomStr(12) - ) + let chars = "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".split("") + for (let i = 0, len = chars.length; i < len; i++) { + switch (chars[i]) { + case "x": + chars[i] = Math.floor(Math.random() * 16).toString(16) + break + case "y": + chars[i] = (Math.floor(Math.random() * 4) + 8).toString(16) + break + } + } + return chars.join("") } function randomStr(l) { // 生成する文字列に含める文字セット @@ -147,15 +148,15 @@ function rgbToHex(color) { console.error(color + ':第1引数はRGB形式で入力') } /*マルチバイト用切り出し*/ -$.isSurrogatePear = function(upper, lower) { +$.isSurrogatePear = function (upper, lower) { return 0xd800 <= upper && upper <= 0xdbff && 0xdc00 <= lower && lower <= 0xdfff } -$.mb_strlen = function(str) { +$.mb_strlen = function (str) { var splitter = new GraphemeSplitter() var arr = splitter.splitGraphemes(str) return arr.length } -$.mb_substr = function(str, begin, end) { +$.mb_substr = function (str, begin, end) { //配列にする var splitter = new GraphemeSplitter() var arr = splitter.splitGraphemes(str) @@ -175,7 +176,7 @@ function object_array_sort(data, key, order, fn) { num_a = 1 num_b = -1 } - data = data.sort(function(a, b) { + data = data.sort(function (a, b) { var x = a[key] var y = b[key] if (x > y) return num_a diff --git a/app/js/platform/preload.js b/app/js/platform/preload.js index 3f48e380..8a999ed3 100644 --- a/app/js/platform/preload.js +++ b/app/js/platform/preload.js @@ -207,6 +207,7 @@ ipc.on('theme-json-response', function(event, args) { postMessage(['customConnect', args], '*') }) ipc.on('theme-json-create-complete', function(event, args) { + if(args != '') alert(args) postMessage(['clearCustomImport', ''], '*') postMessage(['ctLoad', ''], '*') }) diff --git a/app/js/ui/settings.js b/app/js/ui/settings.js index 1c10955f..655ac9fc 100644 --- a/app/js/ui/settings.js +++ b/app/js/ui/settings.js @@ -167,10 +167,10 @@ function load() { var font = '' } $('#font').val(font) - $('#c1-file').text(localStorage.getItem('custom1')!= 'null' ? localStorage.getItem('custom1') : '') - $('#c2-file').text(localStorage.getItem('custom2')!= 'null' ? localStorage.getItem('custom2') : '') - $('#c3-file').text(localStorage.getItem('custom3')!= 'null' ? localStorage.getItem('custom3') : '') - $('#c4-file').text(localStorage.getItem('custom4')!= 'null' ? localStorage.getItem('custom4') : '') + $('#c1-file').text(localStorage.getItem('custom1') != 'null' ? localStorage.getItem('custom1') : '') + $('#c2-file').text(localStorage.getItem('custom2') != 'null' ? localStorage.getItem('custom2') : '') + $('#c3-file').text(localStorage.getItem('custom3') != 'null' ? localStorage.getItem('custom3') : '') + $('#c4-file').text(localStorage.getItem('custom4') != 'null' ? localStorage.getItem('custom4') : '') var cvol = localStorage.getItem('customVol') if (cvol) { $('#soundvol').val(cvol * 100) @@ -508,35 +508,39 @@ function fontList(arg) { function insertFont(name) { $('#font').val(name) } -$('.color-picker').each(function (i, elem) { - pickerDefine(i, 'fff') -}) -function pickerDefine(i, color) { - var pickr = new Pickr({ - el: '#color-picker' + i, - default: color, - showAlways: true, - appendToBody: true, - closeWithKey: 'Escape', - comparison: false, - components: { - preview: true, // Left side color comparison - opacity: false, // Opacity slider - hue: true, // Hue slider - interaction: { - rgba: false, // rgba option (red green blue and alpha) - input: true, // input / output element - }, - }, - strings: { - save: 'Save', // Default for save button - clear: 'Clear', // Default for clear button - }, - }) - pickr.on('change', (...args) => { - var rgb = 'rgb(' + args[0].toRGBA()[0] + ',' + args[0].toRGBA()[1] + ',' + args[0].toRGBA()[2] + ')' - $('#color-picker' + i + '_value').val(rgb) - }) +function copyColor(from, to) { + let props = [ + 'background', 'subcolor', 'text', 'accent', + 'modal', 'modalFooter', 'third', 'forth', + 'bottom', 'emphasized', 'postbox', 'active', + 'selected', 'selectedWithShared' + ] + let i = 0 + let color + for (tag of props) { + if(tag == from) { + let used = $(`#use-color_${i}`).prop('checked') + if(!used) { + Swal.fire({ + type: 'error', + title: 'Not checked', + }) + break + } + color = $(`#color-picker${i}_value`).val() + break + } + i++ + } + if(!color) return false + for (tag of props) { + if(tag == to) { + $(`#color-picker${i}_value`).val(color) + $(`#use-color_${i}`).prop('checked', true) + break + } + i++ + } } function customComp() { var nameC = $('#custom_name').val() @@ -544,59 +548,32 @@ function customComp() { return false } var descC = $('#custom_desc').val() - var primaryC = $('#color-picker0_value').val() - if (!primaryC) { - primaryC = 'rgb(255,255,255)' - } - var secondaryC = $('#color-picker1_value').val() - if (!secondaryC) { - secondaryC = 'rgb(255,255,255)' - } - var textC = $('#color-picker2_value').val() - if (!textC) { - textC = 'rgb(255,255,255)' - } + var bgC = $('#color-picker0_value').val() + var subcolorC = $('#color-picker2_value').val() + var textC = $('#color-picker1_value').val() + var accentC = $('#color-picker3_value').val() var multi = localStorage.getItem('multi') - if ($('#pickers').hasClass('advanceTheme')) { - var accentC = $('#color-picker3_value').val() - if (!accentC) { - accentC = null + let advanced = [ + 'modal', 'modalFooter', 'third', 'forth', + 'bottom', 'emphasized', 'postbox', 'active', + 'selected', 'selectedWithShared' + ] + var advanceTheme = {} + let i = 4 + for (tag of advanced) { + let used = $(`#use-color_${i}`).prop('checked') + if (used) { + advanceTheme[tag] = $(`#color-picker${i}_value`).val() } - 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 = {} + i++ } var my = JSON.parse(multi)[0].name var id = $('#custom-edit-sel').val() - if (id == 'add_new') { + const defaults = [ + 'black','blue','brown','green','indigo','polar','snow','white' + ] + if (id == 'add_new' || defaults.includes(id)) { id = makeCID() } localStorage.setItem('customtheme-id', id) @@ -605,26 +582,48 @@ function customComp() { author: my, desc: descC, base: $('[name=direction]:checked').val(), - vars: { - primary: primaryC, - secondary: secondaryC, + primary: { + background: bgC, + subcolor: subcolorC, text: textC, + accent: accentC }, - props: advanceTheme, + advanced: advanceTheme, id: id, + version: '2' } $('#custom_json').val(JSON.stringify(json)) - themes('custom') - $('#custom').prop('checked', true) - $('#custom_name').val('') - $('#custom_desc').val('') - $('#dark').prop('checked', true) - $('#custom_json').val('') - for (var i = 0; i <= 8; i++) { - $('#color-picker' + i + '-wrap').html('
') - $('#color-picker' + i + '_value').val('') - pickerDefine(i, 'fff') - } + let timerInterval + Swal.fire({ + title: 'Saving...', + html: '', + timer: 1000, + timerProgressBar: true, + onBeforeOpen: () => { + Swal.showLoading() + }, + onClose: () => { + clearInterval(timerInterval) + } + }).then((result) => { + themes() + ctLoad() + Swal.fire({ + title: 'Refreshing...', + html: '', + timer: 1000, + timerProgressBar: true, + onBeforeOpen: () => { + Swal.showLoading() + }, + onClose: () => { + clearInterval(timerInterval) + } + }).then((result) => { + $('#custom-edit-sel').val(id) + $('select').formSelect() + }) + }) postMessage(['themeJsonCreate', JSON.stringify(json)], '*') } function deleteIt() { @@ -633,34 +632,34 @@ function deleteIt() { $('#custom_desc').val('') $('#dark').prop('checked', true) $('#custom_json').val('') - for (var i = 0; i <= 8; i++) { - $('#color-picker' + i + '-wrap').html('
') + for (var i = 0; i <= 13; i++) { + if (i >= 4) $(`#use-color_${i}`).prop('checked', false) $('#color-picker' + i + '_value').val('') - pickerDefine(i, 'fff') } - postMessage(['themeJsonDelete', id], '*') + postMessage(['themeJsonDelete', id + '.thedesktheme'], '*') } function ctLoad() { postMessage(['sendSinmpleIpc', 'theme-json-list'], '*') } function ctLoadCore(args) { - var templete = '' + var template = '' + var editTemplate = '' Object.keys(args).forEach(function (key) { var theme = args[key] var themeid = theme.id - templete = templete + '' + template = template + `` + if (!theme.compatible) editTemplate = editTemplate + `` }) - if (args[0]) { - localStorage.setItem('customtheme-id', args[0].id) - } - $('#custom-sel-sel').html(templete) - templete = '' + templete - $('#custom-edit-sel').html(templete) + $('#custom-sel-sel').html(template) + editTemplate = '' + editTemplate + $('#custom-edit-sel').html(editTemplate) + $('#custom-sel-sel').val(localStorage.getItem('customtheme-id')) $('select').formSelect() } function customSel() { var id = $('#custom-sel-sel').val() localStorage.setItem('customtheme-id', id) + themes(id) } function custom() { var id = $('#custom-edit-sel').val() @@ -669,58 +668,47 @@ function custom() { $('#custom_desc').val('') $('#dark').prop('checked', true) $('#custom_json').val('') - for (var i = 0; i <= 8; i++) { - $('#color-picker' + i + '-wrap').html('
') + for (var i = 0; i <= 13; i++) { + if (i >= 4) $(`#use-color_${i}`).prop('checked', false) $('#color-picker' + i + '_value').val('') - pickerDefine(i, 'fff') } $('#delTheme').addClass('disabled') } else { $('#delTheme').removeClass('disabled') - postMessage(['themeJsonRequest', id], '*') + postMessage(['themeJsonRequest', id + '.thedesktheme'], '*') } } function customConnect(raw) { var args = raw[0] - $('#custom_name').val(args.name) - $('#custom_desc').val(args.desc) + $('#custom_name').val(`${args.name} ${args.default ? 'Customed' : ''}`) + $('#custom_desc').val(args.default ? 'TheDesk default theme with some changes by user' : 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) + //Background + $('#color-picker0_value').val(args.primary.background) //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(raw[1]) -} -function advancedConncet(args, tar, sub, i) { - if (args.props) { - if (args.props[tar]) { - var color = args.props[tar] - $('#pickers').addClass('advanceTheme') - $('.advanced').removeClass('hide') - } else { - var color = args.vars[sub] + $('#color-picker1_value').val(args.primary.text) + //Subcolor + $('#color-picker2_value').val(args.primary.subcolor) + //Accent + $('#color-picker3_value').val(args.primary.accent) + let advanced = [ + 'modal', 'modalFooter', 'third', 'forth', + 'bottom', 'emphasized', 'postbox', 'active', + 'selected', 'selectedWithShared' + ] + let i = 4 + for (tag of advanced) { + if (args.advanced[tag]) { + $(`#color-picker${i}_value`).val(args.advanced[tag]) + } - } else { - var color = args.vars[sub] + $(`#use-color_${i}`).prop('checked', true) + i++ + } + $('#custom_json').val(raw[1]) + if(args.default) { + $('#delTheme').addClass('disabled') } - $('#color-picker' + i + '-wrap').html('
') - $('#color-picker' + i + '_value').val(color) - pickerDefine(i, rgbToHex(color)) } function customImp() { var json = $('#custom_import').val() @@ -832,3 +820,5 @@ function lastFmSet() { } M.toast({ html: 'Complete: last.fm', displayLength: 3000 }) } + +function stopVideo() { return false } \ No newline at end of file diff --git a/app/js/ui/theme.js b/app/js/ui/theme.js index 757c6a0b..f95dcb2e 100644 --- a/app/js/ui/theme.js +++ b/app/js/ui/theme.js @@ -1,35 +1,13 @@ //テーマ適用 function themes(theme) { if (!theme) { - var theme = localStorage.getItem('theme') + var theme = localStorage.getItem('customtheme-id') if (!theme) { - var theme = 'black' - localStorage.setItem('theme', 'black') + localStorage.setItem('customtheme-id', 'black') } } + postMessage(['themeCSSRequest', theme + '.thedesktheme'], '*') var el = document.getElementsByTagName('html')[0] - - el.classList.remove('indigotheme') - el.classList.remove('greentheme') - el.classList.remove('browntheme') - el.classList.remove('blacktheme') - el.classList.remove('bluetheme') - el.classList.remove('polartheme') - el.classList.remove('snowtheme') - el.classList.remove('customtheme') - el.classList.add(theme + 'theme') - var font = localStorage.getItem('font') - if (font) { - font = font.replace(/"(.+)"/, '$1') - el.style.fontFamily = '"' + font + '"' - } else { - el.style.fontFamily = '' - } - if (theme == 'custom') { - if (localStorage.getItem('customtheme-id')) { - postMessage(['themeCSSRequest', localStorage.getItem('customtheme-id')], '*') - } - } el.style.backgroundColor = 'var(--bg)' } themes() diff --git a/app/main/css.js b/app/main/css.js index 3345d588..6914ab13 100644 --- a/app/main/css.js +++ b/app/main/css.js @@ -31,119 +31,246 @@ function css(mainWindow) { } }) ipc.on('theme-json-delete', function (e, arg) { - var themecss = join(app.getPath("userData"), arg + ".thedesktheme"); - console.log(themecss); - fs.unlink(themecss, function (err) { - e.sender.webContents.send('theme-json-delete-complete', ""); - }); + try{ + var themecss = join(app.getPath("userData"), arg); + console.log(themecss); + fs.unlink(themecss, function (err) { + e.sender.webContents.send('theme-json-delete-complete', ""); + }); + } catch { + e.sender.webContents.send('theme-json-delete-complete', 'cannot delete'); + } + }) ipc.on('theme-json-request', function (e, arg) { - var themecss = join(app.getPath("userData"), arg + ".thedesktheme"); - var raw = fs.readFileSync(themecss, 'utf8') - var json = JSON5.parse(raw); + try { + var themecss = join('./source/themes', arg) + var raw = fs.readFileSync(themecss, 'utf8') + var json = JSON5.parse(raw) + } catch { + var themecss = join(app.getPath("userData"), arg) + var raw = fs.readFileSync(themecss, 'utf8') + var json = JSON5.parse(raw) + } e.sender.webContents.send('theme-json-response', [json, raw]); }) ipc.on('theme-css-request', function (e, arg) { - var themecss = join(app.getPath("userData"), arg + ".thedesktheme"); try { - var json = JSON5.parse(fs.readFileSync(themecss, 'utf8')); + var themecss = join('./source/themes', arg) + var json = JSON5.parse(fs.readFileSync(themecss, 'utf8')) + } catch { + var themecss = join(app.getPath("userData"), arg) + var json = JSON5.parse(fs.readFileSync(themecss, 'utf8')) + } - var primary = json.vars.primary; - var secondary = json.vars.secondary; - var text = json.vars.text; - if (json.base == "light") { - var drag = "rgba(255, 255, 255, 0.8)"; - var beforehover = "#757575"; - var selected = "#3f3f3f" - var selectedWithShare = "#b2babd" - var gray = "#757575" - } else { - var drag = "rgba(0, 0, 0, 0.8)"; - var beforehover = "#9e9e9e"; - var selected = "#c0c0c0" - var selectedWithShare = "#003a30" - var gray = "#cccccc" - } - if (json.props) { - if (json.props.TheDeskAccent) { - var emphasized = json.props.TheDeskAccent + try { + var css + if (json.version) { + var bg = json.primary.background + var subcolor = json.primary.subcolor + var text = json.primary.text + var accent = json.primary.accent + if (json.base == "light") { + var drag = "rgba(255, 255, 255, 0.8)"; + var beforehover = "#757575"; + var selected = "#3f3f3f" + var selectedWithShare = "#b2babd" + var gray = "#757575" + var hisData = 'rgba(255, 255, 255, 0.9)' } else { - var emphasized = secondary + var drag = "rgba(0, 0, 0, 0.8)"; + var beforehover = "#9e9e9e"; + var selected = "#c0c0c0" + var selectedWithShare = "#003a30" + var gray = "#cccccc" + var hisData = 'rgba(0, 0, 0, 0.8)' } - if (json.props.TheDeskActive) { - var active = json.props.TheDeskActive + if (!json.advanced) { + json.advanced = {} + } + if (json.advanced.modal) { + var modal = json.advanced.modal } else { - var active = primary + var modal = bg } - if (json.props.TheDeskModal) { - var modal = json.props.TheDeskModal + if (json.advanced.modalFooter) { + var modalFooter = json.advanced.modalFooter } else { - var modal = secondary + var modalFooter = bg + if (modal != bg) modalFooter = modal } - if (json.props.TheDeskBottom) { - var bottom = json.props.TheDeskBottom + if (json.advanced.thirdColor) { + var thirdColor = json.advanced.thirdColor } else { - var bottom = primary + var thirdColor = subcolor } - if (json.props.TheDeskPostbox) { - var postbox = json.props.TheDeskPostbox + if (json.advanced.forthColor) { + var forthColor = json.advanced.forthColor } else { - var postbox = primary + var forthColor = subcolor + if (thirdColor != subcolor) forthColor = thirdColor } - if (json.props.TheDeskSubcolor) { - var subcolor = json.props.TheDeskSubcolor + if (json.advanced.bottom) { + var bottom = json.advanced.bottom } else { - var subcolor = primary + var bottom = subcolor + } + if (json.advanced.emphasized) { + var emphasized = json.advanced.emphasized + } else { + var emphasized = accent + } + if (json.advanced.postbox) { + var postbox = json.advanced.postbox + } else { + var postbox = subcolor + } + if (json.advanced.active) { + var active = json.advanced.active + } else { + var active = accent + } + if (json.advanced.selected) { + var selected = json.advanced.selected + } + if (json.advanced.selectedWithShare) { + var selectedWithShare = json.advanced.selectedWithShare } - } else { - 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:" + - modal + ";--subcolor:" + subcolor + ";--box:" + subcolor + - ";--sidebar:" + bottom + ";--shared:" + emphasized + ";" + - "--notfbox:" + secondary + ";--emphasized:" + active + ";--his-data:" + - secondary + - ";--active:" + active + ";--postbox:" + postbox + ";--modalfooter:" + - primary + - ";--accentbtn:" + subcolor + ";--selected:" + selected + ";--selectedWithShare:" + selectedWithShare + "}"+ - "--gray:" + gray + ";"+ - ".customtheme #imagemodal{background: url(\"../img/pixel.svg\");}"; + var css = ":root {--bg:" + bg + ";--drag:" + drag + ";" + + "--text:" + text + ";--beforehover:" + beforehover + ";--modal:" + + modal + ";--thirdColor:" + thirdColor + ";--subcolor:" + forthColor + + ";--bottom:" + bottom + ";--accent:" + accent + ";" + ";--emphasized:" + emphasized + ";--his-data:" + + hisData + + ";--active:" + active + ";--postbox:" + postbox + ";--modalfooter:" + + modalFooter + ";--selected:" + selected + ";--selectedWithShare:" + selectedWithShare + "}" + + "--gray:" + gray + ";" + + ".customtheme #imagemodal{background: url(\"../img/pixel.svg\");}"; + } else { + var css = compatibleTheme(json) + } e.sender.webContents.send('theme-css-response', css); } catch (e) { var css = ""; } }) - ipc.on('theme-json-list', function (e, arg) { - fs.readdir(app.getPath("userData"), function (err, files) { - if (err || !files) throw err; - var fileList = files.filter(function (file) { - if(file.match(/\.thedesktheme$/)){ - var tfile = join(app.getPath("userData"), file) - return fs.statSync(tfile).isFile() && /.*\.thedesktheme$/.test(tfile) - }else{ - return null - } - }) - var themes = []; - for (var i = 0; i < fileList.length; i++) { - var themecss = join(app.getPath("userData"), fileList[i]); - var json = JSON5.parse(fs.readFileSync(themecss, 'utf8')); - themes.push({ - name: json.name, - id: json.id - }) + function compatibleTheme(json) { + var primary = json.vars.primary; + var secondary = json.vars.secondary; + var text = json.vars.text; + if (json.base == "light") { + var drag = "rgba(255, 255, 255, 0.8)"; + var beforehover = "#757575"; + var selected = "#3f3f3f" + var selectedWithShare = "#b2babd" + var gray = "#757575" + } else { + var drag = "rgba(0, 0, 0, 0.8)"; + var beforehover = "#9e9e9e"; + var selected = "#c0c0c0" + var selectedWithShare = "#003a30" + var gray = "#cccccc" + } + if (json.advanced) { + if (json.advanced.TheDeskAccent) { + var emphasized = json.advanced.TheDeskAccent + } else { + var emphasized = secondary } - e.sender.webContents.send('theme-json-list-response', themes); - }); + if (json.advanced.TheDeskActive) { + var active = json.advanced.TheDeskActive + } else { + var active = primary + } + if (json.advanced.TheDeskModal) { + var modal = json.advanced.TheDeskModal + } else { + var modal = secondary + } + if (json.advanced.TheDeskBottom) { + var bottom = json.advanced.TheDeskBottom + } else { + var bottom = primary + } + if (json.advanced.TheDeskPostbox) { + var postbox = json.advanced.TheDeskPostbox + } else { + var postbox = primary + } + if (json.advanced.TheDeskSubcolor) { + var subcolor = json.advanced.TheDeskSubcolor + } else { + var subcolor = primary + } + } else { + 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 + ";" + + "--text:" + text + ";--beforehover:" + beforehover + ";--modal:" + + modal + ";--thirdColor:" + subcolor + ";--subcolor:" + subcolor + + ";--bottom:" + bottom + ";--accent:" + emphasized + ";" + + "--subcolor:" + secondary + ";--emphasized:" + active + ";--his-data:" + + secondary + + ";--active:" + active + ";--postbox:" + postbox + ";--modalfooter:" + + primary + + ";--active:" + subcolor + ";--selected:" + selected + ";--selectedWithShare:" + selectedWithShare + "}" + + "--gray:" + gray + ";" + + ".customtheme #imagemodal{background: url(\"../img/pixel.svg\");}"; + return css + } + ipc.on('theme-json-list', function (e, arg) { + var files1 = fs.readdirSync('./source/themes') + var file1List = files1.filter(function (file) { + if (file.match(/\.thedesktheme$/)) { + var tfile = join('./source/themes', file) + return fs.statSync(tfile).isFile() && /.*\.thedesktheme$/.test(tfile) + } else { + return null + } + }) + var themes = []; + for (var i = 0; i < file1List.length; i++) { + var themecss = join('./source/themes', file1List[i]); + var json = JSON5.parse(fs.readFileSync(themecss, 'utf8')); + let compat = true + if (json.version) compat = false + themes.push({ + name: json.name, + id: json.id, + compatible: compat, + default: true + }) + } + var files2 = fs.readdirSync(app.getPath("userData")) + var file2List = files2.filter(function (file) { + if (file.match(/\.thedesktheme$/)) { + var tfile = join(app.getPath("userData"), file) + return fs.statSync(tfile).isFile() && /.*\.thedesktheme$/.test(tfile) + } else { + return null + } + }) + for (var i = 0; i < file2List.length; i++) { + var themecss = join(app.getPath("userData"), file2List[i]); + var json = JSON5.parse(fs.readFileSync(themecss, 'utf8')); + let compat = true + if (json.version) compat = false + themes.push({ + name: json.name, + id: json.id, + compatible: compat, + default: false + }) + } + e.sender.webContents.send('theme-json-list-response', themes); }) } exports.css = css; diff --git a/app/nano.html b/app/nano.html index 4e2e6995..4cc48819 100644 --- a/app/nano.html +++ b/app/nano.html @@ -16,7 +16,7 @@ height: 100vh; overflow: hidden; font-family: sans-serif; - color: var(--color) !important; + color: var(--text) !important; } body { @@ -45,7 +45,7 @@ textarea { -webkit-app-region: no-drag; - color: var(--color) !important; + color: var(--text) !important; } ::-webkit-scrollbar { diff --git a/app/source/themes/black.thedesktheme b/app/source/themes/black.thedesktheme new file mode 100644 index 00000000..e608ce88 --- /dev/null +++ b/app/source/themes/black.thedesktheme @@ -0,0 +1,27 @@ +{ + name: 'Black', + author: 'TheDesk', + desc: 'TheDesk Default Theme', + base: 'dark', + primary: { + background: '#212121', + subcolor: '#424242', + text: '#fff', + accent: '#004d40', + }, + advanced: { + modal: '#000', + modalFooter: '#212121', + third: '#212121', + forth: '#333333', + bottom: '#424242', + emphasized: '#4e342e', + postbox: '#424242', + active: '#3f51b5', + selected: '#3f3f3f', + selectedWithShared: '#003a30', + }, + id: 'black', + version: '2', + default: true +} diff --git a/app/source/themes/blue.thedesktheme b/app/source/themes/blue.thedesktheme new file mode 100644 index 00000000..a92d1d90 --- /dev/null +++ b/app/source/themes/blue.thedesktheme @@ -0,0 +1,27 @@ +{ + name: 'Blue', + author: 'TheDesk', + desc: 'TheDesk Default Theme', + base: 'light', + primary: { + background: '#c9e1ec', + subcolor: '#dff1ff', + text: '#000', + accent: '#e0ffe4', + }, + advanced: { + modal: '#b2ebf2', + modalFooter: '#2196f3', + third: '#90caf9', + forth: '#90caf9', + bottom: '#b6e6f5', + emphasized: '#c5e1a5', + postbox: '#dff1ff', + active: '#2f7bb7', + selected: '#9dcade', + selectedWithShared: '#c1dac4', + }, + id: 'blue', + version: '2', + default: true +} diff --git a/app/source/themes/brown.thedesktheme b/app/source/themes/brown.thedesktheme new file mode 100644 index 00000000..3190d5c3 --- /dev/null +++ b/app/source/themes/brown.thedesktheme @@ -0,0 +1,27 @@ +{ + name: 'Brown', + author: 'TheDesk', + desc: 'TheDesk Default Theme', + base: 'dark', + primary: { + background: '#261411', + subcolor: '#4e342e', + text: '#fff', + accent: '#004d40', + }, + advanced: { + modal: '#261411', + modalFooter: '#261411', + third: '#4e342e', + forth: '#4e342e', + bottom: '#4e342e', + emphasized: '#0d47a1', + postbox: '#4e342e', + active: '#827717', + selected: '#6d352b', + selectedWithShared: '#003a30', + }, + id: 'brown', + version: '2', + default: true +} diff --git a/app/source/themes/green.thedesktheme b/app/source/themes/green.thedesktheme new file mode 100644 index 00000000..89efa75a --- /dev/null +++ b/app/source/themes/green.thedesktheme @@ -0,0 +1,27 @@ +{ + name: 'Green', + author: 'TheDesk', + desc: 'TheDesk Default Theme', + base: 'light', + primary: { + background: '#c8e6c9', + subcolor: '#a5d6a7', + text: '#000', + accent: '#ffcc80', + }, + advanced: { + modal: '#81c784', + modalFooter: '#81c784', + third: '#a5d6a7', + forth: '#81c784', + bottom: '#c5e1a5', + emphasized: '#9e9d24', + postbox: '#a5d6a7', + active: '#33691e', + selected: '#78c17a', + selectedWithShared: '#caa266', + }, + id: 'green', + version: '2', + default: true +} diff --git a/app/source/themes/indigo.thedesktheme b/app/source/themes/indigo.thedesktheme new file mode 100644 index 00000000..7f8b9375 --- /dev/null +++ b/app/source/themes/indigo.thedesktheme @@ -0,0 +1,27 @@ +{ + name: 'Indigo', + author: 'TheDesk', + desc: 'TheDesk Default Theme', + base: 'dark', + primary: { + background: '#031833', + subcolor: '#1a237e', + text: '#fff', + accent: '#004d40', + }, + advanced: { + modal: '#0d1351', + modalFooter: '#031833', + third: '#0d1351', + forth: '#0d47a1', + bottom: '#0d1351', + emphasized: '#4e342e', + postbox: '#1a237e', + active: '#00acc1', + selected: '#214f8a', + selectedWithShared: '#003a30', + }, + id: 'indigo', + version: '2', + default: true +} diff --git a/app/source/themes/polar.thedesktheme b/app/source/themes/polar.thedesktheme new file mode 100644 index 00000000..6e06bd5e --- /dev/null +++ b/app/source/themes/polar.thedesktheme @@ -0,0 +1,27 @@ +{ + name: 'Polar Night', + author: 'TheDesk', + desc: 'TheDesk Default Theme', + base: 'dark', + primary: { + background: '#2e3440', + subcolor: '#434c5e', + text: '#ffffff', + accent: '#2d3b58', + }, + advanced: { + modal: '#3b4252', + modalFooter: '#485166', + third: '#434c5e', + forth: '#4c566a', + bottom: '#3b4252', + emphasized: '#2f4b86', + postbox: '#434c5e', + active: '#2f4b86', + selected: '#464f61', + selectedWithShared: '#3e527e', + }, + id: 'polar', + version: '2', + default: true +} diff --git a/app/source/themes/snow.thedesktheme b/app/source/themes/snow.thedesktheme new file mode 100644 index 00000000..0f8642d9 --- /dev/null +++ b/app/source/themes/snow.thedesktheme @@ -0,0 +1,27 @@ +{ + name: 'Snow Storm', + author: 'TheDesk', + desc: 'TheDesk Default Theme', + base: 'light', + primary: { + background: '#eceff4', + subcolor: '#d8dee9', + text: '#36425a', + accent: '#c3d4e6', + }, + advanced: { + modal: '#e5e9f0', + modalFooter: '#b2bed4', + third: '#d8dee9', + forth: '#4c566a', + bottom: '#eeeeee', + emphasized: '#88c0d0', + postbox: '#d8dee9', + active: '#81a1c1', + selected: '#b4bdd0', + selectedWithShared: '#a3afbb', + }, + id: 'snow', + version: '2', + default: true +} diff --git a/app/source/themes/white.thedesktheme b/app/source/themes/white.thedesktheme new file mode 100644 index 00000000..d4fafa2c --- /dev/null +++ b/app/source/themes/white.thedesktheme @@ -0,0 +1,27 @@ +{ + name: 'White', + author: 'TheDesk', + desc: 'TheDesk Default Theme', + base: 'light', + primary: { + background: '#fff', + subcolor: '#fff', + text: '#000', + accent: '#cfd8dc', + }, + advanced: { + modal: '#fff', + modalFooter: '#fafafa', + third: '#e0e0e0', + forth: '#fff', + bottom: '#eeeeee', + emphasized: '#81c784', + postbox: '#fff', + active: '#009688', + selected: '#c0c0c0', + selectedWithShared: '#b2babd', + }, + id: 'white', + version: '2', + default: true +} diff --git a/app/view/make/acct.sample.html b/app/view/make/acct.sample.html index ba0525ff..fc2f3005 100644 --- a/app/view/make/acct.sample.html +++ b/app/view/make/acct.sample.html @@ -8,7 +8,6 @@ type="text/css" rel="stylesheet" /> - diff --git a/app/view/make/index.sample.html b/app/view/make/index.sample.html index 5cd8f465..301d3e40 100644 --- a/app/view/make/index.sample.html +++ b/app/view/make/index.sample.html @@ -1,7 +1,6 @@ -
- @@backupWarn@@
- + @@backupWarn@@
+