Merge pull request #159 from tokens-studio/sizing-token-context-menu

Add context menu functionalities on sizing tokens

.gimlet/penpot-pr.yaml

@@ -14,7 +14,7 @@ values:
   image:
     pullPolicy: IfNotPresent
     repository: ghcr.io/tokens-studio/tokens-studio-for-penpot
-    tag: 'frontend-pr-{{ .SHA }}'
+    tag: 'frontend-{{ .SHA }}'
   ingress:     
     hosts:
       - host: "{{ .BRANCH | sanitizeDNSName }}.penpot.staging.tokens.studio"

.gimlet/penpot-prod.yaml

@@ -116,6 +116,7 @@ manifests: |
           enabled: true
           annotations:
             cert-manager.io/cluster-issuer: letsencrypt-prod
+            networking.gke.io/v1beta1.FrontendConfig: default-frontend-config
           hosts:
             - host: penpot.tokens.studio
           tls:

.github/workflows/pr.yaml

@@ -12,8 +12,7 @@ jobs:
       matrix:
         include:
           - dockerfile: Dockerfile.frontend
-            type: pr-frontend
-            name: frontend
+            type: frontend
     permissions:
       contents: read
       packages: write
@@ -31,7 +30,7 @@ jobs:
       with:
         registry: ghcr.io
         username: ${{ github.actor }}
-        password: ${{ secrets.PAT_TOKEN  }}
+        password: ${{ secrets.GHCR_TOKEN  }}
 
     - name: Docker meta
       id: meta
@@ -43,9 +42,9 @@ jobs:
           ghcr.io/tokens-studio/tokens-studio-for-penpot
     - name: prebuild
       run: |
-        echo "Building ${{ matrix.name }} image"
-        ./manage.sh build-${{matrix.name}}-bundle
-        mv ./bundles/${{matrix.name}} ./docker/images/bundle-${{matrix.name}}/
+        echo "Building ${{ matrix.type }} image"
+        ./manage.sh build-${{matrix.type}}-bundle
+        mv ./bundles/${{matrix.type}} ./docker/images/bundle-${{matrix.type}}/
 
     - name: Publish Docker images
       uses: docker/build-push-action@v5
@@ -66,6 +65,5 @@ jobs:
       - name: 🍍 Deploy with Gimlet
         uses: gimlet-io/gimlet-artifact-shipper-action@v0.8.3
         env:
-          GIMLET_SERVER: ${{ secrets.GIMLET_SERVER }}
-          GIMLET_TOKEN: ${{ secrets.GIMLET_TOKEN }}
-          DEPLOY: 'true'
+            GIMLET_SERVER: ${{ secrets.GIMLET_SERVER }}
+            GIMLET_TOKEN: ${{ secrets.GIMLET_TOKEN }}

.github/workflows/publish.yml

@@ -31,8 +31,7 @@ jobs:
       with:
         registry: ghcr.io
         username: ${{ github.actor }}
-        password: ${{ secrets.PAT_TOKEN  }}
-        
+        password: ${{ secrets.GHCR_TOKEN  }}
 
     - name: Docker meta
       id: meta
@@ -72,7 +71,7 @@ jobs:
         with:
           ENV: "prod"
           APP: "penpot"
-          WAIT: "true"
+          DEPLOY: "true"
   smoke:
     runs-on: ubuntu-latest
     needs:

common/src/app/common/types/token.cljc

@@ -77,10 +77,10 @@
   [:map
    [:width {:optional true} ::sm/uuid]
    [:height {:optional true} ::sm/uuid]
-   [:min-height {:optional true} ::sm/uuid]
-   [:max-height {:optional true} ::sm/uuid]
-   [:min-width {:optional true} ::sm/uuid]
-   [:max-width {:optional true} ::sm/uuid]])
+   [:layout-item-min-w {:optional true} ::sm/uuid]
+   [:layout-item-max-w {:optional true} ::sm/uuid]
+   [:layout-item-min-h {:optional true} ::sm/uuid]
+   [:layout-item-max-h {:optional true} ::sm/uuid]])
 
 (def sizing-keys (schema-keys ::sizing))
 

