From 703d6df12b4b72af992f6c1e957fc8738bdf3553 Mon Sep 17 00:00:00 2001
From: Peter Zimon <zimo@ghost.org>
Date: Wed, 10 Feb 2021 13:00:07 +0100
Subject: [PATCH] Updated Labs UI

---
 ghost/admin/app/templates/designsandbox.hbs |  38 +++
 ghost/admin/app/templates/settings/labs.hbs | 313 ++++++++++----------
 2 files changed, 195 insertions(+), 156 deletions(-)

diff --git a/ghost/admin/app/templates/designsandbox.hbs b/ghost/admin/app/templates/designsandbox.hbs
index e95f959c5d..0d72a79218 100644
--- a/ghost/admin/app/templates/designsandbox.hbs
+++ b/ghost/admin/app/templates/designsandbox.hbs
@@ -60,5 +60,43 @@
             </div>
         </div>
 
+        <h2 class="mt8">Setting area</h2>
+
+        <div class="gh-main-section">
+            <h4 class="gh-main-section-header small bn">Section title</h4>
+            <div class="gh-expandable">
+                <div class="gh-expandable-block">
+                    <div class="gh-expandable-header">
+                        <div>
+                            <h4 class="gh-expandable-title">Title</h4>
+                            <p class="gh-expandable-description">Description</p>
+                        </div>
+                        <div>[ACTION]</div>
+                    </div>
+                    <div>[CONTENT - OPTIONAL / HIDDEN FOR EXPANDABLE]</div>
+                </div>
+
+                <div class="gh-expandable-block">
+                    <div class="gh-expandable-header">
+                        <div>
+                            <h4 class="gh-expandable-title">Title</h4>
+                            <p class="gh-expandable-description">Description</p>
+                        </div>
+                        <div>[ACTION]</div>
+                    </div>
+                </div>
+
+                <div class="gh-expandable-block">
+                    <div class="gh-expandable-header">
+                        <div>
+                            <h4 class="gh-expandable-title">Title</h4>
+                            <p class="gh-expandable-description">Description</p>
+                        </div>
+                        <div>[ACTION]</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
     </section>
 </section>
\ No newline at end of file
diff --git a/ghost/admin/app/templates/settings/labs.hbs b/ghost/admin/app/templates/settings/labs.hbs
index 41469516a1..960628d1b4 100644
--- a/ghost/admin/app/templates/settings/labs.hbs
+++ b/ghost/admin/app/templates/settings/labs.hbs
@@ -10,176 +10,177 @@
     <section class="view-container settings-debug">
         <p class="gh-box gh-box-tip">{{svg-jar "idea"}}This is a testing ground for new or experimental features. They may change, break or inexplicably disappear at any time.</p>
 
-        <div class="gh-setting-header">Migration options</div>
-        <div class="flex flex-column br3 shadow-1 bg-grouped-table pa5 mt2">
-            <div class="gh-setting-first">
-                <div class="gh-setting-content">
-                    <div class="gh-setting-title">Import content</div>
-                    <div class="gh-setting-desc">Import posts from another Ghost installation</div>
-                </div>
-                <div class="gh-setting-action">
-                    <form id="settings-import" enctype="multipart/form-data">
-                        <GhFileUpload
-                            @id="importfile"
-                            @classNames="flex"
-                            @uploadButtonText={{this.uploadButtonText}}
-                            @onUpload={{action "onUpload"}}
-                            @acceptEncoding={{this.importMimeType}}
-                            data-test-file-input="import"
-                        />
-                    </form>
-                </div>
-            </div>
-
-            {{#if this.importErrors}}
-                <div class="gh-import-errors {{if this.importSuccessful "gh-import-errors-alert"}}" data-test-import-errors>
-                    <div class="gh-import-errors-title">
-                        {{#if this.importSuccessful}}
-                            Import successful with warnings
-                        {{else}}
-                            Import failed
-                        {{/if}}
-                    </div>
-
-                    {{#each this.importErrors as |error|}}
-                        <div class="gh-import-error" data-test-import-error>
-                            <p class="gh-import-error-message" data-test-import-error-message>
-                                {{#if error.help}}{{error.help}}: {{/if}}{{error.message}}
-                            </p>
-
-                            {{#if error.context}}
-                                <div class="gh-import-error-entry" data-test-import-error-context>
-                                    <pre>{{error.context}}</pre>
-                                </div>
-                            {{/if}}
+        <div class="gh-main-section">
+            <h4 class="gh-main-section-header small bn">Migration options</h4>
+            <div class="gh-expandable">
+                <div class="gh-expandable-block">
+                    <div class="gh-expandable-header">
+                        <div>
+                            <h4 class="gh-expandable-title">Import content</h4>
+                            <p class="gh-expandable-description">Import posts from another Ghost installation</p>
                         </div>
-                    {{/each}}
-                </div>
-            {{/if}}
+                        <form id="settings-import" enctype="multipart/form-data">
+                            <GhFileUpload
+                                @id="importfile"
+                                @classNames="flex"
+                                @uploadButtonText={{this.uploadButtonText}}
+                                @onUpload={{action "onUpload"}}
+                                @acceptEncoding={{this.importMimeType}}
+                                data-test-file-input="import"
+                            />
+                        </form>
+                    </div>
+                    {{#if this.importErrors}}
+                        <div class="gh-import-errors {{if this.importSuccessful "gh-import-errors-alert"}}" data-test-import-errors>
+                            <div class="gh-import-errors-title">
+                                {{#if this.importSuccessful}}
+                                    Import successful with warnings
+                                {{else}}
+                                    Import failed
+                                {{/if}}
+                            </div>
 
-            <div class="gh-setting">
-                <div class="gh-setting-content">
-                    <div class="gh-setting-title">Export your content</div>
-                    <div class="gh-setting-desc">Download all of your posts and settings in a single, glorious JSON file</div>
+                            {{#each this.importErrors as |error|}}
+                                <div class="gh-import-error" data-test-import-error>
+                                    <p class="gh-import-error-message" data-test-import-error-message>
+                                        {{#if error.help}}{{error.help}}: {{/if}}{{error.message}}
+                                    </p>
+
+                                    {{#if error.context}}
+                                        <div class="gh-import-error-entry" data-test-import-error-context>
+                                            <pre>{{error.context}}</pre>
+                                        </div>
+                                    {{/if}}
+                                </div>
+                            {{/each}}
+                        </div>
+                    {{/if}}
                 </div>
-                <div class="gh-setting-action">
-                    <button type="button" class="gh-btn gh-btn-hover-blue" {{action "downloadFile" "db"}}><span>Export</span></button>
+
+                <div class="gh-expandable-block">
+                    <div class="gh-expandable-header">
+                        <div>
+                            <h4 class="gh-expandable-title">Export your content</h4>
+                            <p class="gh-expandable-description">Download all of your posts and settings in a single, glorious JSON file</p>
+                        </div>
+                        <button type="button" class="gh-btn" {{action "downloadFile" "db"}}><span>Export</span></button>
+                    </div>
                 </div>
-            </div>
-            <div class="gh-setting-last">
-                <div class="gh-setting-content">
-                    <div class="gh-setting-title">Delete all content</div>
-                    <div class="gh-setting-desc">Permanently delete all posts and tags from the database, a hard reset</div>
-                </div>
-                <div class="gh-setting-action">
-                    <button type="button" class="gh-btn gh-btn-hover-red js-delete" {{action "toggleDeleteAllModal"}}><span>Delete</span></button>
+
+                <div class="gh-expandable-block">
+                    <div class="gh-expandable-header">
+                        <div>
+                            <h4 class="gh-expandable-title">Delete all content</h4>
+                            <p class="gh-expandable-description">Permanently delete all posts and tags from the database, a hard reset</p>
+                        </div>
+                        <button type="button" class="gh-btn gh-btn-red js-delete" {{action "toggleDeleteAllModal"}}><span>Delete</span></button>
+                    </div>
                 </div>
             </div>
         </div>
 
-        <div class="gh-setting-header">Beta features</div>
-        <div class="flex flex-column br3 shadow-1 bg-grouped-table pa5 mt2">
-            <div class="gh-setting-first">
-                <div class="gh-setting-content">
-                    <div class="gh-setting-title">Night shift</div>
-                    <div class="gh-setting-desc">Swap Ghost admin's colours to a dark background which is easy on the eyes</div>
-                </div>
-                <div class="gh-setting-action">
-                    <div class="for-switch"><GhFeatureFlag @flag="nightShift" /></div>
-                </div>
-            </div>
-            <div class="gh-setting">
-                <GhUploader
-                    @extensions={{this.jsonExtension}}
-                    @uploadUrl="/redirects/json/"
-                    @paramName="redirects"
-                    @onUploadSuccess={{perform this.redirectUploadResult true}}
-                    @onUploadFailure={{perform this.redirectUploadResult false}}
-                    as |uploader|
-                >
-                <div class="gh-setting-content">
-                    <div class="gh-setting-title">Redirects</div>
-                    <div class="gh-setting-desc">Configure redirects for old or moved content, more info in <a href="https://ghost.org/docs/tutorials/implementing-redirects/">the docs</a></div>
-                    {{#each uploader.errors as |error|}}
-                        <div class="gh-setting-error" data-test-error="redirects">{{or error.context error.message}}</div>
-                    {{/each}}
-                </div>
-                <div class="gh-setting-action" style="display: flex; flex-direction: column">
-                    {{#if uploader.isUploading}}
-                        {{uploader.progressBar}}
-                    {{else}}
-                        <button
-                            type="button"
-                            class="gh-btn gh-btn-icon {{if this.redirectSuccess "gh-btn-green"}} {{if this.redirectFailure "gh-btn-red"}}"
-                            onclick={{action "triggerFileDialog"}}
-                            data-test-button="upload-redirects"
-                        >
-                            <span>
-                                {{#if this.redirectSuccess}}
-                                    {{svg-jar "check-circle"}} Uploaded
-                                {{else if this.redirectFailure}}
-                                    {{svg-jar "retry"}} Upload Failed
-                                {{else}}
-                                    Upload redirects JSON
-                                {{/if}}
-                            </span>
-                        </button>
-                        <span><a href="#" {{action "downloadFile" "redirects/json"}} data-test-link="download-redirects">Download current redirects</a></span>
-                    {{/if}}
+        <div class="gh-main-section">
+            <h4 class="gh-main-section-header small bn">Beta features</h4>
+            <div class="gh-expandable">
+                <div class="gh-expandable-block">
+                    <GhUploader
+                        @extensions={{this.jsonExtension}}
+                        @uploadUrl="/redirects/json/"
+                        @paramName="redirects"
+                        @onUploadSuccess={{perform this.redirectUploadResult true}}
+                        @onUploadFailure={{perform this.redirectUploadResult false}}
+                        as |uploader|
+                    >
+                    <div class="gh-expandable-header">
+                        <div>
+                            <h4 class="gh-expandable-title">Redirects</h4>
+                            <p class="gh-expandable-description">Configure redirects for old or moved content, more info in <a href="https://ghost.org/docs/tutorials/implementing-redirects/">the docs</a></p>
+                        </div>
+                        <div class="gh-setting-action flex flex-column items-end">
+                            {{#if uploader.isUploading}}
+                                {{uploader.progressBar}}
+                            {{else}}
+                                <button
+                                    type="button"
+                                    class="gh-btn gh-btn-icon {{if this.redirectSuccess "gh-btn-green"}} {{if this.redirectFailure "gh-btn-red"}}"
+                                    onclick={{action "triggerFileDialog"}}
+                                    data-test-button="upload-redirects"
+                                >
+                                    <span>
+                                        {{#if this.redirectSuccess}}
+                                            {{svg-jar "check-circle"}} Uploaded
+                                        {{else if this.redirectFailure}}
+                                            {{svg-jar "retry"}} Upload Failed
+                                        {{else}}
+                                            Upload redirects JSON
+                                        {{/if}}
+                                    </span>
+                                </button>
+                                <div><a href="#" {{action "downloadFile" "redirects/json"}} data-test-link="download-redirects">Download current redirects</a></div>
+                            {{/if}}
 
-                    <div style="display:none">
-                        <GhFileInput @multiple={{false}} @action={{uploader.setFiles}} @accept={{this.jsonMimeType}} data-test-file-input="redirects" />
-                    </div>
-                </div>
-                </GhUploader>
-            </div>
-            <div class="gh-setting-last">
-                <GhUploader
-                    @extensions={{this.yamlExtension}}
-                    @uploadUrl="/settings/routes/yaml/"
-                    @paramName="routes"
-                    @onUploadSuccess={{perform this.routesUploadResult true}}
-                    @onUploadFailure={{perform this.routesUploadResult false}}
-                    as |uploader|
-                >
-                <div class="gh-setting-content">
-                    <div class="gh-setting-title">Routes</div>
-                    <div class="gh-setting-desc">Configure dynamic routing by modifying the routes.yaml file</div>
-                    {{#each uploader.errors as |error|}}
-                        <div class="gh-setting-error" data-test-error="routes">{{or error.context error.message}}</div>
-                    {{/each}}
-                </div>
-                <div class="gh-setting-action" style="display: flex; flex-direction: column">
-                    {{#if uploader.isUploading}}
-                        {{uploader.progressBar}}
-                    {{else}}
-                        <button
-                            type="button"
-                            class="gh-btn gh-btn-icon {{if this.routesSuccess "gh-btn-green"}} {{if this.routesFailure "gh-btn-red"}}"
-                            onclick={{action "triggerFileDialog"}}
-                            data-test-button="upload-routes"
-                        >
-                            <span>
-                                {{#if this.routesSuccess}}
-                                    {{svg-jar "check-circle"}} Uploaded
-                                {{else if this.routesFailure}}
-                                    {{svg-jar "retry"}} Upload Failed
-                                {{else}}
-                                    Upload routes YAML
-                                {{/if}}
-                            </span>
-                        </button>
-                        <span><a href="#" {{action "downloadFile" "settings/routes/yaml"}} data-test-link="download-routes">Download current routes.yaml</a></span>
-                    {{/if}}
+                            {{#each uploader.errors as |error|}}
+                                <div class="gh-setting-error" data-test-error="redirects">{{or error.context error.message}}</div>
+                            {{/each}}
 
-                    <div style="display:none">
-                        <GhFileInput @multiple={{false}} @action={{uploader.setFiles}} @accept={{this.yamlAccept}} data-test-file-input="routes" />
+                            <div style="display:none">
+                                <GhFileInput @multiple={{false}} @action={{uploader.setFiles}} @accept={{this.jsonMimeType}} data-test-file-input="redirects" />
+                            </div>
+                        </div>
                     </div>
+                    </GhUploader>
+                </div>
+
+                <div class="gh-expandable-block">
+                    <GhUploader
+                        @extensions={{this.yamlExtension}}
+                        @uploadUrl="/settings/routes/yaml/"
+                        @paramName="routes"
+                        @onUploadSuccess={{perform this.routesUploadResult true}}
+                        @onUploadFailure={{perform this.routesUploadResult false}}
+                        as |uploader|
+                    >
+                    <div class="gh-expandable-header">
+                        <div>
+                            <h4 class="gh-expandable-title">Routes</h4>
+                            <p class="gh-expandable-description">Configure dynamic routing by modifying the routes.yaml file</p>
+                        </div>
+                        <div class="gh-setting-action flex flex-column items-end">
+                            {{#if uploader.isUploading}}
+                                {{uploader.progressBar}}
+                            {{else}}
+                                <button
+                                    type="button"
+                                    class="gh-btn gh-btn-icon {{if this.routesSuccess "gh-btn-green"}} {{if this.routesFailure "gh-btn-red"}}"
+                                    onclick={{action "triggerFileDialog"}}
+                                    data-test-button="upload-routes"
+                                >
+                                    <span>
+                                        {{#if this.routesSuccess}}
+                                            {{svg-jar "check-circle"}} Uploaded
+                                        {{else if this.routesFailure}}
+                                            {{svg-jar "retry"}} Upload Failed
+                                        {{else}}
+                                            Upload routes YAML
+                                        {{/if}}
+                                    </span>
+                                </button>
+                                <div><a href="#" {{action "downloadFile" "settings/routes/yaml"}} data-test-link="download-routes">Download current routes.yaml</a></div>
+                            {{/if}}
+
+                            {{#each uploader.errors as |error|}}
+                                <div class="gh-setting-error" data-test-error="routes">{{or error.context error.message}}</div>
+                            {{/each}}
+
+                            <div style="display:none">
+                                <GhFileInput @multiple={{false}} @action={{uploader.setFiles}} @accept={{this.yamlAccept}} data-test-file-input="routes" />
+                            </div>
+                        </div>
+                    </div>
+                    </GhUploader>
                 </div>
-                </GhUploader>
             </div>
         </div>
-
     </section>
 </section>