demo for custom UI settings

mobile/mobile.scss → common/common.scss

@@ -100,3 +100,54 @@ body:not(.footer-nav-ipad) .footer-nav {
     display: none;
   }
 }
+
+.d-tab-bar-admin-setup {
+  .row-wrapper {
+    display: grid;
+    grid-template-columns: 2em 10em repeat(2, 1fr) 2em;
+    padding: 0.55em 0 0.7em;
+
+    &.header {
+      padding-bottom: 0;
+    }
+
+    .select-kit,
+    input {
+      width: 100%;
+    }
+    input[type="text"] {
+      margin-bottom: 0;
+    }
+
+    .tab-icon {
+      grid-column: 2;
+    }
+
+    .input-field {
+      margin: 0 0.5em;
+    }
+
+    .draggable {
+      display: flex;
+      height: 100%;
+      width: 100%;
+      justify-content: center;
+      align-items: center;
+      color: var(--primary-medium);
+      align-self: center;
+      margin-left: auto;
+      margin-right: auto;
+    }
+  }
+}
+
+.tab-bar-preview {
+  margin-top: 1em;
+  margin-bottom: 1em;
+  width: 35em;
+
+  .d-tab-bar {
+    position: unset;
+    cursor: default;
+  }
+}

javascripts/discourse/components/blah-component.gjs

