From bc4aa67fee504451bfa80a5f72499532ee3b6544 Mon Sep 17 00:00:00 2001 From: Handle Date: Thu, 17 Jan 2019 22:48:30 +0800 Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BE=9B=E4=BA=86=E5=87=A0=E4=B8=AA?= =?UTF-8?q?=E9=80=89=E9=A1=B9=E7=9A=84=E5=8F=AF=E8=A7=86=E5=8C=96=E8=AE=BE?= =?UTF-8?q?=E7=BD=AE=E9=A1=B5=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- configs.js | 3 +- index.js | 2 +- manager/iconfont.eot | Bin 5772 -> 6096 bytes manager/iconfont.ttf | Bin 5604 -> 5928 bytes manager/iconfont.woff | Bin 3856 -> 4068 bytes manager/index.html | 18 +++++- manager/manager.js | 48 +++++++++++++++ manager/style.css | 133 +++++++++++++++++++++++++++++------------ manager/style.scss | 134 ++++++++++++++++++++++++++++++------------ package.json | 2 +- 10 files changed, 263 insertions(+), 77 deletions(-) diff --git a/configs.js b/configs.js index 7a2554f..b1df250 100644 --- a/configs.js +++ b/configs.js @@ -34,7 +34,8 @@ const CONFIGS = { }, autoHideMenuBar: true, useContentSize: true, - icon: getIcon() + icon: getIcon(), + enableLargerThanScreen: true }, MANAGER_WINDOW_CONFIG: { width: 1280, // + 16, diff --git a/index.js b/index.js index 80aa197..4f15263 100644 --- a/index.js +++ b/index.js @@ -322,7 +322,7 @@ const windowControl = { 'file://' + path.join(toolInfo.filesDir, indexPage) ) case 'update-user-config': - userConfigs = require('configs-user.json') + userConfigs = require('./configs-user.json') break default: break diff --git a/manager/iconfont.eot b/manager/iconfont.eot index 8391fd8ebb5169b6677d843a78d047394e445db7..1c4609c5acd8b9a9b7dd816966710f05474a61a3 100644 GIT binary patch delta 896 zcmZ9KNlX)A6vzK>W;(S{rgUfrFbFMWu|)w{Ms^#*0TT}PBqp}?4dcoA^81#z{NI~z=F#cxI(fSg zI9a$L>(c6a(ab{d`F!!jUN;~VF)xNjZVe9B=C%RSE};C0ghK-bKUZo1@ELl94c0yJ z8SmdR6_M!FY>%AH0`!s3JtJdRLuE?&A?F|YqoLVxD#r@@Ss$L!P&C|iDRUPn_{#O7 z<71O~Q@z@L9MCRsz?b*{`6`_t-ZL{r>#J8B9lww(u>trr_{J!Gw8mdkF*)NKv>$&d z1kUUn!?n!_SHkg&ulCCF!sJ&~KJO866tiGz4XC=qx$F4mkgik18~O5yo8 z46gtMb{3Fefeb5-!N&5r$b$pa-7f^~Ik6nl)0Y)hRfL$LMhh}QMWvPi zwFg>BD9H3t%;m^zI9$|zSW!=^LjCNo&wQ}k4sG^}oL8c%9z!eU*NN5a>34oz$f`=3 zang$;NEySv6MGby)xLgkJKGj!j839`r_1R^c-ELcctSTPE!V_QQ+OG9?9{-A; f-5!lp$P>c@W1~azWF&k$GAvDoro(ZYc8~BE_7TDw delta 607 zcmYk3PiPZC6vn@q-Ar5Knnl}GgZ*Qx760L_hY~gPBf-7d2im%_ukBWzF4`SDrsQ5 ztEz_W`uu8NHTQh!PqXkEke#G5KK1Z!t>@)wz+MNO@4lBW9Qm?-1Hcb5>~o=Q%X&ut zJvr$Y=N58mcNY+wjB`_^JNe$u%vbJz#dx5YUziamu*UpR#{JXzqIY@h?_=OF^RhTo znsw%Gm$$C~T`qsv3<_fKlnX(h^sUa6%okhHk~e7pJK?EW0Q5yylZd=fu{H92%` zqqPV42&?6t=X`)78?a&8&A>G)VKN*F&xEyRHu9p$XhpZ{v|iN9<_P<_V8A+eNpQ#i z<2ZWvhUrYgL6Ukl5>RMEJ33hHAPynLv}#l>DO|?Jc#$nj1$BFH$zh#Z3>DDK#!w59 z7eiG<_hP7zXflSC5G}{BCZd%XR)^k$eL(Yx4d(oMF~;mXn diff --git a/manager/iconfont.ttf b/manager/iconfont.ttf index 520b6990089aba47ed8c7224f65c4dffd8fd7fa3..d9bbe0225fc167c5c593466b3b15b9e89d6faecb 100644 GIT binary patch delta 962 zcmZ8eOK1~O6g_ulGHIIWq%%!Mh1w?RN0LenwH<3)Yp5<11ceGNHEL@7#H#f#nt&VI zRVAP+L0pN_Rb6(WATFv44K4%~YFpApMsQ<6Fp2kN1i?3)_ul=Tb7p3>=V|Y3BDd+{ z@)#g(WIQ=_?#9GKuYU+omH_>CCY?Ij@?)+C0LQR1obWEo5Ba{p=*(m>I-d@7qBJzTvFw0vQ`?1jmxrpx=Rl>%TL;D*ol z7dmzuAigrLZ9M+!Xkg?g{0b+4PZKYMa{a8;YI(&Y=Q(VEB(l83oKa|_l|qH$2aEL> zcn7(D+sbDnHx;4aF?Y72nKN3+U+ON!N{>q4*G9_e^4ao?)8JUnEoWN1*S~7vlGL+D zXte(Kv?2WW5mgB~H0D*{feJ6X^RcQQO$e|aNG*Jmeiwd7-hjp)fcNzsXf8N%M^0zO zM=qEJrSC474{IYXm>K1?3)VpSj0;vn`K$}pMS0o=!MVjh zP;6`!&OH}w8V(Z)2>bQ5kA`Sb8j~JKi}F=@Rk@@*^H`puI;s}Eaqpe^*UA+s#|~;s z@?$v+1MS#`o!F0Y90NR&UfN=e(vC=9J6Rz^CyJ^eBWP`p^w|T(7C92_-bJF`MjJvp zbwvjHyE`J>)78O~1N}BPTAPV0p`bNPefBQ$ijjU>q=TxQtmI=ko5+qyNv$#8NOt9j zZkoE3*UfB8HL0647^mU*PLf)xAkg3x#t|zJ=G~c>UJH&IXrWqDo z`It@2rd3|XY^i4I6{cg-?b!-Ahz}C8R&+D@H4qF2A}f^Wd@CB>b|z}ieVXQbK5Ob> zk>QQMFUcoF|9LK-&X6C7_(+p`#EVf#PmPU2zAg1D}YanzHYH3%;baxFE{6i=NVbP%) z=#VXR2S-~Ia5V)Y>Z z84%6n)#$|BNaf;6Ctz&=&M&`^%QtOp+yk&nZu@l9?V0bWuahf&ae8(@CJA6{(;k>8 zKgwmBGe4RCk@n?cZg$eRgs+TWpxsu=6$^bs|DFQp7#GFK@{}|EaCyHUIPdYm_M7$g zeh&s!()!`*>I1j;FH#mAz|Q^eT_<~zBukcUF43-sP+p44^Mb7LJFrE^&CQw({D4{0 zu5&-bLz}RmZjgbeJYg#A2(N{eU|6&S^P>BX!N}>=g6#299RwVtm}kL;L>;>~uxcaD z!ev+nhobt{Y;YUZJm4eN#0{!u`=SGc6%9+^pjX3Uhzc5(Mf6z128hNrY=!8BhD{N@ z)UZ9`V>k%nv_@StUeItj#LN79>ccq^vyehfOu1|H7~g~xJt8!R%sne(J+}w#RXHf% n%Rj){t~DdpX6la|!wX93HW%{ASiW2ul~aCU-X9A-rJwx=W#E5w diff --git a/manager/iconfont.woff b/manager/iconfont.woff index 68e7552270c1dbce850a3972c7136356acb7b2a7..a6dfd615a1184e3047830d287807c2e0a459609a 100644 GIT binary patch delta 3544 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 Sqj<+DK2w*(m|vdbH>?0rh>z6( delta 3369 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强制开启语音报番型
-
+
+ +
+

窗口

+ +

更新

+ +
+
服务器: 加载中 { ) }) /* 检查更新业务逻辑 End */ + +/* 设置项业务逻辑 Start */ +const getKeyText = key => { + const lang = { + window: '窗口', + isKioskModeOn: '使用原生全屏幕模式(Kiosk)', + update: '更新', + prerelease: '获取浏览版(Pre-release)', + chromium: '核心（需要重启软件）', + isHardwareAccelerationDisable: '关闭硬件加速(Hardware Acceleration)' + } + return lang[key] ? lang[key] : false +} +const userConfig = require('../configs-user.json') +const settingInner = document.getElementById('settingInner') +settingInner.innerHTML = '' +Object.entries(userConfig).forEach(([keyGroup, value]) => { + const groupName = getKeyText(keyGroup) + const h3 = document.createElement('h3') + h3.innerText = groupName + settingInner.append(h3) + Object.entries(value).forEach(([keyConfig, value], index) => { + const selectName = getKeyText(keyConfig) + const input = document.createElement('input') + input.type = 'checkbox' + const label = document.createElement('label') + input.id = 'config' + keyGroup + keyConfig + index + label.setAttribute('for', input.id) + label.innerText = selectName + input.checked = value + input.addEventListener('change', e => { + userConfig[keyGroup][keyConfig] = input.checked + }) + settingInner.append(input) + settingInner.append(label) + }) +}) +const saveConfigsBtn = document.getElementById('saveConfigs') +saveConfigsBtn.addEventListener('click', e => { + try { + fs.writeSync('../configs-user.json', JSON.stringify(userConfig)) + alert('保存成功') + } catch (error) { + alert('保存失败\n' + error) + } +}) + +/* 设置项业务逻辑 End */ diff --git a/manager/style.css b/manager/style.css index 58dec7f..9684b63 100644 --- a/manager/style.css +++ b/manager/style.css @@ -83,6 +83,41 @@ user-select: none; font-family: '思源黑体 CN', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } +*::-webkit-scrollbar { + width: 8px; +} +*::-webkit-scrollbar-button { + height: 0; + display: none; + background-color: transparent; +} +*::-webkit-scrollbar-track-piece { + background-color: transparent; + padding-right: 8px; +} +*::-webkit-scrollbar-thumb { + width: 8px; + border-radius: 4px; + min-height: 64px; + max-height: 128px; + height: auto; + background-color: rgba(0, 0, 0, 0); + -webkit-transition: background-color var(--animation-time) var(--ease-in-out); + transition: background-color var(--animation-time) var(--ease-in-out); +} +*:hover::-webkit-scrollbar-thumb { + background-color: rgba(0, 0, 0, 0.1); +} +*:hover::-webkit-scrollbar-thumb:hover { + background-color: rgba(0, 0, 0, 0.15); + -webkit-transition: background-color 0; + transition: background-color 0; +} +*:hover::-webkit-scrollbar-thumb:active { + background-color: rgba(0, 0, 0, 0.2); + -webkit-transition: background-color 0; + transition: background-color 0; +} button { outline: none !important; @@ -208,41 +243,6 @@ h1 { overflow-y: auto; padding-left: 102px; } -.main-context > section > div.info-cards::-webkit-scrollbar { - width: 8px; -} -.main-context > section > div.info-cards::-webkit-scrollbar-button { - height: 0; - display: none; - background-color: transparent; -} -.main-context > section > div.info-cards::-webkit-scrollbar-track-piece { - background-color: transparent; - padding-right: 8px; -} -.main-context > section > div.info-cards::-webkit-scrollbar-thumb { - width: 8px; - border-radius: 4px; - min-height: 64px; - max-height: 128px; - height: auto; - background-color: rgba(0, 0, 0, 0); - -webkit-transition: background-color var(--animation-time) var(--ease-in-out); - transition: background-color var(--animation-time) var(--ease-in-out); -} -.main-context > section > div.info-cards:hover::-webkit-scrollbar-thumb { - background-color: rgba(0, 0, 0, 0.1); -} -.main-context > section > div.info-cards:hover::-webkit-scrollbar-thumb:hover { - background-color: rgba(0, 0, 0, 0.15); - -webkit-transition: background-color 0; - transition: background-color 0; -} -.main-context > section > div.info-cards:hover::-webkit-scrollbar-thumb:active { - background-color: rgba(0, 0, 0, 0.2); - -webkit-transition: background-color 0; - transition: background-color 0; -} .main-context > section > div.info-cards > article { width: 400px; height: 144px; @@ -398,8 +398,67 @@ h1 { display: none; } .main-context > section[data-name='settingPage'] { - padding-left: 102px; - padding-top: 16px; + padding: 40px 0 20px 102px; +} +.main-context > section[data-name='settingPage'] > .save-btn { + left: 102px; +} +.main-context > section[data-name='settingPage'] > .save-btn::before { + content: ''; +} +.main-context > section[data-name='settingPage'] > .setting-innner { + height: 100%; + width: calc(100% - 16px); + overflow-y: auto; +} +.main-context > section[data-name='settingPage'] > .setting-innner > h3 { + cursor: default; +} +.main-context > section[data-name='settingPage'] > .setting-innner > input { + display: none; +} +.main-context > section[data-name='settingPage'] > .setting-innner > input[type='checkbox'] + label { + width: -webkit-max-content; + width: -moz-max-content; + width: max-content; + line-height: 20px; + font-size: 14px; + cursor: pointer; + outline: none !important; + display: block; + padding-left: 16px; +} +.main-context > section[data-name='settingPage'] > .setting-innner > input[type='checkbox'] + label::before { + content: ' '; + display: inline-block; + width: 32px; + height: 16px; + border-radius: 8px; + position: relative; + top: 3px; + right: 12px; + background-color: var(--switch-disable-color); + -webkit-transition: background-color var(--animation-time) var(--ease-in-out); + transition: background-color var(--animation-time) var(--ease-in-out); +} +.main-context > section[data-name='settingPage'] > .setting-innner > input[type='checkbox'] + label::after { + content: ' '; + display: block; + width: 12px; + height: 12px; + border-radius: 6px; + position: relative; + left: -10px; + bottom: 16px; + background-color: var(--switch-ball-color); + -webkit-transition: left var(--animation-time) var(--ease-in-out); + transition: left var(--animation-time) var(--ease-in-out); +} +.main-context > section[data-name='settingPage'] > .setting-innner > input[type='checkbox']:checked + label::before { + background-color: var(--switch-able-color); +} +.main-context > section[data-name='settingPage'] > .setting-innner > input[type='checkbox']:checked + label::after { + left: calc(-12px - 2px + 20px); } .main-context > .left-pannel { height: var(--main-height); diff --git a/manager/style.scss b/manager/style.scss index f5485c1..cd86c6b 100644 --- a/manager/style.scss +++ b/manager/style.scss @@ -89,6 +89,41 @@ font-weight: 400; user-select: none; font-family: '思源黑体 CN', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + + &::-webkit-scrollbar { + width: 8px; + } + &::-webkit-scrollbar-button { + height: 0; + display: none; + background-color: transparent; + } + &::-webkit-scrollbar-track-piece { + background-color: transparent; + padding-right: 8px; + } + &::-webkit-scrollbar-thumb { + width: 8px; + border-radius: 4px; + min-height: 64px; + max-height: 128px; + height: auto; + background-color: rgba(0, 0, 0, 0); + transition: background-color var(--animation-time) var(--ease-in-out); + } + &:hover { + &::-webkit-scrollbar-thumb { + background-color: rgba(0, 0, 0, 0.1); + } + &::-webkit-scrollbar-thumb:hover { + background-color: rgba(0, 0, 0, 0.15); + transition: background-color 0; + } + &::-webkit-scrollbar-thumb:active { + background-color: rgba(0, 0, 0, 0.2); + transition: background-color 0; + } + } } button { outline: none !important; @@ -211,40 +246,6 @@ h1 { top: 40px; overflow-y: auto; padding-left: 102px; - &::-webkit-scrollbar { - width: 8px; - } - &::-webkit-scrollbar-button { - height: 0; - display: none; - background-color: transparent; - } - &::-webkit-scrollbar-track-piece { - background-color: transparent; - padding-right: 8px; - } - &::-webkit-scrollbar-thumb { - width: 8px; - border-radius: 4px; - min-height: 64px; - max-height: 128px; - height: auto; - background-color: rgba(0, 0, 0, 0); - transition: background-color var(--animation-time) var(--ease-in-out); - } - &:hover { - &::-webkit-scrollbar-thumb { - background-color: rgba(0, 0, 0, 0.1); - } - &::-webkit-scrollbar-thumb:hover { - background-color: rgba(0, 0, 0, 0.15); - transition: background-color 0; - } - &::-webkit-scrollbar-thumb:active { - background-color: rgba(0, 0, 0, 0.2); - transition: background-color 0; - } - } & > article { width: 400px; @@ -403,8 +404,69 @@ h1 { } &[data-name='settingPage'] { - padding-left: 102px; - padding-top: 16px; + padding: 40px 0 20px 102px; + + & > .save-btn { + left: 102px; + &::before { + content: ''; + } + } + & > .setting-innner { + height: 100%; + width: calc(100% - 16px); + overflow-y: auto; + + & > h3 { + cursor: default; + } + & > input { + display: none; + } + & > input[type='checkbox'] + label { + width: max-content; + line-height: 20px; + font-size: 14px; + cursor: pointer; + outline: none !important; + display: block; + padding-left: 16px; + &::before { + content: ' '; + display: inline-block; + width: 32px; + height: 16px; + border-radius: 8px; + position: relative; + top: 3px; + right: 12px; + // bottom: 16px; + background-color: var(--switch-disable-color); + transition: background-color var(--animation-time) + var(--ease-in-out); + } + &::after { + content: ' '; + display: block; + width: 12px; + height: 12px; + border-radius: 6px; + position: relative; + left: -10px; + bottom: 16px; + background-color: var(--switch-ball-color); + transition: left var(--animation-time) var(--ease-in-out); + } + } + & > input[type='checkbox']:checked + label { + &::before { + background-color: var(--switch-able-color); + } + &::after { + left: calc(-12px - 2px + 20px); + } + } + } } } & > .left-pannel { diff --git a/package.json b/package.json index 017b399..8cdabef 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "majsoul-plus-client", - "version": "1.6.0-alpha.1", + "version": "1.6.0-beta.1", "productName": "Majsoul Plus", "author": "MajsoulPlus Team", "description": "Majsoul Plus",