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;
line-height: 100%;
}
.swal2-close:focus {
background-color: inherit !important;
box-shadow: none !important;
}
.swal2-actions {
background-color: var(--modalfooter);
}
#src-contents svg {
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')
ipc.send('itunes', e.data[1])
} 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') {
ipc.send('custom-css-request', e.data[1])
} else if (e.data[0] == 'downloadButton') {

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -15,6 +15,7 @@
<link href="../../css/themes.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/tl.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">
<meta charset="utf-8">
@ -288,6 +289,7 @@
<input type="color" id="color-picker13_value">
</div>
</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
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"
@ -296,6 +298,84 @@
<input type="text" style="width:22rem;height:40px;" id="custom_import" class="materialize-textarea"
placeholder="JSON/JSON5 style">
<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>
<div class="collapsible-header">

View File

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

View File

@ -15,6 +15,7 @@
<link href="../../css/themes.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/tl.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">
<meta charset="utf-8">
@ -288,6 +289,7 @@
<input type="color" id="color-picker13_value">
</div>
</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
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"
@ -296,6 +298,84 @@
<input type="text" style="width:22rem;height:40px;" id="custom_import" class="materialize-textarea"
placeholder="JSON/JSON5 style">
<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>
<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="padding-top:5px;">Main author: Cutls@cutls.com</a>
<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';"
class="pointer pwa">Sprawdź aktualizacje</a><br>
<br>
@ -620,7 +700,7 @@
<img src="https://status.cutls.com/badge-service?site=thedesk.top">
</a><br>
<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
src="https://app.fossa.com/api/projects/git%2Bgithub.com%2Fcutls%2FTheDesk.svg?type=small" /></a>
<br>