mirror of
https://github.com/penpot/penpot.git
synced 2025-01-20 05:34:23 -05:00
Merge pull request #365 from tokens-studio/sets-naming
Rename sets paths/name to match guidelines
This commit is contained in:
Florian Schrödl
GitHub
commit
030f074285
12 changed files with 170 additions and 107 deletions
|
|
@ -820,13 +820,13 @@
|
|||
(apply-changes-local)))
|
||||
|
||||
(defn delete-token-set-path
|
||||
[changes token-set-path]
|
||||
[changes prefixed-full-set-path]
|
||||
(assert-library! changes)
|
||||
(let [library-data (::library-data (meta changes))
|
||||
prev-token-sets (some-> (get library-data :tokens-lib)
|
||||
(ctob/get-path-sets token-set-path))]
|
||||
(ctob/get-sets-at-prefix-path prefixed-full-set-path))]
|
||||
(-> changes
|
||||
(update :redo-changes conj {:type :del-token-set-path :path token-set-path})
|
||||
(update :redo-changes conj {:type :del-token-set-path :path prefixed-full-set-path})
|
||||
(update :undo-changes conj {:type :add-token-sets :token-sets prev-token-sets})
|
||||
(apply-changes-local))))
|
||||
|
||||
|
|
|
|||
|
|
@ -183,49 +183,54 @@
|
|||
|
||||
(def set-separator "/")
|
||||
|
||||
(defn join-set-path [set-path]
|
||||
(join-path set-path set-separator))
|
||||
(defn join-set-path [path]
|
||||
(join-path path set-separator))
|
||||
|
||||
(defn split-set-prefix [set-path]
|
||||
(some->> set-path
|
||||
(defn split-set-str-path-prefix
|
||||
"Split set-path
|
||||
|
||||
E.g.: \"S-some-set\" -> [\"S-\" \"some-set\"]
|
||||
\"G-some-group\" -> [\"G-\" \"some-group\"]"
|
||||
[path-str]
|
||||
(some->> path-str
|
||||
(re-matches #"^([SG]-)(.*)")
|
||||
(rest)))
|
||||
|
||||
(defn add-set-prefix [set-name]
|
||||
(str set-prefix set-name))
|
||||
(defn add-set-path-prefix [set-name-str]
|
||||
(str set-prefix set-name-str))
|
||||
|
||||
(defn add-set-group-prefix [group-path]
|
||||
(str set-group-prefix group-path))
|
||||
(defn add-set-path-group-prefix [group-path-str]
|
||||
(str set-group-prefix group-path-str))
|
||||
|
||||
(defn add-token-set-paths-prefix
|
||||
(defn set-full-path->set-prefixed-full-path
|
||||
"Returns token-set paths with prefixes to differentiate between sets and set-groups.
|
||||
|
||||
Sets will be prefixed with `set-prefix` (S-).
|
||||
Set groups will be prefixed with `set-group-prefix` (G-)."
|
||||
[paths]
|
||||
(let [set-path (mapv add-set-group-prefix (butlast paths))
|
||||
set-name (add-set-prefix (last paths))]
|
||||
[full-path]
|
||||
(let [set-path (mapv add-set-path-group-prefix (butlast full-path))
|
||||
set-name (add-set-path-prefix (last full-path))]
|
||||
(conj set-path set-name)))
|
||||
|
||||
(defn split-token-set-path [token-set-path]
|
||||
(split-path token-set-path set-separator))
|
||||
(defn split-token-set-path [path]
|
||||
(split-path path set-separator))
|
||||
|
||||
(defn split-token-set-name [token-set-name]
|
||||
(-> (split-token-set-path token-set-name)
|
||||
(add-token-set-paths-prefix)))
|
||||
(defn set-name->prefixed-full-path [name-str]
|
||||
(-> (split-token-set-path name-str)
|
||||
(set-full-path->set-prefixed-full-path)))
|
||||
|
||||
(defn get-token-set-path [token-set]
|
||||
(defn get-token-set-prefixed-path [token-set]
|
||||
(let [path (get-path token-set set-separator)]
|
||||
(add-token-set-paths-prefix path)))
|
||||
(set-full-path->set-prefixed-full-path path)))
|
||||
|
||||
(defn set-name->set-path-string [set-name]
|
||||
(-> (split-token-set-name set-name)
|
||||
(defn set-name-string->prefixed-set-path-string [name-str]
|
||||
(-> (set-name->prefixed-full-path name-str)
|
||||
(join-set-path)))
|
||||
|
||||
(defn set-path->set-name [set-path]
|
||||
(->> (split-token-set-path set-path)
|
||||
(defn prefixed-set-path-string->set-name-string [path-str]
|
||||
(->> (split-token-set-path path-str)
|
||||
(map (fn [path-part]
|
||||
(or (-> (split-set-prefix path-part)
|
||||
(or (-> (split-set-str-path-prefix path-part)
|
||||
(second))
|
||||
path-part)))
|
||||
(join-set-path)))
|
||||
|
|
@ -263,7 +268,7 @@
|
|||
(delete-token [_ token-name] "delete a token from the list")
|
||||
(get-token [_ token-name] "return token by token-name")
|
||||
(get-tokens [_] "return an ordered sequence of all tokens in the set")
|
||||
(get-set-path [_] "returns name of set converted to the path with prefix identifiers")
|
||||
(get-set-prefixed-path-string [_] "convert set name to prefixed full path string")
|
||||
(get-tokens-tree [_] "returns a tree of tokens split & nested by their name path")
|
||||
(get-dtcg-tokens-tree [_] "returns tokens tree formated to the dtcg spec"))
|
||||
|
||||
|
|
@ -312,8 +317,8 @@
|
|||
(get-tokens [_]
|
||||
(vals tokens))
|
||||
|
||||
(get-set-path [_]
|
||||
(set-name->set-path-string name))
|
||||
(get-set-prefixed-path-string [_]
|
||||
(set-name-string->prefixed-set-path-string name))
|
||||
|
||||
(get-tokens-tree [_]
|
||||
(tokens-tree tokens))
|
||||
|
|
@ -358,9 +363,23 @@
|
|||
;; === TokenSets (collection)
|
||||
|
||||
(defprotocol ITokenSets
|
||||
"Collection of sets and set groups.
|
||||
|
||||
Naming conventions:
|
||||
Set name: the complete name as a string, without prefix \"some-group/some-subgroup/some-set\".
|
||||
Set final name or fname: the last part of the name \"some-set\".
|
||||
Set path: the groups part of the name, as a vector [\"some-group\" \"some-subgroup\"].
|
||||
Set path str: the set path as a string \"some-group/some-subgroup\".
|
||||
Set full path: the path including the fname, as a vector [\"some-group\", \"some-subgroup\", \"some-set\"].
|
||||
Set full path str: the set full path as a string \"some-group/some-subgroup/some-set\".
|
||||
|
||||
Set prefix: the two-characters prefix added to a full path item \"G-\" / \"S-\".
|
||||
Prefixed set path or ppath: a path wit added prefixes [\"G-some-group\", \"G-some-subgroup\"].
|
||||
Prefixed set full path or pfpath: a full path wit prefixes [\"G-some-group\", \"G-some-subgroup\", \"S-some-set\"].
|
||||
Prefixed set final name or pfname: a final name with prefix \"S-some-set\"."
|
||||
(add-set [_ token-set] "add a set to the library, at the end")
|
||||
(add-sets [_ token-set] "add a collection of sets to the library, at the end")
|
||||
(update-set [_ set-name f] "modify a set in the ilbrary")
|
||||
(update-set [_ set-name f] "modify a set in the library")
|
||||
(delete-set-path [_ set-path] "delete a set in the library")
|
||||
(move-set-before [_ set-name before-set-name] "move a set with `set-name` before a set with `before-set-name` in the library.
|
||||
When `before-set-name` is nil, move set to bottom")
|
||||
|
|
@ -368,7 +387,7 @@ When `before-set-name` is nil, move set to bottom")
|
|||
(get-set-tree [_] "get a nested tree of all sets in the library")
|
||||
(get-in-set-tree [_ path] "get `path` in nested tree of all sets in the library")
|
||||
(get-sets [_] "get an ordered sequence of all sets in the library")
|
||||
(get-path-sets [_ path] "get an ordered sequence of sets at `path` in the library")
|
||||
(get-sets-at-prefix-path [_ path] "get an ordered sequence of sets at `path` in the library")
|
||||
(get-ordered-set-names [_] "get an ordered sequence of all sets names in the library")
|
||||
(get-set [_ set-name] "get one set looking for name")
|
||||
(get-neighbor-set-name [_ set-name index-offset] "get neighboring set name offset by `index-offset`"))
|
||||
|
|
@ -613,7 +632,7 @@ When `before-set-name` is nil, move set to bottom")
|
|||
ITokenSets
|
||||
(add-set [_ token-set]
|
||||
(dm/assert! "expected valid token set" (check-token-set! token-set))
|
||||
(let [path (get-token-set-path token-set)]
|
||||
(let [path (get-token-set-prefixed-path token-set)]
|
||||
(TokensLib. (d/oassoc-in sets path token-set)
|
||||
themes
|
||||
active-themes)))
|
||||
|
|
@ -625,18 +644,18 @@ When `before-set-name` is nil, move set to bottom")
|
|||
this token-sets))
|
||||
|
||||
(update-set [this set-name f]
|
||||
(let [path (split-token-set-name set-name)
|
||||
set (get-in sets path)]
|
||||
(let [prefixed-full-path (set-name->prefixed-full-path set-name)
|
||||
set (get-in sets prefixed-full-path)]
|
||||
(if set
|
||||
(let [set' (-> (make-token-set (f set))
|
||||
(assoc :modified-at (dt/now)))
|
||||
path' (get-token-set-path set')
|
||||
prefixed-full-path' (get-token-set-prefixed-path set')
|
||||
name-changed? (not= (:name set) (:name set'))]
|
||||
(check-token-set! set')
|
||||
(if name-changed?
|
||||
(TokensLib. (-> sets
|
||||
(d/oassoc-in-before path path' set')
|
||||
(d/dissoc-in path))
|
||||
(d/oassoc-in-before prefixed-full-path prefixed-full-path' set')
|
||||
(d/dissoc-in prefixed-full-path))
|
||||
(walk/postwalk
|
||||
(fn [form]
|
||||
(if (instance? TokenTheme form)
|
||||
|
|
@ -644,33 +663,34 @@ When `before-set-name` is nil, move set to bottom")
|
|||
form))
|
||||
themes)
|
||||
active-themes)
|
||||
(TokensLib. (d/oassoc-in sets path set')
|
||||
(TokensLib. (d/oassoc-in sets prefixed-full-path set')
|
||||
themes
|
||||
active-themes)))
|
||||
this)))
|
||||
|
||||
(delete-set-path [_ set-path]
|
||||
(let [path (split-token-set-path set-path)
|
||||
set-node (get-in sets path)
|
||||
set-group? (not (instance? TokenSet set-node))]
|
||||
(TokensLib. (d/dissoc-in sets path)
|
||||
(delete-set-path [_ prefixed-set-name]
|
||||
(let [prefixed-set-path (split-token-set-path prefixed-set-name)
|
||||
set-node (get-in sets prefixed-set-path)
|
||||
set-group? (not (instance? TokenSet set-node))
|
||||
set-name-string (prefixed-set-path-string->set-name-string prefixed-set-name)]
|
||||
(TokensLib. (d/dissoc-in sets prefixed-set-path)
|
||||
;; TODO: When deleting a set-group, also deactivate the child sets
|
||||
(if set-group?
|
||||
themes
|
||||
(walk/postwalk
|
||||
(fn [form]
|
||||
(if (instance? TokenTheme form)
|
||||
(disable-set form set-path)
|
||||
(disable-set form set-name-string)
|
||||
form))
|
||||
themes))
|
||||
active-themes)))
|
||||
|
||||
;; TODO Handle groups and nesting
|
||||
(move-set-before [this set-name before-set-name]
|
||||
(let [source-path (split-token-set-name set-name)
|
||||
(let [source-path (set-name->prefixed-full-path set-name)
|
||||
token-set (-> (get-set this set-name)
|
||||
(assoc :modified-at (dt/now)))
|
||||
target-path (split-token-set-name before-set-name)]
|
||||
target-path (set-name->prefixed-full-path before-set-name)]
|
||||
(if before-set-name
|
||||
(TokensLib. (d/oassoc-in-before sets target-path source-path token-set)
|
||||
themes
|
||||
|
|
@ -691,7 +711,7 @@ When `before-set-name` is nil, move set to bottom")
|
|||
(->> (tree-seq d/ordered-map? vals sets)
|
||||
(filter (partial instance? TokenSet))))
|
||||
|
||||
(get-path-sets [_ path]
|
||||
(get-sets-at-prefix-path [_ path]
|
||||
(some->> (get-in sets (split-token-set-path path))
|
||||
(tree-seq d/ordered-map? vals)
|
||||
(filter (partial instance? TokenSet))))
|
||||
|
|
@ -703,7 +723,7 @@ When `before-set-name` is nil, move set to bottom")
|
|||
(count (get-sets this)))
|
||||
|
||||
(get-set [_ set-name]
|
||||
(let [path (split-token-set-name set-name)]
|
||||
(let [path (set-name->prefixed-full-path set-name)]
|
||||
(get-in sets path)))
|
||||
|
||||
(get-neighbor-set-name [this set-name index-offset]
|
||||
|
|
|
|||
|
|
@ -100,7 +100,6 @@
|
|||
(->> (ctob/move-set-before tokens-lib set-name before-set-name)
|
||||
(ctob/get-ordered-set-names)
|
||||
(into [])))]
|
||||
;; TODO Nested moving doesn't work as expected
|
||||
(t/testing "regular moving"
|
||||
(t/is (= ["A" "Move" "B"] (move "Move" "B")))
|
||||
(t/is (= ["B" "A" "Move"] (move "A" "Move"))))
|
||||
|
|
@ -241,11 +240,10 @@
|
|||
(ctob/delete-set-path "S-not-existing-set"))
|
||||
|
||||
token-set' (ctob/get-set tokens-lib' "updated-name")
|
||||
;;token-theme' (ctob/get-theme tokens-lib' "" "test-token-theme")
|
||||
]
|
||||
token-theme' (ctob/get-theme tokens-lib' "" "test-token-theme")]
|
||||
|
||||
(t/is (= (ctob/set-count tokens-lib') 0))
|
||||
;; (t/is (= (:sets token-theme') #{})) TODO: fix this
|
||||
(t/is (= (:sets token-theme') #{}))
|
||||
(t/is (nil? token-set'))))
|
||||
|
||||
(t/deftest active-themes-set-names
|
||||
|
|
|
|||
|
|
@ -80,6 +80,8 @@ export class WorkspacePage extends BaseWebSocketPage {
|
|||
"token-update-create-modal",
|
||||
);
|
||||
this.tokenThemesSetsSidebar = page.getByTestId("token-themes-sets-sidebar");
|
||||
this.tokenSetItems = page.getByTestId("tokens-set-item");
|
||||
this.tokenSetGroupItems = page.getByTestId("tokens-set-group-item");
|
||||
}
|
||||
|
||||
async goToWorkspace({
|
||||
|
|
|
|||
|
|
@ -18,14 +18,21 @@ const setupFileWithTokens = async (page) => {
|
|||
const tokensTabButton = page.getByRole("tab", { name: "Tokens" });
|
||||
await tokensTabButton.click();
|
||||
|
||||
return { workspacePage };
|
||||
return {
|
||||
workspacePage,
|
||||
tokensUpdateCreateModal: workspacePage.tokensUpdateCreateModal,
|
||||
tokenThemesSetsSidebar: workspacePage.tokenThemesSetsSidebar,
|
||||
tokenSetItems: workspacePage.tokenSetItems,
|
||||
tokenSetGroupItems: workspacePage.tokenSetGroupItems,
|
||||
};
|
||||
};
|
||||
|
||||
test.describe("Tokens: Tab", () => {
|
||||
test.describe("Tokens: Tokens Tab", () => {
|
||||
test("Clicking tokens tab button opens tokens sidebar tab", async ({
|
||||
page,
|
||||
}) => {
|
||||
const { workspacePage } = await setupFileWithTokens(page);
|
||||
const { workspacePage, tokensUpdateCreateModal, tokenThemesSetsSidebar } =
|
||||
await setupFileWithTokens(page);
|
||||
|
||||
const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" });
|
||||
|
||||
|
|
@ -36,18 +43,18 @@ test.describe("Tokens: Tab", () => {
|
|||
test("User creates color token and auto created set show up in the sidebar", async ({
|
||||
page,
|
||||
}) => {
|
||||
const { workspacePage } = await setupFileWithTokens(page);
|
||||
const { workspacePage, tokensUpdateCreateModal, tokenThemesSetsSidebar } =
|
||||
await setupFileWithTokens(page);
|
||||
|
||||
const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" });
|
||||
await tokensTabPanel.getByTitle("Add token: Color").click();
|
||||
|
||||
// Create color token with mouse
|
||||
|
||||
await expect(workspacePage.tokensUpdateCreateModal).toBeVisible();
|
||||
await expect(tokensUpdateCreateModal).toBeVisible();
|
||||
|
||||
const nameField = workspacePage.tokensUpdateCreateModal.getByLabel("Name");
|
||||
const valueField =
|
||||
workspacePage.tokensUpdateCreateModal.getByLabel("Value");
|
||||
const nameField = tokensUpdateCreateModal.getByLabel("Name");
|
||||
const valueField = tokensUpdateCreateModal.getByLabel("Value");
|
||||
|
||||
await nameField.click();
|
||||
await nameField.fill("color.primary");
|
||||
|
|
@ -55,12 +62,9 @@ test.describe("Tokens: Tab", () => {
|
|||
await valueField.click();
|
||||
await valueField.fill("red");
|
||||
|
||||
const submitButton = workspacePage.tokensUpdateCreateModal.getByRole(
|
||||
"button",
|
||||
{
|
||||
name: "Save",
|
||||
},
|
||||
);
|
||||
const submitButton = tokensUpdateCreateModal.getByRole("button", {
|
||||
name: "Save",
|
||||
});
|
||||
await expect(submitButton).toBeEnabled();
|
||||
await submitButton.click();
|
||||
|
||||
|
|
@ -69,7 +73,7 @@ test.describe("Tokens: Tab", () => {
|
|||
// Create token referencing the previous one with keyboard
|
||||
|
||||
await tokensTabPanel.getByTitle("Add token: Color").click();
|
||||
await expect(workspacePage.tokensUpdateCreateModal).toBeVisible();
|
||||
await expect(tokensUpdateCreateModal).toBeVisible();
|
||||
|
||||
await nameField.click();
|
||||
await nameField.fill("color.secondary");
|
||||
|
|
@ -89,14 +93,51 @@ test.describe("Tokens: Tab", () => {
|
|||
|
||||
// Global set has been auto created and is active
|
||||
await expect(
|
||||
workspacePage.tokenThemesSetsSidebar.getByRole("button", {
|
||||
tokenThemesSetsSidebar.getByRole("button", {
|
||||
name: "Global",
|
||||
}),
|
||||
).toHaveCount(1);
|
||||
await expect(
|
||||
workspacePage.tokenThemesSetsSidebar.getByRole("button", {
|
||||
tokenThemesSetsSidebar.getByRole("button", {
|
||||
name: "Global",
|
||||
}),
|
||||
).toHaveAttribute("aria-checked", "true");
|
||||
});
|
||||
});
|
||||
|
||||
test.describe("Tokens: Sets Tab", () => {
|
||||
const createSet = async (sidebar, setName, finalKey = "Enter") => {
|
||||
const tokensTabButton = sidebar
|
||||
.getByRole("button", { name: "Add set" })
|
||||
.click();
|
||||
|
||||
const setInput = sidebar.locator("input:focus");
|
||||
await expect(setInput).toBeVisible();
|
||||
await setInput.fill(setName);
|
||||
await setInput.press(finalKey);
|
||||
};
|
||||
|
||||
test("User creates sets tree structure by entering a set path", async ({
|
||||
page,
|
||||
}) => {
|
||||
const {
|
||||
workspacePage,
|
||||
tokenThemesSetsSidebar,
|
||||
tokenSetItems,
|
||||
tokenSetGroupItems,
|
||||
} = await setupFileWithTokens(page);
|
||||
|
||||
const tokensTabButton = tokenThemesSetsSidebar
|
||||
.getByRole("button", { name: "Add set" })
|
||||
.click();
|
||||
|
||||
await createSet(tokenThemesSetsSidebar, "core/colors/light");
|
||||
await createSet(tokenThemesSetsSidebar, "core/colors/dark");
|
||||
|
||||
// User cancels during editing
|
||||
await createSet(tokenThemesSetsSidebar, "core/colors/dark", "Escape");
|
||||
|
||||
await expect(tokenSetItems).toHaveCount(2);
|
||||
await expect(tokenSetGroupItems).toHaveCount(2);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -88,20 +88,20 @@
|
|||
(let [workspace-data (deref refs/workspace-data)]
|
||||
(get (:tokens workspace-data) id)))
|
||||
|
||||
(defn set-selected-token-set-id
|
||||
[id]
|
||||
(ptk/reify ::set-selected-token-set-id
|
||||
(defn set-selected-token-set-path
|
||||
[full-path]
|
||||
(ptk/reify ::set-selected-token-set-path
|
||||
ptk/UpdateEvent
|
||||
(update [_ state]
|
||||
(wtts/assoc-selected-token-set-id state id))))
|
||||
(wtts/assoc-selected-token-set-path state full-path))))
|
||||
|
||||
(defn set-selected-token-set-id-from-name
|
||||
(defn set-selected-token-set-path-from-name
|
||||
[token-set-name]
|
||||
(ptk/reify ::set-selected-token-set-id-from-name
|
||||
(ptk/reify ::set-selected-token-set-path-from-name
|
||||
ptk/UpdateEvent
|
||||
(update [_ state]
|
||||
(->> (ctob/set-name->set-path-string token-set-name)
|
||||
(wtts/assoc-selected-token-set-id state)))))
|
||||
(->> (ctob/set-name-string->prefixed-set-path-string token-set-name)
|
||||
(wtts/assoc-selected-token-set-path state)))))
|
||||
|
||||
(defn create-token-theme [token-theme]
|
||||
(let [new-token-theme token-theme]
|
||||
|
|
@ -165,7 +165,7 @@
|
|||
(let [changes (-> (pcb/empty-changes it)
|
||||
(pcb/add-token-set new-token-set))]
|
||||
(rx/of
|
||||
(set-selected-token-set-id-from-name (:name new-token-set))
|
||||
(set-selected-token-set-path-from-name (:name new-token-set))
|
||||
(dch/commit-changes changes)))))))
|
||||
|
||||
(defn update-token-set [set-name token-set]
|
||||
|
|
@ -177,7 +177,7 @@
|
|||
changes (-> (pcb/empty-changes it)
|
||||
(pcb/update-token-set token-set prev-token-set))]
|
||||
(rx/of
|
||||
(set-selected-token-set-id-from-name (:name token-set))
|
||||
(set-selected-token-set-path-from-name (:name token-set))
|
||||
(dch/commit-changes changes))))))
|
||||
|
||||
(defn toggle-token-set [{:keys [token-set-name]}]
|
||||
|
|
@ -210,7 +210,7 @@
|
|||
(ctob/get-sets)
|
||||
(first)
|
||||
(:name)
|
||||
(set-selected-token-set-id-from-name))
|
||||
(set-selected-token-set-path-from-name))
|
||||
changes (-> (pcb/empty-changes it)
|
||||
(pcb/with-library-data data)
|
||||
(pcb/set-tokens-lib lib))]
|
||||
|
|
@ -219,14 +219,14 @@
|
|||
update-token-set-change
|
||||
(wtu/update-workspace-tokens))))))
|
||||
|
||||
(defn delete-token-set-path [token-set-path]
|
||||
(defn delete-token-set-path [prefixed-full-set-path]
|
||||
(ptk/reify ::delete-token-set-path
|
||||
ptk/WatchEvent
|
||||
(watch [it state _]
|
||||
(let [data (get state :workspace-data)
|
||||
changes (-> (pcb/empty-changes it)
|
||||
(pcb/with-library-data data)
|
||||
(pcb/delete-token-set-path token-set-path))]
|
||||
(pcb/delete-token-set-path prefixed-full-set-path))]
|
||||
(rx/of
|
||||
(dch/commit-changes changes)
|
||||
(wtu/update-workspace-tokens))))))
|
||||
|
|
@ -276,7 +276,7 @@
|
|||
(pcb/update-token (pcb/empty-changes) (:name token-set) token prev-token)
|
||||
(pcb/add-token (pcb/empty-changes) (:name token-set) token)))]
|
||||
(rx/of
|
||||
(set-selected-token-set-id-from-name token-set-name)
|
||||
(set-selected-token-set-path-from-name token-set-name)
|
||||
(dch/commit-changes changes))))))
|
||||
|
||||
(defn delete-token
|
||||
|
|
|
|||
|
|
@ -490,8 +490,8 @@
|
|||
(def workspace-token-themes-no-hidden
|
||||
(l/derived #(remove ctob/hidden-temporary-theme? %) workspace-token-themes))
|
||||
|
||||
(def workspace-selected-token-set-id
|
||||
(l/derived wtts/get-selected-token-set-id st/state))
|
||||
(def workspace-selected-token-set-path
|
||||
(l/derived wtts/get-selected-token-set-path st/state))
|
||||
|
||||
(def workspace-token-set-group-selected?
|
||||
(l/derived wtts/token-group-selected? st/state))
|
||||
|
|
|
|||
|
|
@ -204,10 +204,10 @@
|
|||
(generic-attribute-actions #{:x} "X" (assoc context-data :on-update-shape wtch/update-shape-position))
|
||||
(generic-attribute-actions #{:y} "Y" (assoc context-data :on-update-shape wtch/update-shape-position))))}))
|
||||
|
||||
(defn default-actions [{:keys [token selected-token-set-id]}]
|
||||
(defn default-actions [{:keys [token selected-token-set-path]}]
|
||||
(let [{:keys [modal]} (wtty/get-token-properties token)]
|
||||
[{:title "Delete Token"
|
||||
:action #(st/emit! (dt/delete-token (ctob/set-path->set-name selected-token-set-id) (:name token)))}
|
||||
:action #(st/emit! (dt/delete-token (ctob/prefixed-set-path-string->set-name-string selected-token-set-path) (:name token)))}
|
||||
{:title "Duplicate Token"
|
||||
:action #(st/emit! (dt/duplicate-token (:name token)))}
|
||||
{:title "Edit Token"
|
||||
|
|
@ -220,7 +220,7 @@
|
|||
:position :right
|
||||
:fields fields
|
||||
:action "edit"
|
||||
:selected-token-set-id selected-token-set-id
|
||||
:selected-token-set-path selected-token-set-path
|
||||
:token token})))}]))
|
||||
|
||||
(defn selection-actions [{:keys [type token] :as context-data}]
|
||||
|
|
@ -311,11 +311,11 @@
|
|||
selected-shapes (into [] (keep (d/getf objects)) selected)
|
||||
token-name (:token-name mdata)
|
||||
token (mf/deref (refs/workspace-selected-token-set-token token-name))
|
||||
selected-token-set-id (mf/deref refs/workspace-selected-token-set-id)]
|
||||
selected-token-set-path (mf/deref refs/workspace-selected-token-set-path)]
|
||||
[:ul {:class (stl/css :context-list)}
|
||||
[:& menu-tree {:submenu-offset width
|
||||
:token token
|
||||
:selected-token-set-id selected-token-set-id
|
||||
:selected-token-set-path selected-token-set-path
|
||||
:selected-shapes selected-shapes}]]))
|
||||
|
||||
(mf/defc token-context-menu
|
||||
|
|
|
|||
|
|
@ -204,7 +204,7 @@ Token names should only contain letters and digits separated by . characters.")}
|
|||
|
||||
(mf/defc form
|
||||
{::mf/wrap-props false}
|
||||
[{:keys [token token-type action selected-token-set-id]}]
|
||||
[{:keys [token token-type action selected-token-set-path]}]
|
||||
(let [token (or token {:type token-type})
|
||||
token-properties (wtty/get-token-properties token)
|
||||
color? (wtt/color-token? token)
|
||||
|
|
@ -348,11 +348,11 @@ Token names should only contain letters and digits separated by . characters.")}
|
|||
(modal/hide!))))))))
|
||||
on-delete-token
|
||||
(mf/use-fn
|
||||
(mf/deps selected-token-set-id)
|
||||
(mf/deps selected-token-set-path)
|
||||
(fn [e]
|
||||
(dom/prevent-default e)
|
||||
(modal/hide!)
|
||||
(st/emit! (dt/delete-token (ctob/set-path->set-name selected-token-set-id) (:name token)))))
|
||||
(st/emit! (dt/delete-token (ctob/prefixed-set-path-string->set-name-string selected-token-set-path) (:name token)))))
|
||||
|
||||
on-cancel
|
||||
(mf/use-fn
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@
|
|||
|
||||
(mf/defc token-update-create-modal
|
||||
{::mf/wrap-props false}
|
||||
[{:keys [x y position token token-type action selected-token-set-id] :as _args}]
|
||||
[{:keys [x y position token token-type action selected-token-set-path] :as _args}]
|
||||
(let [wrapper-style (use-viewport-position-style x y position)
|
||||
close-modal (mf/use-fn
|
||||
(fn []
|
||||
|
|
@ -57,7 +57,7 @@
|
|||
:aria-label (tr "labels.close")}]
|
||||
[:& form {:token token
|
||||
:action action
|
||||
:selected-token-set-id selected-token-set-id
|
||||
:selected-token-set-path selected-token-set-path
|
||||
:token-type token-type}]]))
|
||||
|
||||
;; Modals ----------------------------------------------------------------------
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
(st/emit! (wdt/toggle-token-set {:token-set-name token-set-name})))
|
||||
|
||||
(defn on-select-token-set-click [tree-path]
|
||||
(st/emit! (wdt/set-selected-token-set-id tree-path)))
|
||||
(st/emit! (wdt/set-selected-token-set-path tree-path)))
|
||||
|
||||
(defn on-update-token-set [set-name token-set]
|
||||
(st/emit! (wdt/update-token-set set-name token-set)))
|
||||
|
|
@ -83,6 +83,7 @@
|
|||
:tree-path tree-path})))))]
|
||||
[:div {;; :ref dref
|
||||
:role "button"
|
||||
:data-testid "tokens-set-group-item"
|
||||
:style {"--tree-depth" tree-depth}
|
||||
:class (stl/css-case :set-item-container true
|
||||
:selected-set selected?)
|
||||
|
|
@ -133,6 +134,7 @@
|
|||
:tree-path tree-path})))))]
|
||||
[:div {;; :ref dref
|
||||
:role "button"
|
||||
:data-testid "tokens-set-item"
|
||||
:style {"--tree-depth" tree-depth}
|
||||
:class (stl/css-case :set-item-container true
|
||||
:selected-set selected?)
|
||||
|
|
@ -167,7 +169,7 @@
|
|||
[{:keys [set-path set-node tree-depth tree-path on-select selected? on-toggle active? editing? on-edit on-edit-reset on-edit-submit]
|
||||
:or {tree-depth 0}
|
||||
:as props}]
|
||||
(let [[set-prefix set-path'] (some-> set-path (ctob/split-set-prefix))
|
||||
(let [[set-prefix set-path'] (some-> set-path (ctob/split-set-str-path-prefix))
|
||||
set? (instance? ctob/TokenSet set-node)
|
||||
set-group? (= ctob/set-group-prefix set-prefix)
|
||||
root? (= tree-depth 0)
|
||||
|
|
@ -270,11 +272,11 @@
|
|||
(mf/defc sets-list
|
||||
[{:keys []}]
|
||||
(let [token-sets (mf/deref refs/workspace-token-sets-tree)
|
||||
selected-token-set-id (mf/deref refs/workspace-selected-token-set-id)
|
||||
selected-token-set-path (mf/deref refs/workspace-selected-token-set-path)
|
||||
token-set-selected? (mf/use-fn
|
||||
(mf/deps token-sets selected-token-set-id)
|
||||
(mf/deps token-sets selected-token-set-path)
|
||||
(fn [tree-path]
|
||||
(= tree-path selected-token-set-id)))
|
||||
(= tree-path selected-token-set-path)))
|
||||
active-token-set-names (mf/deref refs/workspace-active-set-names)
|
||||
token-set-active? (mf/use-fn
|
||||
(mf/deps active-token-set-names)
|
||||
|
|
|
|||
|
|
@ -36,15 +36,15 @@
|
|||
|
||||
;; === Set selection
|
||||
|
||||
(defn get-selected-token-set-id [state]
|
||||
(or (get-in state [:workspace-local :selected-token-set-id])
|
||||
(defn get-selected-token-set-path [state]
|
||||
(or (get-in state [:workspace-local :selected-token-set-path])
|
||||
(some-> (get-workspace-tokens-lib state)
|
||||
(ctob/get-sets)
|
||||
(first)
|
||||
(ctob/get-set-path))))
|
||||
(ctob/get-set-prefixed-path-string))))
|
||||
|
||||
(defn get-selected-token-set-node [state]
|
||||
(when-let [path (some-> (get-selected-token-set-id state)
|
||||
(when-let [path (some-> (get-selected-token-set-path state)
|
||||
(ctob/split-token-set-path))]
|
||||
(some-> (get-workspace-tokens-lib state)
|
||||
(ctob/get-in-set-tree path))))
|
||||
|
|
@ -66,5 +66,5 @@
|
|||
(defn token-group-selected? [state]
|
||||
(some? (get-selected-token-set-group state)))
|
||||
|
||||
(defn assoc-selected-token-set-id [state id]
|
||||
(assoc-in state [:workspace-local :selected-token-set-id] id))
|
||||
(defn assoc-selected-token-set-path [state id]
|
||||
(assoc-in state [:workspace-local :selected-token-set-path] id))
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue