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

@@ -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>