Add a dark theme for spinner.

This commit is contained in:
Greyson Parrelli 2024-01-30 12:07:33 -05:00 committed by Nicholas Tinsley
parent 1d5e108cd4
commit 4d0fbe2343
6 changed files with 131 additions and 9 deletions

View file

@ -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 }),

View file

@ -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)"
}
}

View file

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

View file

@ -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);
}
}

View file

@ -13,6 +13,8 @@
Download Trace: <a href="/trace">Link</a>
</div>
<button id="theme-toggle">Toggle theme</button>
<br />
<div>

View file

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