IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-02-25 18:55:32 -06:00
Code Issues Packages Projects Releases Wiki Activity

UX: adjust objects editor styles for full page layout (#26265)

Browse Source
This commit is contained in:
Kris 2024-03-20 15:55:52 -04:00 committed by GitHub
parent 3417d15730
commit 59217b8a18
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 178 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

107
app/assets/javascripts/admin/addon/components/schema-theme-setting/editor.gjs
View File

@ -3,13 +3,11 @@ import { cached, tracked } from "@glimmer/tracking";
import { fn } from "@ember/helper"; import { fn } from "@ember/helper";
import { on } from "@ember/modifier"; import { on } from "@ember/modifier";
import { action } from "@ember/object"; import { action } from "@ember/object";
import { LinkTo } from "@ember/routing";
import { service } from "@ember/service"; import { service } from "@ember/service";
import { gt } from "truth-helpers"; import { gt } from "truth-helpers";
import DButton from "discourse/components/d-button"; import DButton from "discourse/components/d-button";
import { popupAjaxError } from "discourse/lib/ajax-error"; import { popupAjaxError } from "discourse/lib/ajax-error";
import dIcon from "discourse-common/helpers/d-icon"; import dIcon from "discourse-common/helpers/d-icon";
import i18n from "discourse-common/helpers/i18n";
import { cloneJSON } from "discourse-common/lib/object"; import { cloneJSON } from "discourse-common/lib/object";
import I18n from "discourse-i18n"; import I18n from "discourse-i18n";
import FieldInput from "./field"; import FieldInput from "./field";
@ -284,17 +282,18 @@ export default class SchemaThemeSettingEditor extends Component {
} }
<template> <template>
{{! template-lint-disable no-nested-interactive }}
<div class="schema-theme-setting-editor"> <div class="schema-theme-setting-editor">
<div class="schema-theme-setting-editor__navigation"> <div class="schema-theme-setting-editor__navigation">
<ul class="schema-theme-setting-editor__tree"> <ul class="schema-theme-setting-editor__tree">
{{#if this.backButtonText}} {{#if this.backButtonText}}
<li <li
role="link" role="link"
class="schema-theme-setting-editor__tree-node--back-btn" class="schema-theme-setting-editor__tree-node --back-btn"
{{on "click" this.backButtonClick}} {{on "click" this.backButtonClick}}
> >
<div class="schema-theme-setting-editor__tree-node-text"> <div class="schema-theme-setting-editor__tree-node-text">
{{dIcon "chevron-left"}} {{dIcon "arrow-left"}}
{{this.backButtonText}} {{this.backButtonText}}
</div> </div>
</li> </li>
@ -308,59 +307,59 @@ export default class SchemaThemeSettingEditor extends Component {
{{on "click" (fn this.onClick node)}} {{on "click" (fn this.onClick node)}}
> >
<div class="schema-theme-setting-editor__tree-node-text"> <div class="schema-theme-setting-editor__tree-node-text">
{{node.text}} <span>{{node.text}}</span>
{{#if node.parentTree.propertyName}}
{{#if (gt node.trees.length 0)}} {{dIcon "chevron-right"}}
{{else}}
{{dIcon (if node.active "chevron-down" "chevron-right")}} {{dIcon (if node.active "chevron-down" "chevron-right")}}
{{/if}} {{/if}}
</div> </div>
</li>
{{#each node.trees as |nestedTree|}} {{#each node.trees as |nestedTree|}}
{{#if (gt nestedTree.nodes.length 0)}} <ul>
<li {{#each nestedTree.nodes as |childNode|}}
class="schema-theme-setting-editor__tree-node --child --heading" <li
data-test-parent-index={{node.index}} role="link"
> class="schema-theme-setting-editor__tree-node --child"
<div class="schema-theme-setting-editor__tree-node-text"> {{on
{{nestedTree.propertyName}} "click"
</div> (fn this.onChildClick childNode nestedTree node)
</li> }}
{{/if}} data-test-parent-index={{node.index}}
>
{{#each nestedTree.nodes as |childNode|}} <div class="schema-theme-setting-editor__tree-node-text">
<li <span>{{childNode.text}}</span>
role="link" {{dIcon "chevron-right"}}
class="schema-theme-setting-editor__tree-node --child" </div>
{{on </li>
"click" {{/each}}
(fn this.onChildClick childNode nestedTree node) <li
}} class="schema-theme-setting-editor__tree-node --child --add-button"
data-test-parent-index={{node.index}} >
> <DButton
<div class="schema-theme-setting-editor__tree-node-text"> @action={{fn this.addItem nestedTree}}
{{childNode.text}} @translatedLabel={{nestedTree.schema.name}}
{{dIcon "chevron-right"}} @icon="plus"
</div> class="btn-transparent schema-theme-setting-editor__tree-add-button --child"
</li> data-test-parent-index={{node.index}}
/>
</li>
</ul>
{{/each}} {{/each}}
</li>
<DButton
@action={{fn this.addItem nestedTree}}
@translatedLabel={{nestedTree.schema.name}}
@icon="plus"
class="schema-theme-setting-editor__tree-add-button --child"
data-test-parent-index={{node.index}}
/>
{{/each}}
{{/each}} {{/each}}
<li
class="schema-theme-setting-editor__tree-node --parent --add-button"
>
<DButton
@action={{fn this.addItem this.tree}}
@translatedLabel={{this.tree.schema.name}}
@icon="plus"
class="btn-transparent schema-theme-setting-editor__tree-add-button --root"
/>
</li>
</ul> </ul>
<DButton
@action={{fn this.addItem this.tree}}
@translatedLabel={{this.tree.schema.name}}
@icon="plus"
class="schema-theme-setting-editor__tree-add-button --root"
/>
</div> </div>
<div class="schema-theme-setting-editor__fields"> <div class="schema-theme-setting-editor__fields">
@ -389,14 +388,6 @@ export default class SchemaThemeSettingEditor extends Component {
@label="save" @label="save"
class="btn-primary" class="btn-primary"
/> />
<LinkTo
@route="adminCustomizeThemes.show"
@model={{@themeId}}
class="btn-transparent"
>
{{i18n "cancel"}}
</LinkTo>
</div> </div>
</div> </div>
</template> </template>

7
app/assets/javascripts/admin/addon/templates/customize-themes-show-schema.hbs
View File

@ -1,4 +1,11 @@
<div class="customize-themes-show-schema__header row"> <div class="customize-themes-show-schema__header row">
<LinkTo
@route="adminCustomizeThemes.show"
@model={{@model.theme.id}}
class="btn-transparent customize-themes-show-schema__back"
>
{{d-icon "arrow-left"}}{{@model.theme.name}}
</LinkTo>
<h2> <h2>
{{i18n {{i18n
"admin.customize.theme.schema.title" "admin.customize.theme.schema.title"

87
app/assets/javascripts/discourse/tests/integration/components/admin-schema-theme-setting/editor-test.gjs
View File

@ -3,7 +3,7 @@ import { module, test } from "qunit";
import schemaAndData from "discourse/tests/fixtures/theme-setting-schema-data"; import schemaAndData from "discourse/tests/fixtures/theme-setting-schema-data";
import { setupRenderingTest } from "discourse/tests/helpers/component-test"; import { setupRenderingTest } from "discourse/tests/helpers/component-test";
import pretender, { response } from "discourse/tests/helpers/create-pretender"; import pretender, { response } from "discourse/tests/helpers/create-pretender";
import { query, queryAll } from "discourse/tests/helpers/qunit-helpers"; import { queryAll } from "discourse/tests/helpers/qunit-helpers";
import selectKit from "discourse/tests/helpers/select-kit-helper"; import selectKit from "discourse/tests/helpers/select-kit-helper";
import I18n from "discourse-i18n"; import I18n from "discourse-i18n";
import AdminSchemaThemeSettingEditor from "admin/components/schema-theme-setting/editor"; import AdminSchemaThemeSettingEditor from "admin/components/schema-theme-setting/editor";
@ -36,9 +36,6 @@ class TreeFromDOM {
}; };
}); });
const childrenHeaderElement = query(
`.schema-theme-setting-editor__tree-node.--heading[data-test-parent-index="${index}"]`
);
const addButtons = [ const addButtons = [
...queryAll( ...queryAll(
`.schema-theme-setting-editor__tree-add-button.--child[data-test-parent-index="${index}"]` `.schema-theme-setting-editor__tree-add-button.--child[data-test-parent-index="${index}"]`
@ -48,7 +45,6 @@ class TreeFromDOM {
return { return {
active, active,
children, children,
childrenHeaderElement,
addButtons, addButtons,
element: li, element: li,
textElement: li.querySelector( textElement: li.querySelector(
@ -96,7 +92,7 @@ module(
const tree = new TreeFromDOM(); const tree = new TreeFromDOM();
assert.strictEqual(tree.nodes.length, 2); assert.strictEqual(tree.nodes.length, 3);
assert.true(tree.nodes[0].active, "the first node is active"); assert.true(tree.nodes[0].active, "the first node is active");
assert.false(tree.nodes[1].active, "other nodes are not active"); assert.false(tree.nodes[1].active, "other nodes are not active");
}); });
@ -111,7 +107,6 @@ module(
const tree = new TreeFromDOM(); const tree = new TreeFromDOM();
assert.true(tree.nodes[0].active); assert.true(tree.nodes[0].active);
assert.dom(tree.nodes[0].childrenHeaderElement).hasText("children");
assert.strictEqual( assert.strictEqual(
tree.nodes[0].children.length, tree.nodes[0].children.length,
@ -154,7 +149,7 @@ module(
const tree = new TreeFromDOM(); const tree = new TreeFromDOM();
assert.strictEqual(tree.nodes.length, 2); assert.strictEqual(tree.nodes.length, 3);
assert.dom(tree.nodes[0].textElement).hasText("item 1"); assert.dom(tree.nodes[0].textElement).hasText("item 1");
assert.strictEqual(tree.nodes[0].children.length, 2); assert.strictEqual(tree.nodes[0].children.length, 2);
assert.dom(tree.nodes[0].children[0].textElement).hasText("child 1-1"); assert.dom(tree.nodes[0].children[0].textElement).hasText("child 1-1");
@ -167,7 +162,7 @@ module(
tree.refresh(); tree.refresh();
assert.strictEqual(tree.nodes.length, 2); assert.strictEqual(tree.nodes.length, 3);
assert.dom(tree.nodes[0].textElement).hasText("item 1"); assert.dom(tree.nodes[0].textElement).hasText("item 1");
assert.false(tree.nodes[0].active); assert.false(tree.nodes[0].active);
assert.strictEqual(tree.nodes[0].children.length, 0); assert.strictEqual(tree.nodes[0].children.length, 0);
@ -182,7 +177,7 @@ module(
await click(tree.nodes[1].children[1].element); await click(tree.nodes[1].children[1].element);
tree.refresh(); tree.refresh();
assert.strictEqual(tree.nodes.length, 3); assert.strictEqual(tree.nodes.length, 4);
assert.dom(tree.nodes[0].textElement).hasText("child 2-1"); assert.dom(tree.nodes[0].textElement).hasText("child 2-1");
assert.false(tree.nodes[0].active); assert.false(tree.nodes[0].active);
@ -216,7 +211,7 @@ module(
tree.refresh(); tree.refresh();
assert.strictEqual(tree.nodes.length, 4); assert.strictEqual(tree.nodes.length, 5);
assert.dom(tree.nodes[0].textElement).hasText("grandchild 2-2-1"); assert.dom(tree.nodes[0].textElement).hasText("grandchild 2-2-1");
assert.false(tree.nodes[0].active); assert.false(tree.nodes[0].active);
@ -242,14 +237,12 @@ module(
<AdminSchemaThemeSettingEditor @themeId="1" @setting={{setting}} /> <AdminSchemaThemeSettingEditor @themeId="1" @setting={{setting}} />
</template>); </template>);
assert assert.dom(".--back-btn").doesNotExist();
.dom(".schema-theme-setting-editor__tree-node--back-btn")
.doesNotExist();
const tree = new TreeFromDOM(); const tree = new TreeFromDOM();
await click(tree.nodes[0].children[0].element); await click(tree.nodes[0].children[0].element);
assert.dom(".schema-theme-setting-editor__tree-node--back-btn").exists(); assert.dom(".--back-btn").exists();
tree.refresh(); tree.refresh();
assert.dom(tree.nodes[0].textElement).hasText("child 1-1"); assert.dom(tree.nodes[0].textElement).hasText("child 1-1");
@ -257,21 +250,19 @@ module(
tree.refresh(); tree.refresh();
assert.dom(tree.nodes[0].textElement).hasText("grandchild 1-1-1"); assert.dom(tree.nodes[0].textElement).hasText("grandchild 1-1-1");
assert.dom(".schema-theme-setting-editor__tree-node--back-btn").exists(); assert.dom(".--back-btn").exists();
await click(".schema-theme-setting-editor__tree-node--back-btn"); await click(".--back-btn");
tree.refresh(); tree.refresh();
assert.dom(tree.nodes[0].textElement).hasText("child 1-1"); assert.dom(tree.nodes[0].textElement).hasText("child 1-1");
assert.dom(".schema-theme-setting-editor__tree-node--back-btn").exists(); assert.dom(".--back-btn").exists();
await click(".schema-theme-setting-editor__tree-node--back-btn"); await click(".--back-btn");
tree.refresh(); tree.refresh();
assert.dom(tree.nodes[0].textElement).hasText("item 1"); assert.dom(tree.nodes[0].textElement).hasText("item 1");
assert assert.dom(".--back-btn").doesNotExist();
.dom(".schema-theme-setting-editor__tree-node--back-btn")
.doesNotExist();
}); });
test("the back button navigates to the index of the active element at the previous level", async function (assert) { test("the back button navigates to the index of the active element at the previous level", async function (assert) {
@ -287,10 +278,10 @@ module(
tree.refresh(); tree.refresh();
await click(tree.nodes[1].children[1].element); await click(tree.nodes[1].children[1].element);
await click(".schema-theme-setting-editor__tree-node--back-btn"); await click(".--back-btn");
tree.refresh(); tree.refresh();
assert.strictEqual(tree.nodes.length, 2); assert.strictEqual(tree.nodes.length, 3);
assert.dom(tree.nodes[0].textElement).hasText("item 1"); assert.dom(tree.nodes[0].textElement).hasText("item 1");
assert.false(tree.nodes[0].active); assert.false(tree.nodes[0].active);
@ -314,7 +305,7 @@ module(
tree.refresh(); tree.refresh();
await click(tree.nodes[1].children[1].element); await click(tree.nodes[1].children[1].element);
assert.dom(".schema-theme-setting-editor__tree-node--back-btn").hasText( assert.dom(".--back-btn").hasText(
I18n.t("admin.customize.theme.schema.back_button", { I18n.t("admin.customize.theme.schema.back_button", {
name: "item 2", name: "item 2",
}) })
@ -323,15 +314,15 @@ module(
tree.refresh(); tree.refresh();
await click(tree.nodes[1].children[0].element); await click(tree.nodes[1].children[0].element);
assert.dom(".schema-theme-setting-editor__tree-node--back-btn").hasText( assert.dom(".--back-btn").hasText(
I18n.t("admin.customize.theme.schema.back_button", { I18n.t("admin.customize.theme.schema.back_button", {
name: "child 2-2", name: "child 2-2",
}) })
); );
await click(".schema-theme-setting-editor__tree-node--back-btn"); await click(".--back-btn");
assert.dom(".schema-theme-setting-editor__tree-node--back-btn").hasText( assert.dom(".--back-btn").hasText(
I18n.t("admin.customize.theme.schema.back_button", { I18n.t("admin.customize.theme.schema.back_button", {
name: "item 2", name: "item 2",
}) })
@ -421,13 +412,13 @@ module(
assert.dom(inputFields.fields.text.labelElement).hasText("text"); assert.dom(inputFields.fields.text.labelElement).hasText("text");
assert.dom(inputFields.fields.url.labelElement).hasText("url"); assert.dom(inputFields.fields.url.labelElement).hasText("url");
assert.dom(inputFields.fields.icon.labelElement).hasText("icon"); assert.dom(inputFields.fields.icon.labelElement).hasText("icon");
assert.dom(inputFields.fields.text.inputElement).hasValue("About"); assert.dom(inputFields.fields.text.inputElement).hasValue("Contact");
assert assert
.dom(inputFields.fields.url.inputElement) .dom(inputFields.fields.url.inputElement)
.hasValue("https://example.com/about"); .hasValue("https://example.com/contact");
assert.dom(inputFields.fields.icon.inputElement).hasValue("asterisk"); assert.dom(inputFields.fields.icon.inputElement).hasValue("phone");
}); });
test("input fields of type integer", async function (assert) { test("input fields of type integer", async function (assert) {
@ -778,14 +769,14 @@ module(
tree.refresh(); tree.refresh();
inputFields.refresh(); inputFields.refresh();
assert.dom(".schema-theme-setting-editor__tree-node--back-btn").hasText( assert.dom(".--back-btn").hasText(
I18n.t("admin.customize.theme.schema.back_button", { I18n.t("admin.customize.theme.schema.back_button", {
name: "cool section is no longer cool", name: "cool section is no longer cool",
}) })
); );
await fillIn(inputFields.fields.text.inputElement, "Talk to us"); await fillIn(inputFields.fields.text.inputElement, "Talk to us");
await click(".schema-theme-setting-editor__tree-node--back-btn"); await click(".--back-btn");
tree.refresh(); tree.refresh();
inputFields.refresh(); inputFields.refresh();
@ -822,13 +813,13 @@ module(
const tree = new TreeFromDOM(); const tree = new TreeFromDOM();
assert.strictEqual(tree.nodes.length, 2); assert.strictEqual(tree.nodes.length, 3);
await click(TOP_LEVEL_ADD_BTN); await click(TOP_LEVEL_ADD_BTN);
await click(TOP_LEVEL_ADD_BTN); await click(TOP_LEVEL_ADD_BTN);
tree.refresh(); tree.refresh();
assert.strictEqual(tree.nodes.length, 4); assert.strictEqual(tree.nodes.length, 5);
assert.dom(tree.nodes[2].textElement).hasText("level1 3"); assert.dom(tree.nodes[2].textElement).hasText("level1 3");
assert.dom(tree.nodes[3].textElement).hasText("level1 4"); assert.dom(tree.nodes[3].textElement).hasText("level1 4");
}); });
@ -869,13 +860,13 @@ module(
tree.refresh(); tree.refresh();
assert.dom(TOP_LEVEL_ADD_BTN).hasText("level2"); assert.dom(TOP_LEVEL_ADD_BTN).hasText("level2");
assert.strictEqual(tree.nodes.length, 2); assert.strictEqual(tree.nodes.length, 3);
await click(TOP_LEVEL_ADD_BTN); await click(TOP_LEVEL_ADD_BTN);
await click(TOP_LEVEL_ADD_BTN); await click(TOP_LEVEL_ADD_BTN);
tree.refresh(); tree.refresh();
assert.strictEqual(tree.nodes.length, 4); assert.strictEqual(tree.nodes.length, 5);
assert.dom(tree.nodes[2].textElement).hasText("level2 3"); assert.dom(tree.nodes[2].textElement).hasText("level2 3");
assert.dom(tree.nodes[3].textElement).hasText("level2 4"); assert.dom(tree.nodes[3].textElement).hasText("level2 4");
}); });
@ -916,7 +907,7 @@ module(
const tree = new TreeFromDOM(); const tree = new TreeFromDOM();
const inputFields = new InputFieldsFromDOM(); const inputFields = new InputFieldsFromDOM();
assert.strictEqual(tree.nodes.length, 2); assert.strictEqual(tree.nodes.length, 3);
assert.dom(tree.nodes[0].textElement).hasText("item 1"); assert.dom(tree.nodes[0].textElement).hasText("item 1");
assert.dom(tree.nodes[1].textElement).hasText("item 2"); assert.dom(tree.nodes[1].textElement).hasText("item 2");
assert.dom(inputFields.fields.name.inputElement).hasValue("item 1"); assert.dom(inputFields.fields.name.inputElement).hasValue("item 1");
@ -926,7 +917,7 @@ module(
tree.refresh(); tree.refresh();
inputFields.refresh(); inputFields.refresh();
assert.strictEqual(tree.nodes.length, 1); assert.strictEqual(tree.nodes.length, 2);
assert.dom(tree.nodes[0].textElement).hasText("item 2"); assert.dom(tree.nodes[0].textElement).hasText("item 2");
assert.dom(inputFields.fields.name.inputElement).hasValue("item 2"); assert.dom(inputFields.fields.name.inputElement).hasValue("item 2");
@ -935,7 +926,7 @@ module(
tree.refresh(); tree.refresh();
inputFields.refresh(); inputFields.refresh();
assert.strictEqual(tree.nodes.length, 0); assert.strictEqual(tree.nodes.length, 1);
assert.strictEqual(inputFields.count, 0); assert.strictEqual(inputFields.count, 0);
assert.dom(REMOVE_ITEM_BTN).doesNotExist(); assert.dom(REMOVE_ITEM_BTN).doesNotExist();
assert.dom(TOP_LEVEL_ADD_BTN).hasText("level1"); assert.dom(TOP_LEVEL_ADD_BTN).hasText("level1");
@ -955,19 +946,19 @@ module(
const inputFields = new InputFieldsFromDOM(); const inputFields = new InputFieldsFromDOM();
assert.strictEqual(tree.nodes.length, 2); assert.strictEqual(tree.nodes.length, 3);
assert.dom(tree.nodes[0].textElement).hasText("child 1-1"); assert.dom(tree.nodes[0].textElement).hasText("child 1-1");
assert.dom(tree.nodes[1].textElement).hasText("child 1-2"); assert.dom(tree.nodes[1].textElement).hasText("child 1-2");
assert.dom(inputFields.fields.name.inputElement).hasValue("child 1-2"); assert.dom(inputFields.fields.name.inputElement).hasValue("child 1-1");
await click(REMOVE_ITEM_BTN); await click(REMOVE_ITEM_BTN);
tree.refresh(); tree.refresh();
inputFields.refresh(); inputFields.refresh();
assert.strictEqual(tree.nodes.length, 1); assert.strictEqual(tree.nodes.length, 2);
assert.dom(tree.nodes[0].textElement).hasText("child 1-1"); assert.dom(tree.nodes[0].textElement).hasText("child 1-2");
assert.dom(inputFields.fields.name.inputElement).hasValue("child 1-1"); assert.dom(inputFields.fields.name.inputElement).hasValue("child 1-2");
// removing the last object navigates back to the previous level // removing the last object navigates back to the previous level
await click(REMOVE_ITEM_BTN); await click(REMOVE_ITEM_BTN);
@ -975,15 +966,13 @@ module(
tree.refresh(); tree.refresh();
inputFields.refresh(); inputFields.refresh();
assert.strictEqual(tree.nodes.length, 2); assert.strictEqual(tree.nodes.length, 3);
assert.strictEqual(tree.nodes[0].children.length, 0); assert.strictEqual(tree.nodes[0].children.length, 0);
assert.dom(tree.nodes[0].textElement).hasText("item 1"); assert.dom(tree.nodes[0].textElement).hasText("item 1");
assert.dom(tree.nodes[1].textElement).hasText("item 2"); assert.dom(tree.nodes[1].textElement).hasText("item 2");
assert.dom(inputFields.fields.name.inputElement).hasValue("item 1"); assert.dom(inputFields.fields.name.inputElement).hasValue("item 1");
assert assert.dom(".--back-btn").doesNotExist();
.dom(".schema-theme-setting-editor__tree-node--back-btn")
.doesNotExist();
}); });
} }
); );

17
app/assets/stylesheets/common/admin/customize_themes_show_schema.scss
View File

@ -1,3 +1,16 @@
.customize-themes-show-schema__header { .customize-themes-show-schema {
margin-bottom: 1em; &__header {
margin-bottom: 1em;
}
&__back {
display: flex;
align-items: center;
gap: 0.25em;
color: var(--tertiary);
.d-icon {
font-size: var(--font-down-1);
color: currentColor;
}
}
} }

1
app/assets/stylesheets/common/admin/schema_field.scss
View File

@ -4,6 +4,7 @@
.schema-field__input { .schema-field__input {
input { input {
margin-bottom: 0; margin-bottom: 0;
width: 100%;
} }
margin-bottom: 0.3em; margin-bottom: 0.3em;

88
app/assets/stylesheets/common/admin/schema_theme_setting_editor.scss
View File

@ -1,9 +1,12 @@
.schema-theme-setting-editor { .schema-theme-setting-editor {
--schema-space: 0.5em;
display: grid; display: grid;
grid-template-columns: 0.2fr 0.8fr; grid-template-columns: minmax(10em, 0.3fr) 1fr;
gap: 2em 4vw;
&__navigation { &__navigation {
margin-right: 2em; overflow: hidden;
border: 1px solid var(--primary-low);
ul { ul {
list-style: none; list-style: none;
@ -11,27 +14,47 @@
.schema-theme-setting-editor__tree { .schema-theme-setting-editor__tree {
margin: 0; margin: 0;
ul {
padding: 0;
margin: var(--schema-space) var(--schema-space) 1em 0;
li:hover {
background: var(--primary-very-low);
}
&:last-child {
margin-bottom: calc(var(--schema-space) * 2);
}
}
.schema-theme-setting-editor__tree-node--back-btn { .schema-theme-setting-editor__tree-node.--back-btn {
cursor: pointer; cursor: pointer;
width: 100%; width: 100%;
text-align: left; border-bottom: 1px solid var(--primary-low);
color: var(--primary-700);
&:hover {
color: var(--primary-800);
background: var(--primary-very-low);
}
.schema-theme-setting-editor__tree-node-text { .schema-theme-setting-editor__tree-node-text {
color: currentColor;
.d-icon { .d-icon {
color: currentColor;
margin-left: 0; margin-left: 0;
margin-right: 0.5em; margin-right: var(--schema-space);
} }
} }
} }
.schema-theme-setting-editor__tree-node-text { .schema-theme-setting-editor__tree-node-text {
padding: 0.5em; padding: var(--schema-space);
color: var(--primary); color: var(--primary);
display: flex; display: flex;
flex-direction: row;
align-items: center; align-items: center;
span {
@include ellipsis;
}
.d-icon { .d-icon {
margin-left: auto; margin-left: auto;
font-size: var(--font-down-3); font-size: var(--font-down-3);
@ -53,30 +76,53 @@
} }
} }
&.--child { &.--parent {
margin-left: 0.5em; border: 2px solid transparent;
border-left: 1.5px solid var(--primary-200);
&:not(:has(ul)) {
&:hover {
background: var(--primary-very-low);
}
}
&.--active {
border: 2px solid var(--tertiary);
}
&.--add-button {
border-top: 1px solid var(--primary-low);
}
} }
&.--heading { &.--child {
cursor: default; margin-left: var(--schema-space);
margin-top: 0.5em; border-left: 1px solid var(--primary-200);
font-weight: bold;
} }
} }
}
.schema-theme-setting-editor__tree-add-button { .schema-theme-setting-editor__tree-add-button {
&.--child { color: var(--tertiary);
margin-left: 0.5em; width: 100%;
line-height: 1.4; // match li height
justify-content: start;
.d-icon {
color: currentColor;
font-size: var(--font-down-1);
}
&:hover {
background: var(--primary-very-low);
color: var(--tertiary-hover);
.d-icon {
color: currentColor;
} }
} }
} }
} }
&__fields { &__fields {
} margin-top: -0.15em; // visual alignment with top of nav
&__footer {
margin-top: 0.5em;
} }
} }

2
spec/system/page_objects/pages/admin_objects_theme_setting_editor.rb
View File

@ -18,7 +18,7 @@ module PageObjects
def click_link(name) def click_link(name)
find( find(
".schema-theme-setting-editor__navigation .schema-theme-setting-editor__tree-node", ".schema-theme-setting-editor__navigation .schema-theme-setting-editor__tree-node.--child",
text: name, text: name,
).click ).click