Add a dark theme for spinner.
This commit is contained in:
parent
1d5e108cd4
commit
4d0fbe2343
6 changed files with 131 additions and 9 deletions
|
@ -7,6 +7,7 @@ import org.signal.core.util.logging.Log
|
|||
import org.signal.spinner.Spinner
|
||||
import org.signal.spinner.Spinner.DatabaseConfig
|
||||
import org.signal.spinner.SpinnerLogger
|
||||
import org.thoughtcrime.securesms.database.AttachmentTransformer
|
||||
import org.thoughtcrime.securesms.database.DatabaseMonitor
|
||||
import org.thoughtcrime.securesms.database.GV2Transformer
|
||||
import org.thoughtcrime.securesms.database.GV2UpdateTransformer
|
||||
|
@ -58,7 +59,18 @@ class SpinnerApplicationContext : ApplicationContext() {
|
|||
linkedMapOf(
|
||||
"signal" to DatabaseConfig(
|
||||
db = { SignalDatabase.rawDatabase },
|
||||
columnTransformers = listOf(MessageBitmaskColumnTransformer, GV2Transformer, GV2UpdateTransformer, IsStoryTransformer, TimestampTransformer, ProfileKeyCredentialTransformer, MessageRangesTransformer, KyberKeyTransformer, RecipientTransformer)
|
||||
columnTransformers = listOf(
|
||||
MessageBitmaskColumnTransformer,
|
||||
GV2Transformer,
|
||||
GV2UpdateTransformer,
|
||||
IsStoryTransformer,
|
||||
TimestampTransformer,
|
||||
ProfileKeyCredentialTransformer,
|
||||
MessageRangesTransformer,
|
||||
KyberKeyTransformer,
|
||||
RecipientTransformer,
|
||||
AttachmentTransformer
|
||||
)
|
||||
),
|
||||
"jobmanager" to DatabaseConfig(db = { JobDatabase.getInstance(this).sqlCipherDatabase }, columnTransformers = listOf(TimestampTransformer)),
|
||||
"keyvalue" to DatabaseConfig(db = { KeyValueDatabase.getInstance(this).sqlCipherDatabase }),
|
||||
|
|
|
@ -0,0 +1,29 @@
|
|||
/*
|
||||
* Copyright 2024 Signal Messenger, LLC
|
||||
* SPDX-License-Identifier: AGPL-3.0-only
|
||||
*/
|
||||
|
||||
package org.thoughtcrime.securesms.database
|
||||
|
||||
import android.database.Cursor
|
||||
import org.signal.core.util.requireInt
|
||||
import org.signal.spinner.ColumnTransformer
|
||||
|
||||
object AttachmentTransformer : ColumnTransformer {
|
||||
override fun matches(tableName: String?, columnName: String): Boolean {
|
||||
return (tableName == AttachmentTable.TABLE_NAME || tableName == null) && columnName == AttachmentTable.TRANSFER_STATE
|
||||
}
|
||||
|
||||
override fun transform(tableName: String?, columnName: String, cursor: Cursor): String? {
|
||||
val value = cursor.requireInt(columnName)
|
||||
val string = when (value) {
|
||||
AttachmentTable.TRANSFER_PROGRESS_DONE -> "DONE"
|
||||
AttachmentTable.TRANSFER_PROGRESS_PENDING -> "PENDING"
|
||||
AttachmentTable.TRANSFER_PROGRESS_FAILED -> "FAILED"
|
||||
AttachmentTable.TRANSFER_PROGRESS_STARTED -> "STARTED"
|
||||
AttachmentTable.TRANSFER_PROGRESS_PERMANENT_FAILURE -> "PERMANENT_FAILURE"
|
||||
else -> "UNKNOWN"
|
||||
}
|
||||
return "$string ($value)"
|
||||
}
|
||||
}
|
|
@ -1,8 +1,46 @@
|
|||
:root {
|
||||
--background-color: #fff;
|
||||
--table-header-background-color: #f0f0f0;
|
||||
--text-color: #000;
|
||||
--border-color: #000;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #333;
|
||||
--table-header-background-color: #444;
|
||||
--text-color: #fff;
|
||||
--border-color: #888;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #aaf;
|
||||
}
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
--background-color: #333;
|
||||
--table-header-background-color: #444;
|
||||
--text-color: #fff;
|
||||
--border-color: #888;
|
||||
|
||||
a {
|
||||
color: #aaf;
|
||||
}
|
||||
}
|
||||
|
||||
html, body {
|
||||
font-family: 'Roboto Mono', monospace;
|
||||
font-variant-ligatures: none;
|
||||
font-size: 12px;
|
||||
width: 100%;
|
||||
background: var(--background-color);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
select, input, button {
|
||||
|
@ -20,9 +58,24 @@ table, th, td {
|
|||
color: #000;
|
||||
}
|
||||
|
||||
.handsontable th {
|
||||
color: var(--text-color);
|
||||
background: var(--table-header-background-color);
|
||||
}
|
||||
|
||||
.handsontable thead th.ht__highlight {
|
||||
color: var(--text-color);
|
||||
background: var(--table-header-background-color);
|
||||
}
|
||||
|
||||
.handsontable td {
|
||||
color: var(--text-color);
|
||||
background: var(--background-color);
|
||||
}
|
||||
|
||||
.query-input {
|
||||
width: calc(100% - 18px);
|
||||
border: 1px solid black;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 4px;
|
||||
height: 200px;
|
||||
margin-bottom: 2px;
|
||||
|
@ -42,18 +95,18 @@ ol.tabs {
|
|||
list-style-type: none;
|
||||
display: inline-block;
|
||||
padding: 8px;
|
||||
border-bottom: 1px solid black;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.tabs li.active {
|
||||
border: 1px solid black;
|
||||
border: 1px solid var(--border-color);
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.tabs a {
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.collapse-header {
|
||||
|
@ -101,4 +154,10 @@ table.device-info, table.device-info tr, table.device-info td {
|
|||
width: calc(100% - 18px);
|
||||
height: 0.75rem;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
#theme-toggle {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
}
|
|
@ -17,6 +17,21 @@ function init() {
|
|||
if (typeof Handsontable !== 'undefined') {
|
||||
Handsontable.renderers.registerRenderer('nullRenderer', nullRenderer)
|
||||
}
|
||||
|
||||
document.querySelector('#theme-toggle').onclick = function() {
|
||||
if (document.body.getAttribute('data-theme') === 'dark') {
|
||||
document.body.removeAttribute('data-theme');
|
||||
localStorage.removeItem('theme');
|
||||
} else {
|
||||
document.body.setAttribute('data-theme', 'dark');
|
||||
localStorage.setItem('theme', 'dark');
|
||||
}
|
||||
}
|
||||
|
||||
const savedTheme = localStorage.getItem('theme');
|
||||
if (savedTheme) {
|
||||
document.body.setAttribute('data-theme', savedTheme);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
@ -13,6 +13,8 @@
|
|||
Download Trace: <a href="/trace">Link</a>
|
||||
</div>
|
||||
|
||||
<button id="theme-toggle">Toggle theme</button>
|
||||
|
||||
<br />
|
||||
|
||||
<div>
|
||||
|
|
|
@ -54,9 +54,10 @@
|
|||
{{> partials/suffix}}
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/sql-formatter/4.0.2/sql-formatter.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.20.0/ace.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.20.0/mode-sql.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.20.0/theme-github.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.32.5/ace.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.32.5/mode-sql.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.32.5/theme-github.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.32.5/theme-github_dark.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<script type="text/javascript">
|
||||
let editor;
|
||||
|
||||
|
@ -67,7 +68,7 @@
|
|||
|
||||
editor = ace.edit(document.querySelector('.query-input'), {
|
||||
mode: 'ace/mode/sql',
|
||||
theme: 'ace/theme/github',
|
||||
theme: isDarkTheme() ? 'ace/theme/github_dark' : 'ace/theme/github',
|
||||
selectionStyle: 'text',
|
||||
showPrintMargin: false
|
||||
});
|
||||
|
@ -187,6 +188,10 @@
|
|||
return JSON.parse(historyRaw);
|
||||
}
|
||||
|
||||
function isDarkTheme() {
|
||||
return document.body.getAttribute('data-theme') === 'dark'
|
||||
}
|
||||
|
||||
main();
|
||||
|
||||
</script>
|
||||
|
|
Loading…
Add table
Reference in a new issue