Initial stab at fixing dark mode. Navigation and main colors are now better. Laid the groundwork for theme-based assets and fixed loading spinners for dark mode.

2024-11-23 22:10:59 +01:00 · 2022-12-03 22:02:37 +00:00 · 2022-12-03 22:02:37 +00:00 · 17291b0cb2
commit 17291b0cb2
parent df08de1339
38 changed files with 59 additions and 52 deletions
--- a/bemani/frontend/app.py
+++ b/bemani/frontend/app.py
@ -374,6 +374,7 @@ def navigation() -> Dict[str, Any]:
            return {
                "components": components,
                "any": jinja2_any,
+                "assets": f"themes/{config.theme}/",
                "theme_url": jinja2_theme,
                "cache_bust": f"v={FRONTEND_CACHE_BUST}",
            }
@ -384,6 +385,7 @@ def navigation() -> Dict[str, Any]:
        return {
            "components": components,
            "any": jinja2_any,
+            "assets": f"themes/{config.theme}/",
            "theme_url": jinja2_theme,
            "cache_bust": f"v={FRONTEND_CACHE_BUST}",
        }
@ -938,6 +940,7 @@ def navigation() -> Dict[str, Any]:
        "navigation": pages,
        "components": components,
        "any": jinja2_any,
+        "assets": f"themes/{config.theme}/",
        "theme_url": jinja2_theme,
        "cache_bust": f"v={FRONTEND_CACHE_BUST}",
    }
