domma-cms 1.8.33 → 1.8.35

package/plugins/theme-roller/admin/templates/theme-roller.html

@@ -0,0 +1,73 @@
+<!-- Theme Roller. Bound with M.applyBindings - see admin/views/theme-roller-view.js, which also
+     inserts the row template (the router renders a templateUrl through _.render, eating any {{…}}). -->
+<div class="trx">
+    <p class="trx-alert" data-bind-hidden="supported.value">
+        <span data-icon="alert-triangle" data-icon-size="16"></span>
+        This CMS cannot use custom themes yet - it needs Domma CMS 0.73 or later. Themes still save here.
+    </p>
+
+    <div class="tabs trx-tabs">
+        <div class="tab-list">
+            <button type="button" class="tab-item active">Roller</button>
+            <button type="button" class="tab-item">Saved themes <span class="trx-count" data-bind-text="themes.value.length"></span></button>
+            <button type="button" class="tab-item">Custom CSS</button>
+        </div>
+
+        <!-- Roller -->
+        <div class="tab-panel active">
+            <div class="trx-bar">
+                <div class="trx-editing">
+                    <strong data-bind-text="editingLabel.value">New theme</strong>
+                    <small data-bind-text="editingMeta.value"></small>
+                    <span class="trx-chip is-dirty" data-bind-hidden="!dirty.value" title="Changes not saved yet">Unsaved</span>
+                    <span class="trx-chips" data-bind-hidden="!editingUsage.value.length">
+                        <span class="trx-chip" data-bind-text="editingUsageText.value"></span>
+                    </span>
+                </div>
+                <div class="trx-actions">
+                    <button type="button" class="btn btn-sm btn-ghost" data-on-click="newTheme" title="Start a new theme">
+                        <span data-icon="plus" data-icon-size="14"></span> New</button>
+                    <button type="button" class="btn btn-sm btn-primary" data-on-click="save" data-bind-disabled="saving.value">
+                        <span data-icon="save" data-icon-size="14"></span> <span data-bind-text="saveText.value">Save</span></button>
+                    <button type="button" class="btn btn-sm btn-outline" data-on-click="saveAs" data-bind-hidden="!editingId.value" title="Save these settings as a new theme">
+                        Save as…</button>
+                    <button type="button" class="btn btn-sm btn-ghost trx-more" data-bind-hidden="!editingId.value" aria-label="More for this theme" title="More">⋮</button>
+                    <span data-help-title="Theme Roller" data-help="Pick a base theme in the roller, change any colour, font, spacing or border, and Save. A saved theme can be used on the site or in the admin - from here (⋮, or right-click it under Saved themes) or from Content › Theme, where it is listed with the built-in themes. Only what you change is stored; everything else comes from the base."></span>
+                </div>
+            </div>
+            <div class="trx-roller"></div>
+        </div>
+
+        <!-- Saved themes -->
+        <div class="tab-panel">
+            <div class="trx-card">
+                <div class="trx-card-title">Saved themes
+                    <span data-help-title="Saved themes" data-help="Click a theme to edit it in the roller. Right-click it (or ⋮, or Shift+F10) to use it on the site or in the admin, stop using it, duplicate, rename, export its CSS or delete it. Deleting a theme that is in use puts each place back on its base theme."></span></div>
+                <div class="trx-toolbar" hidden data-bind-hidden="loading.value || !themes.value.length">
+                    <div class="trx-seg" role="group" aria-label="Which themes">
+                        <button type="button" data-on-click="s_all" data-bind-class="show.value === 'all' && 'is-on'">All <small data-bind-text="counts.value.all"></small></button>
+                        <button type="button" data-on-click="s_used" data-bind-class="show.value === 'used' && 'is-on'">In use <small data-bind-text="counts.value.used"></small></button>
+                        <button type="button" data-on-click="s_unused" data-bind-class="show.value === 'unused' && 'is-on'">Not in use <small data-bind-text="counts.value.unused"></small></button>
+                    </div>
+                    <input type="search" class="form-input trx-search" placeholder="Name, base theme…" aria-label="Search saved themes" data-model="query.value">
+                </div>
+                <div class="trx-note trx-loading dm-loading-slot" data-bind-hidden="!loading.value">Loading…</div>
+                <p class="trx-note" hidden data-bind-hidden="loading.value || rows.value.length" data-bind-text="emptyText.value"></p>
+                <div class="trx-list" data-each="rows.value key=id"></div>
+            </div>
+        </div>
+
+        <!-- Custom CSS -->
+        <div class="tab-panel">
+            <div class="trx-card">
+                <div class="trx-card-title">Custom CSS
+                    <span data-help-title="Custom CSS" data-help="Hand-written CSS appended to every public page, after the theme - so it has the last word. Ctrl+S saves."></span></div>
+                <textarea class="form-input trx-css" spellcheck="false" placeholder="/* Add your custom CSS here */"></textarea>
+                <div class="trx-css-actions">
+                    <button type="button" class="btn btn-sm btn-primary" data-on-click="saveCss" data-bind-disabled="savingCss.value">
+                        <span data-icon="save" data-icon-size="14"></span> Save CSS</button>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>