mirror of
https://github.com/penpot/penpot.git
synced 2025-06-11 11:51:40 +02:00
Merge remote-tracking branch 'origin/staging' into develop
This commit is contained in:
Andrey Antukh
commit
88540eeedd
13 changed files with 240 additions and 286 deletions
|
|
@ -20,6 +20,7 @@
|
|||
:comments
|
||||
:assets
|
||||
:document-history
|
||||
:hide-palettes
|
||||
:colorpalette
|
||||
:element-options
|
||||
:rulers
|
||||
|
|
@ -134,7 +135,8 @@
|
|||
"A map of layout flags that should be persisted in local storage; the
|
||||
value corresponds to the key that will be used for save the data in
|
||||
storage object. It should be namespace qualified."
|
||||
{:colorpalette :app.main.data.workspace/show-colorpalette?
|
||||
{:hide-palettes :app.main.data.workspace/hide-palettes?
|
||||
:colorpalette :app.main.data.workspace/show-colorpalette?
|
||||
:textpalette :app.main.data.workspace/show-textpalette?})
|
||||
|
||||
(defn load-layout-flags
|
||||
|
|
|
|||
|
|
@ -436,14 +436,16 @@
|
|||
:command (ds/a-mod "p")
|
||||
:subsections [:panels]
|
||||
:fn #(do (r/set-resize-type! :bottom)
|
||||
(emit-when-no-readonly (dw/remove-layout-flag :textpalette)
|
||||
(emit-when-no-readonly (dw/remove-layout-flag :hide-palettes)
|
||||
(dw/remove-layout-flag :textpalette)
|
||||
(toggle-layout-flag :colorpalette)))}
|
||||
|
||||
:toggle-textpalette {:tooltip (ds/alt "T")
|
||||
:command (ds/a-mod "t")
|
||||
:subsections [:panels]
|
||||
:fn #(do (r/set-resize-type! :bottom)
|
||||
(emit-when-no-readonly (dw/remove-layout-flag :colorpalette)
|
||||
(emit-when-no-readonly (dw/remove-layout-flag :hide-palettes)
|
||||
(dw/remove-layout-flag :colorpalette)
|
||||
(toggle-layout-flag :textpalette)))}
|
||||
|
||||
:hide-ui {:tooltip "\\"
|
||||
|
|
|
|||
|
|
@ -49,12 +49,12 @@
|
|||
(when (some? on-prev)
|
||||
[:button {:class (stl/css :prev-button)
|
||||
:on-click on-prev}
|
||||
(tr "questions.previous")])
|
||||
(tr "labels.previous")])
|
||||
|
||||
[:> fm/submit-button*
|
||||
{:label (if (< step 5)
|
||||
(tr "questions.next")
|
||||
(tr "questions.start"))
|
||||
(tr "labels.next")
|
||||
(tr "labels.start"))
|
||||
:class (stl/css :next-button)}]]]))
|
||||
|
||||
(s/def ::questions-form-step-1
|
||||
|
|
@ -82,28 +82,28 @@
|
|||
[{:keys [on-next form]}]
|
||||
(let [use-options
|
||||
(mf/with-memo []
|
||||
(shuffle [{:label (tr "questions.use-work") :value "use-work"}
|
||||
{:label (tr "questions.use-education") :value "use-education"}
|
||||
{:label (tr "questions.use-personal") :value "use-personal"}]))
|
||||
(shuffle [{:label (tr "onboarding.questions.use.work") :value "work"}
|
||||
{:label (tr "onboarding.questions.use.education") :value "education"}
|
||||
{:label (tr "onboarding.questions.use.personal") :value "personal"}]))
|
||||
|
||||
planning-options
|
||||
(mf/with-memo []
|
||||
(-> (shuffle [{:label (tr "questions.select-option")
|
||||
(-> (shuffle [{:label (tr "labels.select-option")
|
||||
:value "" :key "questions:what-brings-you-here"
|
||||
:disabled true}
|
||||
{:label (tr "questions.reasons.exploring")
|
||||
{:label (tr "onboarding.questions.reasons.exploring")
|
||||
:value "discover-more-about-penpot"
|
||||
:key "discover-more-about-penpot"}
|
||||
{:label (tr "questions.reasons.fit")
|
||||
{:label (tr "onboarding.questions.reasons.fit")
|
||||
:value "test-penpot-to-see-if-its-a-fit-for-team"
|
||||
:key "test-penpot-to-see-if-its-a-fit-for-team"}
|
||||
{:label (tr "questions.reasons.alternative")
|
||||
{:label (tr "onboarding.questions.reasons.alternative")
|
||||
:value "alternative-to-figma"
|
||||
:key "alternative-to-figma"}
|
||||
{:label (tr "questions.reasons.testing")
|
||||
{:label (tr "onboarding.questions.reasons.testing")
|
||||
:value "try-out-before-using-penpot-on-premise"
|
||||
:key "try-out-before-using-penpot-on-premise"}])
|
||||
(conj {:label (tr "questions.other-short") :value "other"})))
|
||||
(conj {:label (tr "labels.other-short") :value "other"})))
|
||||
|
||||
current-planning
|
||||
(dm/get-in @form [:data :planning])]
|
||||
|
|
@ -116,22 +116,22 @@
|
|||
|
||||
[:img {:class (stl/css :header-image)
|
||||
:src "images/form/use-for-1.png"
|
||||
:alt (tr "questions.lets-get-started")}]
|
||||
:alt (tr "onboarding.questions.lets-get-started")}]
|
||||
[:h1 {:class (stl/css :modal-title)}
|
||||
(tr "questions.step1-title")]
|
||||
(tr "onboarding.questions.step1.title")]
|
||||
[:p {:class (stl/css :modal-text)}
|
||||
(tr "questions.step1-subtitle")]
|
||||
(tr "onboarding.questions.step1.subtitle")]
|
||||
|
||||
[:div {:class (stl/css :modal-question)}
|
||||
[:h3 {:class (stl/css :modal-subtitle)}
|
||||
(tr "questions.step1-question1")]
|
||||
(tr "onboarding.questions.step1.question1")]
|
||||
|
||||
[:& fm/radio-buttons {:options use-options
|
||||
:name :expected-use
|
||||
:class (stl/css :radio-btns)}]
|
||||
|
||||
[:h3 {:class (stl/css :modal-subtitle)}
|
||||
(tr "questions.step1-question2")]
|
||||
(tr "onboarding.questions.step1.question2")]
|
||||
|
||||
[:& fm/select
|
||||
{:options planning-options
|
||||
|
|
@ -143,7 +143,7 @@
|
|||
(when (= current-planning "other")
|
||||
[:& fm/input {:name :planning-other
|
||||
:class (stl/css :input-spacing)
|
||||
:placeholder (tr "questions.other")
|
||||
:placeholder (tr "labels.other")
|
||||
:label ""}])]]))
|
||||
|
||||
(s/def ::questions-form-step-2
|
||||
|
|
@ -168,17 +168,17 @@
|
|||
[{:keys [on-next on-prev form]}]
|
||||
(let [design-tool-options
|
||||
(mf/with-memo []
|
||||
(-> (shuffle [{:label (tr "questions.figma") :img-width "48px" :img-height "60px"
|
||||
(-> (shuffle [{:label (tr "labels.figma") :img-width "48px" :img-height "60px"
|
||||
:value "figma" :image "images/form/figma.png"}
|
||||
{:label (tr "questions.sketch") :img-width "48px" :img-height "60px"
|
||||
{:label (tr "labels.sketch") :img-width "48px" :img-height "60px"
|
||||
:value "sketch" :image "images/form/sketch.png"}
|
||||
{:label (tr "questions.adobe-xd") :img-width "48px" :img-height "60px"
|
||||
{:label (tr "labels.adobe-xd") :img-width "48px" :img-height "60px"
|
||||
:value "adobe-xd" :image "images/form/adobe-xd.png"}
|
||||
{:label (tr "questions.canva") :img-width "48px" :img-height "60px"
|
||||
{:label (tr "labels.canva") :img-width "48px" :img-height "60px"
|
||||
:value "canva" :image "images/form/canva.png"}
|
||||
{:label (tr "questions.invision") :img-width "48px" :img-height "60px"
|
||||
{:label (tr "labels.invision") :img-width "48px" :img-height "60px"
|
||||
:value "invision" :image "images/form/invision.png"}])
|
||||
(conj {:label (tr "questions.other-short") :value "other" :icon i/curve})))
|
||||
(conj {:label (tr "labels.other-short") :value "other" :icon i/curve})))
|
||||
|
||||
current-experience
|
||||
(dm/get-in @form [:clean-data :experience-design-tool])
|
||||
|
|
@ -199,7 +199,7 @@
|
|||
:class (stl/css :step-2)}
|
||||
|
||||
[:h1 {:class (stl/css :modal-title)}
|
||||
(tr "question.design-tool-more-used")]
|
||||
(tr "onboarding.questions.step2.title")]
|
||||
[:div {:class (stl/css :radio-wrapper)}
|
||||
[:& fm/image-radio-buttons {:options design-tool-options
|
||||
:img-width "48px"
|
||||
|
|
@ -212,7 +212,7 @@
|
|||
(when (= current-experience "other")
|
||||
[:& fm/input {:name :experience-design-tool-other
|
||||
:class (stl/css :input-spacing)
|
||||
:placeholder (tr "questions.other")
|
||||
:placeholder (tr "labels.other")
|
||||
:label ""}])]]))
|
||||
|
||||
(s/def ::questions-form-step-3
|
||||
|
|
@ -246,36 +246,35 @@
|
|||
[{:keys [on-next on-prev form]}]
|
||||
(let [role-options
|
||||
(mf/with-memo []
|
||||
(-> (shuffle [{:label (tr "questions.select-option") :value "" :key "role" :disabled true}
|
||||
{:label (tr "questions.work-type.ux") :value "designer" :key "designer"}
|
||||
{:label (tr "questions.work-type.dev") :value "developer" :key "developer"}
|
||||
{:label (tr "questions.work-type.student") :value "student-teacher" :key "student"}
|
||||
{:label (tr "questions.work-type.graphic") :value "graphic-design" :key "design"}
|
||||
{:label (tr "questions.work-type.marketing") :value "marketing" :key "marketing"}
|
||||
{:label (tr "questions.work-type.product") :value "manager" :key "manager"}])
|
||||
(conj {:label (tr "questions.other-short") :value "other"})))
|
||||
(-> (shuffle [{:label (tr "labels.select-option") :value "" :key "role" :disabled true}
|
||||
{:label (tr "labels.product-design") :value "ux" :key "ux"}
|
||||
{:label (tr "labels.developer") :value "developer" :key "developer"}
|
||||
{:label (tr "labels.student-teacher") :value "student-teacher" :key "student"}
|
||||
{:label (tr "labels.graphic-design") :value "designer" :key "design"}
|
||||
{:label (tr "labels.marketing") :value "marketing" :key "marketing"}
|
||||
{:label (tr "labels.product-management") :value "manager" :key "manager"}])
|
||||
(conj {:label (tr "labels.other-short") :value "other"})))
|
||||
|
||||
responsability-options
|
||||
(mf/with-memo []
|
||||
(-> (shuffle [{:label (tr "questions.select-option") :value "" :key "responsability" :disabled true}
|
||||
{:label (tr "questions.role.team-leader") :value "team-leader"}
|
||||
{:label (tr "questions.role.team-member") :value "team-member"}
|
||||
{:label (tr "questions.role.freelancer") :value "freelancer"}
|
||||
{:label (tr "questions.role.founder") :value "ceo-founder"}
|
||||
{:label (tr "questions.role.director") :value "director"}
|
||||
{:label (tr "questions.student-teacher") :value "student-teacher"}])
|
||||
(conj {:label (tr "questions.other-short") :value "other"})))
|
||||
(-> (shuffle [{:label (tr "labels.select-option") :value "" :key "responsability" :disabled true}
|
||||
{:label (tr "labels.team-leader") :value "team-leader"}
|
||||
{:label (tr "labels.team-member") :value "team-member"}
|
||||
{:label (tr "labels.freelancer") :value "freelancer"}
|
||||
{:label (tr "labels.founder") :value "ceo-founder"}
|
||||
{:label (tr "labels.director") :value "director"}])
|
||||
(conj {:label (tr "labels.other-short") :value "other"})))
|
||||
|
||||
|
||||
team-size-options
|
||||
(mf/with-memo []
|
||||
[{:label (tr "questions.select-option") :value "" :key "team-size" :disabled true}
|
||||
{:label (tr "questions.more-than-50") :value "more-than-50" :key "more-than-50"}
|
||||
{:label (tr "questions.31-50") :value "31-50" :key "31-50"}
|
||||
{:label (tr "questions.11-30") :value "11-30" :key "11-30"}
|
||||
{:label (tr "questions.2-10") :value "2-10" :key "2-10"}
|
||||
{:label (tr "questions.freelancer") :value "freelancer" :key "freelancer"}
|
||||
{:label (tr "questions.personal-project") :value "personal-project" :key "personal-project"}])
|
||||
[{:label (tr "labels.select-option") :value "" :key "team-size" :disabled true}
|
||||
{:label (tr "onboarding.questions.team-size.more-than-50") :value "more-than-50" :key "more-than-50"}
|
||||
{:label (tr "onboarding.questions.team-size.31-50") :value "31-50" :key "31-50"}
|
||||
{:label (tr "onboarding.questions.team-size.11-30") :value "11-30" :key "11-30"}
|
||||
{:label (tr "onboarding.questions.team-size.2-10") :value "2-10" :key "2-10"}
|
||||
{:label (tr "onboarding.questions.team-size.freelancer") :value "freelancer" :key "freelancer"}
|
||||
{:label (tr "onboarding.questions.team-size.personal-project") :value "personal-project" :key "personal-project"}])
|
||||
|
||||
current-role
|
||||
(dm/get-in @form [:data :role])
|
||||
|
|
@ -290,9 +289,10 @@
|
|||
:on-prev on-prev
|
||||
:class (stl/css :step-3)}
|
||||
|
||||
[:h1 {:class (stl/css :modal-title)} (tr "questions.step3-title")]
|
||||
[:h1 {:class (stl/css :modal-title)}
|
||||
(tr "onboarding.questions.step3.title")]
|
||||
[:div {:class (stl/css :modal-question)}
|
||||
[:h3 {:class (stl/css :modal-subtitle)} (tr "questions.step3.question1")]
|
||||
[:h3 {:class (stl/css :modal-subtitle)} (tr "onboarding.questions.step3.question1")]
|
||||
[:& fm/select {:options role-options
|
||||
:select-class (stl/css :select-class)
|
||||
:default ""
|
||||
|
|
@ -301,11 +301,11 @@
|
|||
(when (= current-role "other")
|
||||
[:& fm/input {:name :role-other
|
||||
:class (stl/css :input-spacing)
|
||||
:placeholder (tr "questions.other")
|
||||
:placeholder (tr "labels.other")
|
||||
:label ""}])]
|
||||
|
||||
[:div {:class (stl/css :modal-question)}
|
||||
[:h3 {:class (stl/css :modal-subtitle)} (tr "questions.step3.question2")]
|
||||
[:h3 {:class (stl/css :modal-subtitle)} (tr "onboarding.questions.step3.question2")]
|
||||
[:& fm/select {:options responsability-options
|
||||
:select-class (stl/css :select-class)
|
||||
:default ""
|
||||
|
|
@ -314,11 +314,11 @@
|
|||
(when (= current-responsability "other")
|
||||
[:& fm/input {:name :responsability-other
|
||||
:class (stl/css :input-spacing)
|
||||
:placeholder (tr "questions.other")
|
||||
:placeholder (tr "labels.other")
|
||||
:label ""}])]
|
||||
|
||||
[:div {:class (stl/css :modal-question)}
|
||||
[:h3 {:class (stl/css :modal-subtitle)} (tr "questions.company-size")]
|
||||
[:h3 {:class (stl/css :modal-subtitle)} (tr "onboarding.questions.step3.question3")]
|
||||
[:& fm/select {:options team-size-options
|
||||
:default ""
|
||||
:select-class (stl/css :select-class)
|
||||
|
|
@ -345,12 +345,17 @@
|
|||
[{:keys [on-next on-prev form]}]
|
||||
(let [start-options
|
||||
(mf/with-memo []
|
||||
(-> (shuffle [{:label (tr "questions.starting-ui") :value "ui" :image "images/form/Design.png"}
|
||||
{:label (tr "questions.starting-wireframing") :value "wireframing" :image "images/form/templates.png"}
|
||||
{:label (tr "questions.starting-prototyping") :value "prototyping" :image "images/form/Prototype.png"}
|
||||
{:label (tr "questions.starting-ds") :value "ds" :image "images/form/components.png"}
|
||||
{:label (tr "questions.starting-code") :value "code" :image "images/form/design-and-dev.png"}])
|
||||
(conj {:label (tr "questions.other-short") :value "other" :icon i/curve})))
|
||||
(-> (shuffle [{:label (tr "onboarding.questions.start-with.ui")
|
||||
:value "ui" :image "images/form/Design.png"}
|
||||
{:label (tr "onboarding.questions.start-with.wireframing")
|
||||
:value "wireframing" :image "images/form/templates.png"}
|
||||
{:label (tr "onboarding.questions.start-with.prototyping")
|
||||
:value "prototyping" :image "images/form/Prototype.png"}
|
||||
{:label (tr "onboarding.questions.start-with.ds")
|
||||
:value "ds" :image "images/form/components.png"}
|
||||
{:label (tr "onboarding.questions.start-with.code")
|
||||
:value "code" :image "images/form/design-and-dev.png"}])
|
||||
(conj {:label (tr "labels.other-short") :value "other" :icon i/curve})))
|
||||
|
||||
current-start (dm/get-in @form [:data :start-with])
|
||||
|
||||
|
|
@ -369,7 +374,7 @@
|
|||
:on-prev on-prev
|
||||
:class (stl/css :step-4)}
|
||||
|
||||
[:h1 {:class (stl/css :modal-title)} (tr "questions.step4-title")]
|
||||
[:h1 {:class (stl/css :modal-title)} (tr "onboarding.questions.step4.title")]
|
||||
[:div {:class (stl/css :radio-wrapper)}
|
||||
[:& fm/image-radio-buttons {:options start-options
|
||||
:img-width "159px"
|
||||
|
|
@ -382,7 +387,7 @@
|
|||
[:& fm/input {:name :start-with-other
|
||||
:class (stl/css :input-spacing)
|
||||
:label ""
|
||||
:placeholder (tr "questions.other")}])]]))
|
||||
:placeholder (tr "labels.other")}])]]))
|
||||
|
||||
(s/def ::questions-form-step-5
|
||||
(s/keys :req-un [::referer]
|
||||
|
|
@ -405,12 +410,12 @@
|
|||
[{:keys [on-next on-prev form]}]
|
||||
(let [referer-options
|
||||
(mf/with-memo []
|
||||
(-> (shuffle [{:label (tr "questions.referer.youtube") :value "youtube"}
|
||||
{:label (tr "questions.referer.event") :value "event"}
|
||||
{:label (tr "questions.referer.search") :value "search"}
|
||||
{:label (tr "questions.referer.social") :value "social"}
|
||||
{:label (tr "questions.referer.article") :value "article"}])
|
||||
(conj {:label (tr "questions.other-short") :value "other"})))
|
||||
(-> (shuffle [{:label (tr "labels.youtube") :value "youtube"}
|
||||
{:label (tr "labels.event") :value "event"}
|
||||
{:label (tr "labels.search") :value "search"}
|
||||
{:label (tr "labels.social") :value "social"}
|
||||
{:label (tr "labels.article") :value "article"}])
|
||||
(conj {:label (tr "labels.other-short") :value "other"})))
|
||||
|
||||
current-referer
|
||||
(dm/get-in @form [:data :referer])
|
||||
|
|
@ -430,7 +435,7 @@
|
|||
:on-prev on-prev
|
||||
:class (stl/css :step-5)}
|
||||
|
||||
[:h1 {:class (stl/css :modal-title)} (tr "questions.step5-title")]
|
||||
[:h1 {:class (stl/css :modal-title)} (tr "onboarding.questions.step5.title")]
|
||||
[:div {:class (stl/css :radio-wrapper)}
|
||||
[:& fm/radio-buttons {:options referer-options
|
||||
:class (stl/css :radio-btns)
|
||||
|
|
@ -440,7 +445,7 @@
|
|||
[:& fm/input {:name :referer-other
|
||||
:class (stl/css :input-spacing)
|
||||
:label ""
|
||||
:placeholder (tr "questions.other")}])]]))
|
||||
:placeholder (tr "labels.other")}])]]))
|
||||
|
||||
(mf/defc questions-modal
|
||||
[]
|
||||
|
|
|
|||
|
|
@ -50,12 +50,12 @@
|
|||
[{:keys [layout on-change-palette-size]}]
|
||||
(let [color-palette? (:colorpalette layout)
|
||||
text-palette? (:textpalette layout)
|
||||
hide-palettes? (:hide-palettes layout)
|
||||
workspace-read-only? (mf/use-ctx ctx/workspace-read-only?)
|
||||
container (mf/use-ref nil)
|
||||
state* (mf/use-state {:show-menu false :hide-palettes false})
|
||||
state* (mf/use-state {:show-menu false})
|
||||
state (deref state*)
|
||||
show-menu? (:show-menu state)
|
||||
hide-palettes? (:hide-palettes state)
|
||||
selected (h/use-shared-state mdc/colorpalette-selected-broadcast-key :recent)
|
||||
selected-text* (mf/use-state :file)
|
||||
selected-text (deref selected-text*)
|
||||
|
|
@ -100,15 +100,19 @@
|
|||
toggle-palettes
|
||||
(mf/use-callback
|
||||
(fn [_]
|
||||
(swap! state* update :hide-palettes not)))
|
||||
(r/set-resize-type! :top)
|
||||
(dom/add-class! (dom/get-element-by-class "color-palette") "fade-out-down")
|
||||
(st/emit! (-> (dw/toggle-layout-flag :hide-palettes)
|
||||
(vary-meta assoc ::ev/origin "workspace-left-toolbar")))))
|
||||
|
||||
on-select-color-palette
|
||||
(mf/use-fn
|
||||
(fn [event]
|
||||
(let [node (dom/get-current-target event)]
|
||||
(r/set-resize-type! :top)
|
||||
(dom/add-class! (dom/get-element-by-class "color-palette") "fade-out-down")
|
||||
(ts/schedule 300 #(st/emit! (dw/remove-layout-flag :textpalette)
|
||||
(dom/add-class! (dom/get-element-by-class "color-palette") "fade-out-down")
|
||||
(ts/schedule 300 #(st/emit! (dw/remove-layout-flag :hide-palettes)
|
||||
(dw/remove-layout-flag :textpalette)
|
||||
(-> (dw/toggle-layout-flag :colorpalette)
|
||||
(vary-meta assoc ::ev/origin "workspace-left-toolbar"))))
|
||||
(dom/blur! node))))
|
||||
|
|
@ -118,8 +122,9 @@
|
|||
(fn [event]
|
||||
(let [node (dom/get-current-target event)]
|
||||
(r/set-resize-type! :top)
|
||||
(dom/add-class! (dom/get-element-by-class "color-palette") "fade-out-down")
|
||||
(ts/schedule 300 #(st/emit! (dw/remove-layout-flag :colorpalette)
|
||||
(dom/add-class! (dom/get-element-by-class "color-palette") "fade-out-down")
|
||||
(ts/schedule 300 #(st/emit! (dw/remove-layout-flag :hide-palettes)
|
||||
(dw/remove-layout-flag :colorpalette)
|
||||
(-> (dw/toggle-layout-flag :textpalette)
|
||||
(vary-meta assoc ::ev/origin "workspace-left-toolbar"))))
|
||||
(dom/blur! node))))
|
||||
|
|
@ -198,5 +203,6 @@
|
|||
:selected @selected
|
||||
:width vport-width}]])]]
|
||||
[:div {:class (stl/css :handler)
|
||||
:on-click toggle-palettes}
|
||||
:on-click toggle-palettes
|
||||
:data-testid "toggle-palettes-visibility"}
|
||||
[:div {:class (stl/css :handler-btn)}]])])]))
|
||||
|
|
|
|||
|
|
@ -43,9 +43,9 @@
|
|||
i/status-alert]
|
||||
|
||||
:saving
|
||||
[:div {:class (stl/css :status-icon :saving-status)
|
||||
:title (tr "workspace.header.saving")}
|
||||
i/status-update]
|
||||
[:div {:class (stl/css :status-icon :pending-status)
|
||||
:title (tr "workspace.header.unsaved")}
|
||||
i/status-alert]
|
||||
|
||||
:saved
|
||||
[:div {:class (stl/css :status-icon :saved-status)
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue