From 4d0fbe2343513cfe32ab687b5eda3fe784bc4e86 Mon Sep 17 00:00:00 2001 From: Greyson Parrelli Date: Tue, 30 Jan 2024 12:07:33 -0500 Subject: [PATCH] Add a dark theme for spinner. --- .../securesms/SpinnerApplicationContext.kt | 14 +++- .../database/AttachmentTransformer.kt | 29 ++++++++ spinner/lib/src/main/assets/css/main.css | 67 +++++++++++++++++-- spinner/lib/src/main/assets/js/main.js | 15 +++++ .../lib/src/main/assets/partials/prefix.hbs | 2 + spinner/lib/src/main/assets/query.hbs | 13 ++-- 6 files changed, 131 insertions(+), 9 deletions(-) create mode 100644 app/src/spinner/java/org/thoughtcrime/securesms/database/AttachmentTransformer.kt diff --git a/app/src/spinner/java/org/thoughtcrime/securesms/SpinnerApplicationContext.kt b/app/src/spinner/java/org/thoughtcrime/securesms/SpinnerApplicationContext.kt index 59ba3738a3..166496b7b0 100644 --- a/app/src/spinner/java/org/thoughtcrime/securesms/SpinnerApplicationContext.kt +++ b/app/src/spinner/java/org/thoughtcrime/securesms/SpinnerApplicationContext.kt @@ -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 }), diff --git a/app/src/spinner/java/org/thoughtcrime/securesms/database/AttachmentTransformer.kt b/app/src/spinner/java/org/thoughtcrime/securesms/database/AttachmentTransformer.kt new file mode 100644 index 0000000000..3be66dc54f --- /dev/null +++ b/app/src/spinner/java/org/thoughtcrime/securesms/database/AttachmentTransformer.kt @@ -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)" + } +} diff --git a/spinner/lib/src/main/assets/css/main.css b/spinner/lib/src/main/assets/css/main.css index e5b52b8bba..b84bbfeba8 100644 --- a/spinner/lib/src/main/assets/css/main.css +++ b/spinner/lib/src/main/assets/css/main.css @@ -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; } \ No newline at end of file diff --git a/spinner/lib/src/main/assets/js/main.js b/spinner/lib/src/main/assets/js/main.js index 6d4f559b0d..feeb1e0f35 100644 --- a/spinner/lib/src/main/assets/js/main.js +++ b/spinner/lib/src/main/assets/js/main.js @@ -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); + } } diff --git a/spinner/lib/src/main/assets/partials/prefix.hbs b/spinner/lib/src/main/assets/partials/prefix.hbs index 1242fe2a99..b1480ccee1 100644 --- a/spinner/lib/src/main/assets/partials/prefix.hbs +++ b/spinner/lib/src/main/assets/partials/prefix.hbs @@ -13,6 +13,8 @@ Download Trace: Link + +
diff --git a/spinner/lib/src/main/assets/query.hbs b/spinner/lib/src/main/assets/query.hbs index 441cdc09d3..6e87f52fb3 100644 --- a/spinner/lib/src/main/assets/query.hbs +++ b/spinner/lib/src/main/assets/query.hbs @@ -54,9 +54,10 @@ {{> partials/suffix}} - - - + + + +