github.com/kyleu/dbaudit@v0.0.2-0.20240321155047-ff2f2c940496/views/vtheme/Editor.html (about)

     1  <!-- Content managed by Project Forge, see [projectforge.md] for details. -->
     2  {% import (
     3    "github.com/kyleu/dbaudit/app"
     4    "github.com/kyleu/dbaudit/app/controller/cutil"
     5    "github.com/kyleu/dbaudit/app/lib/theme"
     6  ) %}
     7  
     8  {% func Editor(title string, navTitle string, t *theme.Theme, icon string, as *app.State, ps *cutil.PageState) %}
     9    <div class="card" id="theme">
    10      <div class="overflow full-width">
    11        <table class="centered min-200">
    12          <thead>
    13          <tr>
    14            <th class="left-align shrink">{%s title %}</th>
    15            <th class="bl" colspan="2">
    16              <div>Light</div>
    17              <div id="mockup-light">{%= MockupColors(navTitle, "", t.Light, false, icon, 5, ps) %}</div>
    18            </th>
    19            <th class="bl" colspan="2">
    20              <div>Dark</div>
    21              <div id="mockup-dark">{%= MockupColors(navTitle, "", t.Dark, false, icon, 5, ps) %}</div>
    22            </th>
    23          </tr>
    24          <tr>
    25            <th></th>
    26            <th class="bl">Background</th>
    27            <th>Foreground</th>
    28            <th class="bl">Background</th>
    29            <th>Foreground</th>
    30          </tr>
    31          </thead>
    32          {%- code
    33            const lp = "light"
    34            const dp = "dark"
    35          -%}
    36          <tbody>
    37            <tr>
    38              <th class="left-align shrink">Main Content</th>
    39              <td class="bl">{%= cinput(lp, "background", t.Light.Background) %}</td>
    40              <td>{%= cinput(lp, "foreground", t.Light.Foreground) %}</td>
    41              <td class="bl">{%= cinput(dp, "background", t.Dark.Background) %}</td>
    42              <td>{%= cinput(dp, "foreground", t.Dark.Foreground) %}</td>
    43            </tr>
    44            <tr>
    45              <th class="left-align shrink">Muted</th>
    46              <td class="bl">{%= cinput(lp, "background-muted", t.Light.BackgroundMuted) %}</td>
    47              <td>{%= cinput(lp, "foreground-muted", t.Light.ForegroundMuted) %}</td>
    48              <td class="bl">{%= cinput(dp, "background-muted", t.Dark.BackgroundMuted) %}</td>
    49              <td>{%= cinput(dp, "foreground-muted", t.Dark.ForegroundMuted) %}</td>
    50            </tr>
    51            <tr>
    52              <th class="left-align shrink">Link</th>
    53              <td class="bl"></td>
    54              <td>{%= cinput(lp, "link-foreground", t.Light.LinkForeground) %}</td>
    55              <td class="bl"></td>
    56              <td>{%= cinput(dp, "link-foreground", t.Dark.LinkForeground) %}</td>
    57            </tr>
    58            <tr>
    59              <th class="left-align shrink">Visited Link</th>
    60              <td class="bl"></td>
    61              <td>{%= cinput(lp, "link-visited-foreground", t.Light.LinkVisitedForeground) %}</td>
    62              <td class="bl"></td>
    63              <td>{%= cinput(dp, "link-visited-foreground", t.Dark.LinkVisitedForeground) %}</td>
    64            </tr>
    65            <tr>
    66              <th class="left-align shrink">Navigation</th>
    67              <td class="bl">{%= cinput(lp, "nav-background", t.Light.NavBackground) %}</td>
    68              <td>{%= cinput(lp, "nav-foreground", t.Light.NavForeground) %}</td>
    69              <td class="bl">{%= cinput(dp, "nav-background", t.Dark.NavBackground) %}</td>
    70              <td>{%= cinput(dp, "nav-foreground", t.Dark.NavForeground) %}</td>
    71            </tr>
    72            <tr>
    73              <th class="left-align shrink">Menu</th>
    74              <td class="bl">{%= cinput(lp, "menu-background", t.Light.MenuBackground) %}</td>
    75              <td>{%= cinput(lp, "menu-foreground", t.Light.MenuForeground) %}</td>
    76              <td class="bl">{%= cinput(dp, "menu-background", t.Dark.MenuBackground) %}</td>
    77              <td>{%= cinput(dp, "menu-foreground", t.Dark.MenuForeground) %}</td>
    78            </tr>
    79            <tr>
    80              <th class="left-align shrink">Selected Menu</th>
    81              <td class="bl">{%= cinput(lp, "menu-selected-background", t.Light.MenuSelectedBackground) %}</td>
    82              <td>{%= cinput(lp, "menu-selected-foreground", t.Light.MenuSelectedForeground) %}</td>
    83              <td class="bl">{%= cinput(dp, "menu-selected-background", t.Dark.MenuSelectedBackground) %}</td>
    84              <td>{%= cinput(dp, "menu-selected-foreground", t.Dark.MenuSelectedForeground) %}</td>
    85            </tr>
    86          </tbody>
    87        </table>
    88      </div>
    89    </div>
    90  {% endfunc %}
    91  
    92  {% func cinput(mode string, k string, v string) %}{% stripspace %}
    93    <input class="color-var" data-mode="{%s mode %}" data-var="color-{%s k %}" type="color" id="{%s mode %}-{%s k %}" name="{%s mode %}-{%s k %}" value="{%s v %}" autocomplete="off" />
    94  {% endstripspace %}{% endfunc %}