@@ -0,0 +1,146 @@
+import Component from "@glimmer/component";
+import { Input } from "@ember/component";
+import { fn } from "@ember/helper";
+import { on } from "@ember/modifier";
+import { action } from "@ember/object";
+import didInsert from "@ember/render-modifiers/modifiers/did-insert";
+import willDestroy from "@ember/render-modifiers/modifiers/will-destroy";
+import { inject as service } from "@ember/service";
+import { htmlSafe } from "@ember/template";
+import discourseURL from "discourse/lib/url";
+import dIcon from "discourse-common/helpers/d-icon";
+import and from "truth-helpers/helpers/and";
+import IconPicker from "select-kit/components/icon-picker";
+import { hash } from "rsvp";
+import DButton from "discourse/components/d-button";
+import DTabBar from "../connectors/above-footer/d-tab-bar";
+import { tracked } from "@glimmer/tracking";
+
+class Tab {
+  @tracked title;
+  @tracked icon;
+  @tracked destination;
+
+  constructor(title, icon, destination) {
+    this.title = title;
+    this.icon = icon;
+    this.destination = destination;
+  }
+}
+
+export default class Blah extends Component {
+  @tracked _tabs;
+
+  get tabs() {
+    return (
+      this._tabs ||
+      this.args.data?.map(
+        (obj) => new Tab(obj.title, obj.icon, obj.destination)
+      ) || [
+        new Tab("Home", "home", "/"),
+        new Tab("Profile", "user", "userActivity.index"),
+        new Tab("Messages", "envelope", "userPrivateMessages.user.index"),
+        new Tab("Bookmarks", "bookmark", "userActivity.bookmarks"),
+        new Tab("Preferences", "cog", "preferences.account"),
+      ]
+    );
+  }
+
+  set tabs(newTabs) {
+    this._tabs = newTabs;
+  }
+
+  @action
+  updateIcon(index, icons) {
+    this.tabs[index].icon = icons[icons.length - 1];
+  }
+
+  @action
+  addTab() {
+    this.tabs = [...this.tabs, new Tab("New", "far-circle", "/")];
+  }
+
+  @action
+  deleteTab(index) {
+    this.tabs = this.tabs.removeAt(index, 1);
+  }
+
+  @action
+  save() {
+    this.args.saveFunction(
+      this.tabs.map((tab) => {
+        return {
+          title: tab.title,
+          icon: tab.icon,
+          destination: tab.destination,
+        };
+      })
+    );
+  }
+
+  <template>
+    <h3>Preview</h3>
+    <div class="tab-bar-preview">
+      <DTabBar @preview={{true}} @tabs={{this.tabs}} />
+    </div>
+    <h3>Settings</h3>
+    <form class="d-tab-bar-admin-setup">
+      <div class="row-wrapper header">
+        <div class="input-field tab-icon">
+          <label>Icon</label>
+        </div>
+        <div class="input-field tab-title">
+          <label>Text</label>
+        </div>
+        <div class="input-field tab-path">
+          <label>Path (or route)</label>
+        </div>
+      </div>
+      <div class="body">
+        <div class="list">
+          {{#each this.tabs as |tab index|}}
+            <div class="row-wrapper">
+              <div class="draggable">
+                {{dIcon "grip-lines"}}
+              </div>
+              <div class="input-field">
+                <IconPicker
+                  @name="icon"
+                  @value={{tab.icon}}
+                  @options={{hash
+                    maximum=1
+                    caretDownIcon="caret-down"
+                    caretUpIcon="caret-up"
+                    icon=tab.icon
+                  }}
+                  @onlyAvailable={{true}}
+                  @onChange={{(fn this.updateIcon index)}}
+                />
+              </div>
+              <div class="input-field">
+                <Input @value={{tab.title}} />
+              </div>
+              <div class="input-field">
+                <Input @value={{tab.destination}} />
+              </div>
+              <DButton
+                @icon="trash-alt"
+                class="btn-flat delete-link"
+                @action={{(fn this.deleteTab index)}}
+              />
+            </div>
+          {{/each}}
+        </div>
+      </div>
+      <DButton @icon="plus" @action={{this.addTab}} />
+      <div>
+        <DButton
+          @translatedLabel="Save"
+          @icon="check"
+          @action={{this.save}}
+          class="btn-primary"
+        />
+      </div>
+    </form>
+  </template>
+}

javascripts/discourse/connectors/above-footer/d-tab-bar.gjs

@@ -1,6 +1,6 @@
 /* eslint ember/no-private-routing-service: 0 */
 
-import Component from "@ember/component";
+import Component from "@glimmer/component";
 import { fn } from "@ember/helper";
 import { on } from "@ember/modifier";
 import { action } from "@ember/object";
@@ -15,13 +15,14 @@ import { parseTabsSettings, routeToURL } from "../../../d-tab-bar/lib/helpers";
 
 const SCROLL_MAX = 30;
 const HIDDEN_TAB_BAR_CLASS = "tab-bar-hidden";
+const tabsFromSetting = parseTabsSettings();
+import { tracked } from "@glimmer/tracking";
 
 export default class DTabBar extends Component {
   @service router;
   @service currentUser;
   @service site;
 
-  tabs = parseTabsSettings();
   lastScrollTop = 0;
 
   get width() {
@@ -30,6 +31,17 @@ export default class DTabBar extends Component {
     return htmlSafe(`width: ${percentage}%;`);
   }
 
+  get shoudShow() {
+    return (
+      this.args.preview ||
+      (this.currentUser && this.site.mobileView && this.tabs.length)
+    );
+  }
+
+  get tabs() {
+    return this.args.tabs || tabsFromSetting;
+  }
+
   scrollListener() {
     const scrollTop = window.scrollY;
     const body = document.body;
@@ -50,6 +62,9 @@ export default class DTabBar extends Component {
 
   @action
   navigate(tab) {
+    if (this.args.preview) {
+      return;
+    }
     const destination = tab.destination;
     let url = destination;
     if (this.router._router.hasRoute(destination)) {
@@ -60,16 +75,22 @@ export default class DTabBar extends Component {
 
   @action
   setupScrollListener() {
+    if (this.args.preview) {
+      return;
+    }
     document.addEventListener("scroll", this.scrollListener);
   }
 
   @action
   removeScrollListener() {
+    if (this.args.preview) {
+      return;
+    }
     document.removeEventListener("scroll", this.scrollListener);
   }
 
   <template>
-    {{#if (and this.currentUser this.site.mobileView this.tabs.length)}}
+    {{#if this.shoudShow}}
       <div
         class="d-tab-bar"
         {{didInsert this.setupScrollListener}}

settings.yml

@@ -38,3 +38,7 @@ match_url_params:
   default: false
   description:
     en: "Match full url without trim params"
+test_setting:
+  type: "editor"
+  editor_component: "discourse/components/blah-component"
+  default: ""