frontend/src/app/main/ui/workspace/tokens/context_menu.cljs

@@ -13,6 +13,7 @@
    [app.main.data.tokens :as dt]
    [app.main.data.workspace.changes :as dch]
    [app.main.data.workspace.shape-layout :as dwsl]
+   [app.main.data.workspace.transforms :as dwt]
    [app.main.refs :as refs]
    [app.main.store :as st]
    [app.main.ui.components.dropdown :refer [dropdown]]
@@ -54,12 +55,35 @@
     (st/emit! (dwsl/update-layout shape-ids {:layout-padding (zipmap attributes (repeat value))}))))
 
 
-(defn apply-spacing-token [{:keys [token-id token-type-props selected-shapes]} attribute]
+(defn apply-spacing-token [{:keys [token-id token-type-props selected-shapes]} attributes]
   (let [token (dt/get-token-data-from-token-id token-id)
-        attribute (set attribute)
+        attributes (set attributes)
         updated-token-type-props (assoc token-type-props
                                         :on-update-shape update-layout-spacing
-                                        :attributes attribute)]
+                                        :attributes attributes)]
+    (wtc/on-apply-token {:token token
+                         :token-type-props updated-token-type-props
+                         :selected-shapes selected-shapes})))
+
+(defn update-shape-dimensions [value shape-ids attributes]
+  (st/emit! (dwt/update-dimensions shape-ids (first attributes) value)))
+
+(defn update-layout-sizing-limits [value shape-ids attributes]
+  (st/emit! (dwsl/update-layout-child shape-ids {(first attributes) value})))
+
+(defn apply-sizing-token [{:keys [token-id token-type-props selected-shapes]} attributes]
+  (let [token (dt/get-token-data-from-token-id token-id)
+        updated-token-type-props (cond
+                                   (set/superset? #{:width :height} attributes)
+                                   (assoc token-type-props
+                                          :on-update-shape update-shape-dimensions
+                                          :attributes attributes)
+
+                                   (set/superset? {:layout-item-min-w :layout-item-max-w
+                                                   :layout-item-min-h :layout-item-max-h} attributes)
+                                   (assoc token-type-props
+                                          :on-update-shape update-layout-sizing-limits
+                                          :attributes attributes))]
     (wtc/on-apply-token {:token token
                          :token-type-props updated-token-type-props
                          :selected-shapes selected-shapes})))
@@ -90,6 +114,17 @@
                        {:title "Right" :attributes #{:p2}}
                        {:title "Bottom" :attributes #{:p3}}
                        {:title "Left" :attributes #{:p4}}])
+
+      :sizing       (attributes->actions
+                     apply-sizing-token
+                     [{:title "All" :attributes #{:width :height :layout-item-min-w :layout-item-max-w :layout-item-min-h :layout-item-max-h}}
+                      {:title "Width" :attributes #{:width}}
+                      {:title "Height" :attributes #{:height}}
+                      {:title "Min width" :attributes #{:layout-item-min-w}}
+                      {:title "Max width" :attributes #{:layout-item-max-w}}
+                      {:title "Min height" :attributes #{:layout-item-min-h}}
+                      {:title "Max height" :attributes #{:layout-item-max-h}}])
+
       [])))
 
 (defn generate-menu-entries [{:keys [token-id token-type-props token-type selected-shapes] :as context-data}]

frontend/src/app/main/ui/workspace/tokens/context_menu.scss

@@ -24,19 +24,8 @@
   background-color: var(--menu-background-color);
   max-height: 100vh;
   overflow-y: auto;
-
-  // TODO: Fixes missing styles from parent context menu
-  li {
-    @include bodySmallTypography;
-    color: var(--menu-foreground-color);
-  }
 }
 
-// TODO: Allow selected items wihtout an icon for the context menu
-.empty-icon {
-  width: 0;
-  height: 0;
-}
-.hidden-icon {
-  width: 11px;
+.token-context-submenu {
+  position: absolute;
 }