Add Theme Preview

This commit is contained in:
cutls 2021-04-15 05:45:14 +09:00
parent 54031da417
commit 3e0a048e28
11 changed files with 207 additions and 51 deletions

View File

@ -509,6 +509,13 @@ h2.swal2-title {
margin: 0; margin: 0;
line-height: 100%; line-height: 100%;
} }
.swal2-close:focus {
background-color: inherit !important;
box-shadow: none !important;
}
.swal2-actions {
background-color: var(--modalfooter);
}
#src-contents svg { #src-contents svg {
margin-right: 0.4rem; margin-right: 0.4rem;
} }

File diff suppressed because one or more lines are too long

View File

@ -66,7 +66,9 @@ onmessage = function(e) {
console.log('NowPlaying') console.log('NowPlaying')
ipc.send('itunes', e.data[1]) ipc.send('itunes', e.data[1])
} else if (e.data[0] == 'themeCSSRequest') { } else if (e.data[0] == 'themeCSSRequest') {
ipc.send('theme-css-request', e.data[1]) ipc.send('theme-css-request', e.data)
} else if (e.data[0] == 'themeCSSPreview') {
ipc.send('theme-css-request', e.data)
} else if (e.data[0] == 'customCSSRequest') { } else if (e.data[0] == 'customCSSRequest') {
ipc.send('custom-css-request', e.data[1]) ipc.send('custom-css-request', e.data[1])
} else if (e.data[0] == 'downloadButton') { } else if (e.data[0] == 'downloadButton') {

View File

@ -392,10 +392,6 @@ function exportSettingsCore() {
return exp return exp
} }
function importSettings() { function importSettings() {
if ($('#imp-exp').val()) {
importSettingsCore(JSON5.parse($('#imp-exp').val()))
return false
}
Swal.fire({ Swal.fire({
title: 'Warning', title: 'Warning',
text: lang.lang_setting_importwarn, text: lang.lang_setting_importwarn,
@ -405,6 +401,10 @@ function importSettings() {
cancelButtonText: lang.lang_no, cancelButtonText: lang.lang_no,
}).then((result) => { }).then((result) => {
if (result.value) { if (result.value) {
if ($('#imp-exp').val()) {
importSettingsCore(JSON5.parse($('#imp-exp').val()))
return false
}
postMessage(['importSettings', ''], '*') postMessage(['importSettings', ''], '*')
} }
}) })
@ -553,9 +553,9 @@ function copyColor(from, to) {
i++ i++
} }
} }
function customComp() { function customComp(preview) {
var nameC = $('#custom_name').val() var nameC = $('#custom_name').val()
if (!nameC) { if (!nameC && !preview) {
return false return false
} }
var descC = $('#custom_desc').val() var descC = $('#custom_desc').val()
@ -587,7 +587,7 @@ function customComp() {
if (id == 'add_new' || defaults.includes(id)) { if (id == 'add_new' || defaults.includes(id)) {
id = makeCID() id = makeCID()
} }
localStorage.setItem('customtheme-id', id) if (!preview) localStorage.setItem('customtheme-id', id)
var json = { var json = {
name: nameC, name: nameC,
author: my, author: my,
@ -604,38 +604,18 @@ function customComp() {
version: '2' version: '2'
} }
$('#custom_json').val(JSON.stringify(json)) $('#custom_json').val(JSON.stringify(json))
let timerInterval if (preview) {
Swal.fire({ postMessage(['themeCSSPreview', json], '*')
title: 'Saving...', } else {
html: '', $('#custom-edit-sel').val(id)
timer: 1000, $('select').formSelect()
timerProgressBar: true,
onBeforeOpen: () => {
Swal.showLoading()
},
onClose: () => {
clearInterval(timerInterval)
}
}).then((result) => {
themes()
ctLoad()
Swal.fire({ Swal.fire({
title: 'Refreshing...', type: 'success',
html: '', title: 'Saved',
timer: 1000,
timerProgressBar: true,
onBeforeOpen: () => {
Swal.showLoading()
},
onClose: () => {
clearInterval(timerInterval)
}
}).then((result) => {
$('#custom-edit-sel').val(id)
$('select').formSelect()
}) })
}) postMessage(['themeJsonCreate', JSON.stringify(json)], '*')
postMessage(['themeJsonCreate', JSON.stringify(json)], '*') }
} }
function deleteIt() { function deleteIt() {
var id = $('#custom-sel-sel').val() var id = $('#custom-sel-sel').val()

View File

@ -31,7 +31,7 @@ function css(mainWindow) {
} }
}) })
ipc.on('theme-json-delete', function (e, arg) { ipc.on('theme-json-delete', function (e, arg) {
try{ try {
var themecss = join(app.getPath("userData"), arg); var themecss = join(app.getPath("userData"), arg);
console.log(themecss); console.log(themecss);
fs.unlink(themecss, function (err) { fs.unlink(themecss, function (err) {
@ -40,7 +40,7 @@ function css(mainWindow) {
} catch { } catch {
e.sender.send('theme-json-delete-complete', 'cannot delete'); e.sender.send('theme-json-delete-complete', 'cannot delete');
} }
}) })
ipc.on('theme-json-request', function (e, arg) { ipc.on('theme-json-request', function (e, arg) {
try { try {
@ -54,13 +54,17 @@ function css(mainWindow) {
} }
e.sender.send('theme-json-response', [json, raw]); e.sender.send('theme-json-response', [json, raw]);
}) })
ipc.on('theme-css-request', function (e, arg) { ipc.on('theme-css-request', function (e, args) {
try { if (args[0] === 'themeCSSPreview') {
var themecss = join(app.getAppPath(), '/source/themes', arg) var json = args[1]
var json = JSON5.parse(fs.readFileSync(themecss, 'utf8')) } else {
} catch { try {
var themecss = join(app.getPath("userData"), arg) var themecss = join(app.getAppPath(), '/source/themes', args[1])
var json = JSON5.parse(fs.readFileSync(themecss, 'utf8')) var json = JSON5.parse(fs.readFileSync(themecss, 'utf8'))
} catch {
var themecss = join(app.getPath("userData"), args[1])
var json = JSON5.parse(fs.readFileSync(themecss, 'utf8'))
}
} }
try { try {

View File

@ -72,6 +72,7 @@
"desc": "About this theme", "desc": "About this theme",
"customImport": "Import of custom themes", "customImport": "Import of custom themes",
"delete": "Delete", "delete": "Delete",
"preview": "Preview",
"timeline": "Timeline Preferences", "timeline": "Timeline Preferences",
"timemode": "Time format", "timemode": "Time format",
"relativetime": "Relative format:\"1 minutes ago\",\"3 days ago\"", "relativetime": "Relative format:\"1 minutes ago\",\"3 days ago\"",

View File

@ -70,6 +70,7 @@
"name": "名前", "name": "名前",
"desc": "説明", "desc": "説明",
"customImport": "カスタムテーマのインポート", "customImport": "カスタムテーマのインポート",
"preview": "プレビュー",
"delete": "削除", "delete": "削除",
"timeline": "タイムラインの設定", "timeline": "タイムラインの設定",
"timemode": "時間表記設定", "timemode": "時間表記設定",

View File

@ -72,6 +72,7 @@
"desc": "説明", "desc": "説明",
"customImport": "カスタムテーマのインポート", "customImport": "カスタムテーマのインポート",
"delete": "削除", "delete": "削除",
"preview": "プレビュー",
"timeline": "タイムラインの設定", "timeline": "タイムラインの設定",
"timemode": "時間表記設定", "timemode": "時間表記設定",
"relativetime": "相対時間の例:\"1分前\",\"3日前\"", "relativetime": "相対時間の例:\"1分前\",\"3日前\"",

View File

@ -15,6 +15,7 @@
<link href="../../css/themes.css" type="text/css" rel="stylesheet"> <link href="../../css/themes.css" type="text/css" rel="stylesheet">
<link href="../../css/pickr.css" type="text/css" rel="stylesheet"> <link href="../../css/pickr.css" type="text/css" rel="stylesheet">
<link href="../../css/master.css" type="text/css" rel="stylesheet"> <link href="../../css/master.css" type="text/css" rel="stylesheet">
<link href="../../css/tl.css" type="text/css" rel="stylesheet">
<link href="../../css/sweetalert2-material.min.css" type="text/css" rel="stylesheet"> <link href="../../css/sweetalert2-material.min.css" type="text/css" rel="stylesheet">
<link href="../../@@node_base@@/@fortawesome/fontawesome-free/css/all.min.css" type="text/css" rel="stylesheet"> <link href="../../@@node_base@@/@fortawesome/fontawesome-free/css/all.min.css" type="text/css" rel="stylesheet">
<meta charset="utf-8"> <meta charset="utf-8">
@ -288,6 +289,7 @@
<input type="color" id="color-picker13_value"> <input type="color" id="color-picker13_value">
</div> </div>
</div><br /><br /> </div><br /><br />
<button class="btn waves-effect blue" onclick="customComp(true)">@@preview@@</button><br /><br />
<button class="btn-large waves-effect" onclick="customComp()">@@change@@</button>&nbsp;<button <button class="btn-large waves-effect" onclick="customComp()">@@change@@</button>&nbsp;<button
class="btn waves-effect red disabled" id="delTheme" onclick="deleteIt()">@@delete@@</button><br><br> class="btn waves-effect red disabled" id="delTheme" onclick="deleteIt()">@@delete@@</button><br><br>
<input type="text" style="width:22rem;height:40px;" id="custom_json" class="materialize-textarea" <input type="text" style="width:22rem;height:40px;" id="custom_json" class="materialize-textarea"
@ -296,6 +298,84 @@
<input type="text" style="width:22rem;height:40px;" id="custom_import" class="materialize-textarea" <input type="text" style="width:22rem;height:40px;" id="custom_import" class="materialize-textarea"
placeholder="JSON/JSON5 style"> placeholder="JSON/JSON5 style">
<button class="btn waves-effect" onclick="customImp()">@@import@@</button><br> <button class="btn waves-effect" onclick="customImp()">@@import@@</button><br>
<h4>@@preview@@</h4>
<div style="max-width: 500px" class="cvo">
<div class="area-notice grid"><span class="gray sharesta"><span class=" pointer big-text "><i class="fas fa-filter">
</i></span>
<span class="cbadge cbadge-hover"><i class="far fa-clock"></i>
0:00:00
</span>
<i class="big-text fas fa-star yellow-text"></i>
<a class="pointer grey-text">
TheDesk(@thedesk@b.thedesk.tld)
</a></span></div>
<div class="area-icon grid">
<a user="thedesk" class="udg">
<img draggable="false" src="../../img/desk.svg" width="40" class="prof-img" user="TheDesk"
onerror="this.src='../../img/loading.svg'" alt="" loading="lazy">
</a>
<a user="Cutls@misskey.io" class="udg">
<img draggable="false" src="../../img/desk.svg" width="20" class="notf-icon prof-img" user="TheDesk" alt=""
loading="lazy">
</a>
</div>
<div class="area-display_name grid">
<div class="flex-name">
<span class="user">TheDesk<img class="emoji" draggable="false" alt="👀" src="https://twemoji.maxcdn.com/v/13.0.2/72x72/1f440.png"></span>
<span class="sml gray" style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis; cursor:text;">
@thedesk@a.thedesk.tld <i class="fas fa-lock red-text"></i>
</span>
</div>
<div class="flex-time">
<span class="cbadge cbadge-hover pointer waves-effect">
<i class="far fa-clock"></i>0:00:00
</span>
</div>
</div>
<div class="area-toot grid">
<div class="toot ">
<p>Toot</p>
</div>
</div>
<div class="area-vis grid"><span><i class="text-darken-3 material-icons gray sml vis-data pointer">
public
</i></span></div>
<div class="area-actions grid">
<div class="action type-a ">
<a class="waves-effect waves-dark btn-flat actct rep-btn" style="padding:0">
<i class="fas fa-share"></i>
<span class="rep_ct">1</span>
</a>
</div>
<div class="action type-a ">
<a class="waves-effect waves-dark btn-flat actct bt-btn" style="padding:0">
<i class="fas fa-retweet"></i>
<span class="rt_ct">0</span>
</a>
</div>
<div class="action type-a ">
<a class="waves-effect waves-dark btn-flat actct fav-btn" style="padding:0">
<i class="fas text-darken-3 fa-star"></i>
<span class="fav_ct">1</span>
</a>
</div>
</div>
<div class="area-side">
<div class="action ">
<a onclick="toggleAction(this)" data-target="dropdown_0ugtorxe"
class="ctxMenu waves-effect waves-dark btn-flat" style="padding:0" id="trigger_0ugtorxe">
<i class="text-darken-3 material-icons act-icon" aria-hidden="true">expand_more</i>
<span class="voice">Other actions</span>
</a>
</div>
<div class="action ">
<a class="waves-effect waves-dark btn-flat details " style="padding:0">
<i class="text-darken-3 material-icons" aria-hidden="true">menu_open</i></a>
</div>
</div>
</div>
</li> </li>
<li> <li>
<div class="collapsible-header"> <div class="collapsible-header">

View File

@ -27,7 +27,7 @@
<body class=""> <body class="">
<script> <script>
var ver = '22.1.2 (Koume)' var ver = '22.1.2 (Koume)'
var gitHash = 'c35a27eda6cf3b664206cd99f2ceebdac2c086be' var gitHash = '54031da417401bf8181e0a3ee482927712eed1db'
//betaを入れるとバージョンチェックしない //betaを入れるとバージョンチェックしない
//var ver="beta"; //var ver="beta";
var acct_id = 0 var acct_id = 0

View File

@ -15,6 +15,7 @@
<link href="../../css/themes.css" type="text/css" rel="stylesheet"> <link href="../../css/themes.css" type="text/css" rel="stylesheet">
<link href="../../css/pickr.css" type="text/css" rel="stylesheet"> <link href="../../css/pickr.css" type="text/css" rel="stylesheet">
<link href="../../css/master.css" type="text/css" rel="stylesheet"> <link href="../../css/master.css" type="text/css" rel="stylesheet">
<link href="../../css/tl.css" type="text/css" rel="stylesheet">
<link href="../../css/sweetalert2-material.min.css" type="text/css" rel="stylesheet"> <link href="../../css/sweetalert2-material.min.css" type="text/css" rel="stylesheet">
<link href="../../node_modules/@fortawesome/fontawesome-free/css/all.min.css" type="text/css" rel="stylesheet"> <link href="../../node_modules/@fortawesome/fontawesome-free/css/all.min.css" type="text/css" rel="stylesheet">
<meta charset="utf-8"> <meta charset="utf-8">
@ -288,6 +289,7 @@
<input type="color" id="color-picker13_value"> <input type="color" id="color-picker13_value">
</div> </div>
</div><br /><br /> </div><br /><br />
<button class="btn waves-effect blue" onclick="customComp(true)">Preview</button><br /><br />
<button class="btn-large waves-effect" onclick="customComp()">Zmień</button>&nbsp;<button <button class="btn-large waves-effect" onclick="customComp()">Zmień</button>&nbsp;<button
class="btn waves-effect red disabled" id="delTheme" onclick="deleteIt()">Delete</button><br><br> class="btn waves-effect red disabled" id="delTheme" onclick="deleteIt()">Delete</button><br><br>
<input type="text" style="width:22rem;height:40px;" id="custom_json" class="materialize-textarea" <input type="text" style="width:22rem;height:40px;" id="custom_json" class="materialize-textarea"
@ -296,6 +298,84 @@
<input type="text" style="width:22rem;height:40px;" id="custom_import" class="materialize-textarea" <input type="text" style="width:22rem;height:40px;" id="custom_import" class="materialize-textarea"
placeholder="JSON/JSON5 style"> placeholder="JSON/JSON5 style">
<button class="btn waves-effect" onclick="customImp()">Import</button><br> <button class="btn waves-effect" onclick="customImp()">Import</button><br>
<h4>Preview</h4>
<div style="max-width: 500px" class="cvo">
<div class="area-notice grid"><span class="gray sharesta"><span class=" pointer big-text "><i class="fas fa-filter">
</i></span>
<span class="cbadge cbadge-hover"><i class="far fa-clock"></i>
0:00:00
</span>
<i class="big-text fas fa-star yellow-text"></i>
<a class="pointer grey-text">
TheDesk(@thedesk@b.thedesk.tld)
</a></span></div>
<div class="area-icon grid">
<a user="thedesk" class="udg">
<img draggable="false" src="../../img/desk.svg" width="40" class="prof-img" user="TheDesk"
onerror="this.src='../../img/loading.svg'" alt="" loading="lazy">
</a>
<a user="Cutls@misskey.io" class="udg">
<img draggable="false" src="../../img/desk.svg" width="20" class="notf-icon prof-img" user="TheDesk" alt=""
loading="lazy">
</a>
</div>
<div class="area-display_name grid">
<div class="flex-name">
<span class="user">TheDesk<img class="emoji" draggable="false" alt="👀" src="https://twemoji.maxcdn.com/v/13.0.2/72x72/1f440.png"></span>
<span class="sml gray" style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis; cursor:text;">
@thedesk@a.thedesk.tld <i class="fas fa-lock red-text"></i>
</span>
</div>
<div class="flex-time">
<span class="cbadge cbadge-hover pointer waves-effect">
<i class="far fa-clock"></i>0:00:00
</span>
</div>
</div>
<div class="area-toot grid">
<div class="toot ">
<p>Toot</p>
</div>
</div>
<div class="area-vis grid"><span><i class="text-darken-3 material-icons gray sml vis-data pointer">
public
</i></span></div>
<div class="area-actions grid">
<div class="action type-a ">
<a class="waves-effect waves-dark btn-flat actct rep-btn" style="padding:0">
<i class="fas fa-share"></i>
<span class="rep_ct">1</span>
</a>
</div>
<div class="action type-a ">
<a class="waves-effect waves-dark btn-flat actct bt-btn" style="padding:0">
<i class="fas fa-retweet"></i>
<span class="rt_ct">0</span>
</a>
</div>
<div class="action type-a ">
<a class="waves-effect waves-dark btn-flat actct fav-btn" style="padding:0">
<i class="fas text-darken-3 fa-star"></i>
<span class="fav_ct">1</span>
</a>
</div>
</div>
<div class="area-side">
<div class="action ">
<a onclick="toggleAction(this)" data-target="dropdown_0ugtorxe"
class="ctxMenu waves-effect waves-dark btn-flat" style="padding:0" id="trigger_0ugtorxe">
<i class="text-darken-3 material-icons act-icon" aria-hidden="true">expand_more</i>
<span class="voice">Other actions</span>
</a>
</div>
<div class="action ">
<a class="waves-effect waves-dark btn-flat details " style="padding:0">
<i class="text-darken-3 material-icons" aria-hidden="true">menu_open</i></a>
</div>
</div>
</div>
</li> </li>
<li> <li>
<div class="collapsible-header"> <div class="collapsible-header">
@ -610,7 +690,7 @@
style="width:100%; max-width:40rem;"><img src="../../img/desk_full.svg" class="left" width="25" style="width:100%; max-width:40rem;"><img src="../../img/desk_full.svg" class="left" width="25"
style="padding-top:5px;">Main author: Cutls@cutls.com</a> style="padding-top:5px;">Main author: Cutls@cutls.com</a>
<br> <br>
TheDesk @ <a href="https://github.com/cutls/TheDesk/commits/c35a27eda6cf3b664206cd99f2ceebdac2c086be">c35a27eda6cf3b664206cd99f2ceebdac2c086be</a> - <a TheDesk @ <a href="https://github.com/cutls/TheDesk/commits/54031da417401bf8181e0a3ee482927712eed1db">54031da417401bf8181e0a3ee482927712eed1db</a> - <a
onclick="checkupd(); return localStorage.removeItem('new-ver-skip'); location.href='index.html';" onclick="checkupd(); return localStorage.removeItem('new-ver-skip'); location.href='index.html';"
class="pointer pwa">Sprawdź aktualizacje</a><br> class="pointer pwa">Sprawdź aktualizacje</a><br>
<br> <br>
@ -620,7 +700,7 @@
<img src="https://status.cutls.com/badge-service?site=thedesk.top"> <img src="https://status.cutls.com/badge-service?site=thedesk.top">
</a><br> </a><br>
<h5>OSS License</h5> <h5>OSS License</h5>
<a href="https://app.fossa.com/projects/git%2Bgithub.com%2Fcutls%2FTheDesk/refs/branch/master/c35a27eda6cf3b664206cd99f2ceebdac2c086be" <a href="https://app.fossa.com/projects/git%2Bgithub.com%2Fcutls%2FTheDesk/refs/branch/master/54031da417401bf8181e0a3ee482927712eed1db"
alt="FOSSA Status"><img alt="FOSSA Status"><img
src="https://app.fossa.com/api/projects/git%2Bgithub.com%2Fcutls%2FTheDesk.svg?type=small" /></a> src="https://app.fossa.com/api/projects/git%2Bgithub.com%2Fcutls%2FTheDesk.svg?type=small" /></a>
<br> <br>