--- a/bemani/frontend/static/components/add.react.js
+++ b/bemani/frontend/static/components/add.react.js
@ -5,6 +5,7 @@ var Add = createReactClass({
        return (
            <Button
                className="add"
+                style={this.props.style}
                disabled={this.props.disabled}
                onClick={function(event) {
                    this.props.onClick(event);
--- a/bemani/frontend/static/components/delete.react.js
+++ b/bemani/frontend/static/components/delete.react.js
@ -5,6 +5,7 @@ var Delete = createReactClass({
        return (
            <Button
                className="delete"
+                style={this.props.style}
                disabled={this.props.disabled}
                onClick={function(event) {
                    this.props.onClick(event);
--- a/bemani/frontend/static/components/edit.react.js
+++ b/bemani/frontend/static/components/edit.react.js
@ -5,6 +5,7 @@ var Edit = createReactClass({
        return (
            <Button
                className="edit"
+                style={this.props.style}
                disabled={this.props.disabled}
                onClick={function(event) {
                    this.props.onClick(event);
--- a/bemani/frontend/static/components/gamesettings.react.js
+++ b/bemani/frontend/static/components/gamesettings.react.js
@ -195,7 +195,7 @@ var GameSettings = createReactClass({
                        }.bind(this)}
                    />
                    { this.state.settings_saving[this.state.current_setting] ?
-                        <img className="loading" src={Link.get('static', 'loading-16.gif')} /> :
+                        <img className="loading" src={Link.get('static', window.assets + 'loading-16.gif')} /> :
                        null
                    }
                    { this.state.settings_saved[this.state.current_setting] ?
--- a/bemani/frontend/static/components/table.react.js
+++ b/bemani/frontend/static/components/table.react.js
@ -139,7 +139,7 @@ var Table = createReactClass({
                                        <span className="loading" style={ {float: 'right' } }>
                                            <img
                                                className="loading"
-                                                src={Link.get('static', 'loading-16.gif')}
+                                                src={Link.get('static', window.assets + 'loading-16.gif')}
                                            /> loading more data...
                                        </span> : null
                                }
--- a/bemani/frontend/static/controllers/admin/api.react.js
+++ b/bemani/frontend/static/controllers/admin/api.react.js
@ -369,7 +369,7 @@ var api_management = createReactClass({
        if (this.state.info[server.id].loading) {
            return (
                <>
-                     <img className="loading" src={Link.get('static', 'loading-16.gif')} />
+                     <img className="loading" src={Link.get('static', window.assets + 'loading-16.gif')} />
                     {' querying server for info...'}
                 </>
             );
--- a/bemani/frontend/static/controllers/admin/users.react.js
+++ b/bemani/frontend/static/controllers/admin/users.react.js
@ -90,7 +90,7 @@ var card_management = createReactClass({
                        />
                        <input type="submit" value="search" />
                        { this.state.searching ?
-                            <img className="loading" src={Link.get('static', 'loading-16.gif')} /> :
+                            <img className="loading" src={Link.get('static', window.assets + 'loading-16.gif')} /> :
                            null
                        }
                    </form>
--- a/bemani/frontend/static/controllers/arcade/arcade.react.js
+++ b/bemani/frontend/static/controllers/arcade/arcade.react.js
@ -542,7 +542,7 @@ var arcade_management = createReactClass({
                        <>
                            PASELI Enabled
                            { this.state.paseli_enabled_saving ?
-                                <img className="loading" src={Link.get('static', 'loading-16.gif')} /> :
+                                <img className="loading" src={Link.get('static', window.assets + 'loading-16.gif')} /> :
                                null
                            }
                        </>
@ -561,7 +561,7 @@ var arcade_management = createReactClass({
                        <>
                            PASELI Infinite
                            { this.state.paseli_infinite_saving ?
-                                <img className="loading" src={Link.get('static', 'loading-16.gif')} /> :
+                                <img className="loading" src={Link.get('static', window.assets + 'loading-16.gif')} /> :
                                null
                            }
                        </>
@ -580,7 +580,7 @@ var arcade_management = createReactClass({
                        <>
                            Mask Web Address
                            { this.state.mask_services_url_saving ?
-                                <img className="loading" src={Link.get('static', 'loading-16.gif')} /> :
+                                <img className="loading" src={Link.get('static', window.assets + 'loading-16.gif')} /> :
                                null
                            }
                        </>
--- a/bemani/frontend/static/controllers/ddr/rivals.react.js
+++ b/bemani/frontend/static/controllers/ddr/rivals.react.js
@ -216,7 +216,7 @@ var rivals_view = createReactClass({
                            />
                            <input type="submit" value="search" />
                            { this.state.searching ?
-                                <img className="loading" src={Link.get('static', 'loading-16.gif')} /> :
+                                <img className="loading" src={Link.get('static', window.assets + 'loading-16.gif')} /> :
                                null
                            }
                        </form>
--- a/bemani/frontend/static/controllers/ddr/scores.react.js
+++ b/bemani/frontend/static/controllers/ddr/scores.react.js
@ -151,7 +151,7 @@ var network_scores = createReactClass({
                                        <span className="loading" style={ {float: 'right' } }>
                                            <img
                                                className="loading"
-                                                src={Link.get('static', 'loading-16.gif')}
+                                                src={Link.get('static', window.assets + 'loading-16.gif')}
                                            /> loading more scores...
                                        </span> : null
                                }
--- a/bemani/frontend/static/controllers/ddr/settings.react.js
+++ b/bemani/frontend/static/controllers/ddr/settings.react.js
@ -323,7 +323,7 @@ var settings_view = createReactClass({
                            <>
                                Fast/Slow Display
                                { this.state.saving_early_late ?
-                                    <img className="loading" src={Link.get('static', 'loading-16.gif')} /> :
+                                    <img className="loading" src={Link.get('static', window.assets + 'loading-16.gif')} /> :
                                    null
                                }
                            </>
@ -342,7 +342,7 @@ var settings_view = createReactClass({
                            <>
                                Combo Position
                                { this.state.saving_background_combo ?
-                                    <img className="loading" src={Link.get('static', 'loading-16.gif')} /> :
+                                    <img className="loading" src={Link.get('static', window.assets + 'loading-16.gif')} /> :
                                    null
                                }
                            </>
@ -395,7 +395,7 @@ var settings_view = createReactClass({
                                }.bind(this)}
                            />
                            { this.state.options_saving[this.state.version] ?
-                                <img className="loading" src={Link.get('static', 'loading-16.gif')} /> :
+                                <img className="loading" src={Link.get('static', window.assets + 'loading-16.gif')} /> :
                                null
                            }
                            { this.state.options_saved[this.state.version] ?
--- a/bemani/frontend/static/controllers/iidx/player.react.js
+++ b/bemani/frontend/static/controllers/iidx/player.react.js
@ -163,7 +163,7 @@ var profile_view = createReactClass({
                                />
                            }
                            { this.state.updating_rivals ?
-                                <img className="loading" src={Link.get('static', 'loading-16.gif')} /> : null
+                                <img className="loading" src={Link.get('static', window.assets + 'loading-16.gif')} /> : null
                            }
                        </div>
                    }
--- a/bemani/frontend/static/controllers/iidx/rivals.react.js
+++ b/bemani/frontend/static/controllers/iidx/rivals.react.js
@ -191,7 +191,7 @@ var rivals_view = createReactClass({
                            />
                            <input type="submit" value="search" />
                            { this.state.searching ?
-                                <img className="loading" src={Link.get('static', 'loading-16.gif')} /> :
+                                <img className="loading" src={Link.get('static', window.assets + 'loading-16.gif')} /> :
                                null
                            }
                        </form>
--- a/bemani/frontend/static/controllers/iidx/scores.react.js
+++ b/bemani/frontend/static/controllers/iidx/scores.react.js
@ -173,7 +173,7 @@ var network_scores = createReactClass({
                                        <span className="loading" style={ {float: 'right' } }>
                                            <img
                                                className="loading"
-                                                src={Link.get('static', 'loading-16.gif')}
+                                                src={Link.get('static', window.assets + 'loading-16.gif')}
                                            /> loading more scores...
                                        </span> : null
                                }
--- a/bemani/frontend/static/controllers/iidx/settings.react.js
+++ b/bemani/frontend/static/controllers/iidx/settings.react.js
@ -452,7 +452,7 @@ var settings_view = createReactClass({
                            }.bind(this)}
                        />
                        { this.state.qpro_saving[this.state.version] ?
-                            <img className="loading" src={Link.get('static', 'loading-16.gif')} /> :
+                            <img className="loading" src={Link.get('static', window.assets + 'loading-16.gif')} /> :
                            null
                        }
                        { this.state.qpro_saved[this.state.version] ?
@ -494,7 +494,7 @@ var settings_view = createReactClass({
                            }.bind(this)}
                        />
                        { this.state.theme_saving[this.state.version] ?
-                            <img className="loading" src={Link.get('static', 'loading-16.gif')} /> :
+                            <img className="loading" src={Link.get('static', window.assets + 'loading-16.gif')} /> :
                            null
                        }
                        { this.state.theme_saved[this.state.version] ?
@ -534,7 +534,7 @@ var settings_view = createReactClass({
                            }.bind(this)}
                        />
                        { this.state.menu_saving[this.state.version] ?
-                            <img className="loading" src={Link.get('static', 'loading-16.gif')} /> :
+                            <img className="loading" src={Link.get('static', window.assets + 'loading-16.gif')} /> :
                            null
                        }
                        { this.state.menu_saved[this.state.version] ?
--- a/bemani/frontend/static/controllers/jubeat/rivals.react.js
+++ b/bemani/frontend/static/controllers/jubeat/rivals.react.js
@ -175,7 +175,7 @@ var rivals_view = createReactClass({
                            />
                            <input type="submit" value="search" />
                            { this.state.searching ?
-                                <img className="loading" src={Link.get('static', 'loading-16.gif')} /> :
+                                <img className="loading" src={Link.get('static', window.assets + 'loading-16.gif')} /> :
                                null
                            }
                        </form>
--- a/bemani/frontend/static/controllers/jubeat/scores.react.js
+++ b/bemani/frontend/static/controllers/jubeat/scores.react.js
@ -169,7 +169,7 @@ var network_scores = createReactClass({
                                        <span className="loading" style={ {float: 'right' } }>
                                            <img
                                                className="loading"
-                                                src={Link.get('static', 'loading-16.gif')}
+                                                src={Link.get('static', window.assets + 'loading-16.gif')}
                                            /> loading more scores...
                                        </span> : null
                                }
--- a/bemani/frontend/static/controllers/jubeat/settings.react.js
+++ b/bemani/frontend/static/controllers/jubeat/settings.react.js
@ -246,7 +246,7 @@ var settings_view = createReactClass({
                    }.bind(this)}
                />
                { this.state.emblem_saving[this.state.version] ?
-                    <img className="loading" src={Link.get('static', 'loading-16.gif')} /> :
+                    <img className="loading" src={Link.get('static', window.assets + 'loading-16.gif')} /> :
                    null
                }
                { this.state.emblem_saved[this.state.version] ?
--- a/bemani/frontend/static/controllers/museca/scores.react.js
+++ b/bemani/frontend/static/controllers/museca/scores.react.js
@ -160,7 +160,7 @@ var network_scores = createReactClass({
                                        <span className="loading" style={ {float: 'right' } }>
                                            <img
                                                className="loading"
-                                                src={Link.get('static', 'loading-16.gif')}
+                                                src={Link.get('static', window.assets + 'loading-16.gif')}
                                            /> loading more scores...
                                        </span> : null
                                }
--- a/bemani/frontend/static/controllers/popn/rivals.react.js
+++ b/bemani/frontend/static/controllers/popn/rivals.react.js
@ -225,7 +225,7 @@ var rivals_view = createReactClass({
                            />
                            <input type="submit" value="search" />
                            { this.state.searching_name ?
-                                <img className="loading" src={Link.get('static', 'loading-16.gif')} /> :
+                                <img className="loading" src={Link.get('static', window.assets + 'loading-16.gif')} /> :
                                null
                            }
                        </form>
@ -255,7 +255,7 @@ var rivals_view = createReactClass({
                            />
                            <input type="submit" value="search" />
                            { this.state.searching_id ?
-                                <img className="loading" src={Link.get('static', 'loading-16.gif')} /> :
+                                <img className="loading" src={Link.get('static', window.assets + 'loading-16.gif')} /> :
                                null
                            }
                        </form>
--- a/bemani/frontend/static/controllers/popn/scores.react.js
+++ b/bemani/frontend/static/controllers/popn/scores.react.js
@ -169,7 +169,7 @@ var network_scores = createReactClass({
                                        <span className="loading" style={ {float: 'right' } }>
                                            <img
                                                className="loading"
-                                                src={Link.get('static', 'loading-16.gif')}
+                                                src={Link.get('static', window.assets + 'loading-16.gif')}
                                            /> loading more scores...
                                        </span> : null
                                }
--- a/bemani/frontend/static/controllers/reflec/rivals.react.js
+++ b/bemani/frontend/static/controllers/reflec/rivals.react.js
@ -273,7 +273,7 @@ var rivals_view = createReactClass({
                            />
                            <input type="submit" value="search" />
                            { this.state.searching_name ?
-                                <img className="loading" src={Link.get('static', 'loading-16.gif')} /> :
+                                <img className="loading" src={Link.get('static', window.assets + 'loading-16.gif')} /> :
                                null
                            }
                        </form>
@ -301,7 +301,7 @@ var rivals_view = createReactClass({
                            />
                            <input type="submit" value="search" />
                            { this.state.searching_id ?
-                                <img className="loading" src={Link.get('static', 'loading-16.gif')} /> :
+                                <img className="loading" src={Link.get('static', window.assets + 'loading-16.gif')} /> :
                                null
                            }
                        </form>
--- a/bemani/frontend/static/controllers/reflec/scores.react.js
+++ b/bemani/frontend/static/controllers/reflec/scores.react.js
@ -164,7 +164,7 @@ var network_scores = createReactClass({
                                        <span className="loading" style={ {float: 'right' } }>
                                            <img
                                                className="loading"
-                                                src={Link.get('static', 'loading-16.gif')}
+                                                src={Link.get('static', window.assets + 'loading-16.gif')}
                                            /> loading more scores...
                                        </span> : null
                                }
--- a/bemani/frontend/static/controllers/sdvx/rivals.react.js
+++ b/bemani/frontend/static/controllers/sdvx/rivals.react.js
@ -181,7 +181,7 @@ var rivals_view = createReactClass({
                            />
                            <input type="submit" value="search" />
                            { this.state.searching ?
-                                <img className="loading" src={Link.get('static', 'loading-16.gif')} /> :
+                                <img className="loading" src={Link.get('static', window.assets + 'loading-16.gif')} /> :
                                null
                            }
                        </form>
--- a/bemani/frontend/static/controllers/sdvx/scores.react.js
+++ b/bemani/frontend/static/controllers/sdvx/scores.react.js
@ -153,7 +153,7 @@ var network_scores = createReactClass({
                                        <span className="loading" style={ {float: 'right' } }>
                                            <img
                                                className="loading"
-                                                src={Link.get('static', 'loading-16.gif')}
+                                                src={Link.get('static', window.assets + 'loading-16.gif')}
                                            /> loading more scores...
                                        </span> : null
                                }
--- a/bemani/frontend/static/loading-16.gif
+++ b/bemani/frontend/static/loading-16.gif
--- a/bemani/frontend/static/loading-20.gif
+++ b/bemani/frontend/static/loading-20.gif
--- a/bemani/frontend/static/themes/dark/form.css
+++ b/bemani/frontend/static/themes/dark/form.css
@ -46,14 +46,14 @@ div.buttons {

 input[type="submit"] {
    border: 1px solid #19480a;
-	color: #242526;
+    color: #242526;
    background: #49B979;
    margin-right: 5px;
 }

 input[type="button"], button.nav, button.toggle, button.edit, button.add, button.viewmore, button.btn-default {
    border: 1px solid #6a6a6a;
-	color: #b0b1b2;
+    color: #b0b1b2;
    background: #282828;
    margin-right: 5px;
 }
@ -71,17 +71,17 @@ input[type="text"], input[type="password"], textarea {
    border: 1px solid #6a6a6a;
    padding: 4px;
    border-radius: 0px;
-	background-color: #b3b4b5;
+    background-color: #1f1f1f;
 }

 select {
    border: 1px solid #6a6a6a;
    padding: 4px 4px 3px 4px;
    border-radius: 0px;
-	background: #b3b4b5;
+    background: #1f1f1f;
 }
 input {
-	#b3b4b5
+    #1f1f1f
 }

 input[type="button"] {
@ -95,9 +95,9 @@ button.toggle:not(:last-child):not(:only-child), button.edit:not(:last-child):no
 span + button.edit, span + button.toggle, span + button.delete, span + button.add,
 div + button.edit, div + button.toggle, div + button.delete, div + button.add {
    margin-left: 15px;
-	border: 1px solid #6a6a6a;
+    border: 1px solid #6a6a6a;
    background-color: #282828;
-	color: #b3b3b3;
+    color: #cecece;
 }

 button.nav {
@ -125,8 +125,8 @@ button.active {
 }

 button {
-	color: #b3b3b3;
-	background-color: #282828;
+    color: #cecece;
+    background-color: #282828;
 }

 button.delete {
--- a/bemani/frontend/static/themes/dark/loading-16.gif
+++ b/bemani/frontend/static/themes/dark/loading-16.gif
--- a/bemani/frontend/static/themes/dark/loading-24.gif
+++ b/bemani/frontend/static/themes/dark/loading-24.gif
--- a/bemani/frontend/static/themes/dark/site.css
+++ b/bemani/frontend/static/themes/dark/site.css
@ -1,6 +1,6 @@
 body {
    font-family: Helvetica;
-    color: #b3b3b3;
+    color: #cecece;
    margin: 0px;
    padding-bottom: 30px;
    background-color: #121212;
@ -29,11 +29,11 @@ div.container {
 div.loading {
    margin-left: 50%;
    margin-right: 50%;
-    height: 20px;
+    height: 24px;
 }

 div.navigation {
-    background-color: #b3b4b5;
+    background-color: #1f1f1f;
    padding-left: 10px;
    padding-right: 10px;
 }
@ -124,7 +124,7 @@ ul.navigation {
    padding-left: 10px;
    padding-right: 10px;
    margin: 0px;
-    background-color: #b3b4b5;
+    background-color: #1f1f1f;
    position: relative;
    text-align: right;
    -webkit-touch-callout: none;
@ -144,7 +144,7 @@ ul.navigation li {
 ul.navigation_sub {
    display: none;
    position: absolute;
-    background-color: #e4e4e4;
+    background-color: #2d2d2d;
    padding: 10px;
    margin: 0;
    padding: 0;
@ -186,15 +186,15 @@ ul.navigation li a {
    display: block;
    text-decoration: none;
    padding: 10px;
-    color: #121212;
+    color: #b5b5b5;
 }

 ul.navigation li a:hover {
-    background-color: #d2d2d2;
+    background-color: #343434;
 }

 ul.navigation li a:active {
-    background-color: #d2d2d2;
+    background-color: #343434;
 }

 ul.navigation > li > a.current {
--- a/bemani/frontend/static/themes/dark/table.css
+++ b/bemani/frontend/static/themes/dark/table.css
@ -20,7 +20,7 @@ table.list th {
 }

 table.list th.action {
-    background-color: #b3b4b5;
+    background-color: #1f1f1f;
    border: none;
 }

@ -63,7 +63,7 @@ table.list tbody tr:nth-child(even) td {
 }

 table td.subheader {
-    background-color: #b3b4b5 ! important;
+    background-color: #1f1f1f ! important;
    font-weight: bold;
 }

@ -102,7 +102,7 @@ table.records a, table.attempts a, table.topscores a, table.players a, table.jub
 }

 td.edit {
-    background-color: #b3b4b5 ! important;
+    background-color: #1f1f1f ! important;
    border: none ! important;
 }

--- a/bemani/frontend/static/themes/default/loading-16.gif
+++ b/bemani/frontend/static/themes/default/loading-16.gif
--- a/bemani/frontend/static/themes/default/loading-24.gif
+++ b/bemani/frontend/static/themes/default/loading-24.gif
--- a/bemani/frontend/static/themes/default/site.css
+++ b/bemani/frontend/static/themes/default/site.css
@ -23,7 +23,7 @@ div.container {
 div.loading {
    margin-left: 50%;
    margin-right: 50%;
-    height: 20px;
+    height: 24px;
 }

 div.navigation {
--- a/bemani/frontend/templates/base.html
+++ b/bemani/frontend/templates/base.html
@ -150,6 +150,7 @@
                    window.{{name}} = {{ val|tojson|safe }};
                {% endfor %}
            {% endif %}
+            window.assets = {{ assets|tojson|safe }};
        </script>
        <script type="text/javascript">
            $(function () {
--- a/bemani/frontend/templates/react.html
+++ b/bemani/frontend/templates/react.html
@ -5,7 +5,7 @@
 {% block content %}
    <div id="content">
        <div class="loading">
-            <img src="{{ url_for('static', filename='loading-20.gif') }}" />
+            <img src="{{ url_for('static', filename=assets + 'loading-24.gif') }}" />
        </div>
    </div>
 {% endblock %}