mirror of
https://github.com/penpot/penpot.git
synced 2025-01-10 00:40:30 -05:00
Merge remote-tracking branch 'origin/staging' into develop
This commit is contained in:
Alejandro Alonso
commit
1de138466f
2 changed files with 1 additions and 202 deletions
|
|
@ -7,15 +7,11 @@
|
|||
(ns app.main.ui.dashboard.projects
|
||||
(:require-macros [app.main.style :as stl])
|
||||
(:require
|
||||
[app.common.data :as d]
|
||||
[app.common.geom.point :as gpt]
|
||||
[app.config :as cf]
|
||||
[app.main.data.dashboard :as dd]
|
||||
[app.main.data.events :as ev]
|
||||
[app.main.data.messages :as msg]
|
||||
[app.main.data.modal :as modal]
|
||||
[app.main.data.users :as du]
|
||||
[app.main.errors :as errors]
|
||||
[app.main.refs :as refs]
|
||||
[app.main.store :as st]
|
||||
[app.main.ui.dashboard.grid :refer [line-grid]]
|
||||
|
|
@ -100,80 +96,6 @@
|
|||
(def builtin-templates
|
||||
(l/derived :builtin-templates st/state))
|
||||
|
||||
(mf/defc tutorial-project
|
||||
[{:keys [close-tutorial default-project-id] :as props}]
|
||||
(let [state (mf/use-state {:status :waiting
|
||||
:file nil})
|
||||
|
||||
templates (mf/deref builtin-templates)
|
||||
template (d/seek #(= (:id %) "tutorial-for-beginners") templates)
|
||||
|
||||
on-template-cloned-success
|
||||
(mf/use-fn
|
||||
(mf/deps default-project-id)
|
||||
(fn [response]
|
||||
(swap! state #(assoc % :status :success :file (:first response)))
|
||||
(st/emit! (dd/go-to-workspace {:id (first response) :project-id default-project-id :name "tutorial"})
|
||||
(du/update-profile-props {:viewed-tutorial? true}))))
|
||||
|
||||
on-template-cloned-error
|
||||
(mf/use-fn
|
||||
(fn [cause]
|
||||
(swap! state assoc :status :error)
|
||||
(errors/print-error! cause)
|
||||
(st/emit! (msg/error (tr "dashboard.libraries-and-templates.import-error")))))
|
||||
|
||||
download-tutorial
|
||||
(mf/use-fn
|
||||
(mf/deps template default-project-id)
|
||||
(fn []
|
||||
(let [mdata {:on-success on-template-cloned-success
|
||||
:on-error on-template-cloned-error}
|
||||
params {:project-id default-project-id
|
||||
:template-id (:id template)}]
|
||||
(swap! state #(assoc % :status :importing))
|
||||
(st/emit! (with-meta (dd/clone-template (with-meta params mdata))
|
||||
{::ev/origin "get-started-hero-block"})))))]
|
||||
[:article {:class (stl/css :tutorial)}
|
||||
[:div {:class (stl/css :thumbnail)}]
|
||||
[:div {:class (stl/css :text)}
|
||||
[:h2 {:class (stl/css :title)} (tr "dasboard.tutorial-hero.title")]
|
||||
[:p {:class (stl/css :info)} (tr "dasboard.tutorial-hero.info")]
|
||||
[:button {:class (stl/css :btn-primary :action)
|
||||
:on-click download-tutorial}
|
||||
(case (:status @state)
|
||||
:waiting (tr "dasboard.tutorial-hero.start")
|
||||
:importing [:span.loader i/loader-pencil]
|
||||
:success "")]]
|
||||
|
||||
[:button {:class (stl/css :close)
|
||||
:on-click close-tutorial
|
||||
:aria-label (tr "labels.close")}
|
||||
close-icon]]))
|
||||
|
||||
(mf/defc interface-walkthrough
|
||||
{::mf/wrap [mf/memo]}
|
||||
[{:keys [close-walkthrough] :as props}]
|
||||
(let [handle-walkthrough-link
|
||||
(fn []
|
||||
(st/emit! (ptk/event ::ev/event {::ev/name "show-walkthrough"
|
||||
::ev/origin "get-started-hero-block"
|
||||
:section "dashboard"})))]
|
||||
[:article {:class (stl/css :walkthrough)}
|
||||
[:div {:class (stl/css :thumbnail)}]
|
||||
[:div {:class (stl/css :text)}
|
||||
[:h2 {:class (stl/css :title)} (tr "dasboard.walkthrough-hero.title")]
|
||||
[:p {:class (stl/css :info)} (tr "dasboard.walkthrough-hero.info")]
|
||||
[:a {:class (stl/css :btn-primary :action)
|
||||
:href " https://design.penpot.app/walkthrough"
|
||||
:target "_blank"
|
||||
:on-click handle-walkthrough-link}
|
||||
(tr "dasboard.walkthrough-hero.start")]]
|
||||
[:button {:class (stl/css :close)
|
||||
:on-click close-walkthrough
|
||||
:aria-label (tr "labels.close")}
|
||||
close-icon]]))
|
||||
|
||||
(mf/defc project-item
|
||||
[{:keys [project first? team files] :as props}]
|
||||
(let [locale (mf/deref i18n/locale)
|
||||
|
|
@ -365,7 +287,7 @@
|
|||
(l/derived :dashboard-recent-files st/state))
|
||||
|
||||
(mf/defc projects-section
|
||||
[{:keys [team projects profile default-project-id] :as props}]
|
||||
[{:keys [team projects profile] :as props}]
|
||||
(let [projects (->> (vals projects)
|
||||
(sort-by :modified-at)
|
||||
(reverse))
|
||||
|
|
@ -378,8 +300,6 @@
|
|||
(:team-hero? props true)
|
||||
(not (:is-default team)))
|
||||
|
||||
tutorial-viewed? (:viewed-tutorial? props true)
|
||||
walkthrough-viewed? (:viewed-walkthrough? props true)
|
||||
is-my-penpot (= (:default-team-id profile) (:id team))
|
||||
|
||||
team-id (:id team)
|
||||
|
|
@ -391,28 +311,6 @@
|
|||
(ptk/data-event ::ev/event {::ev/name "dont-show-team-up-hero"
|
||||
::ev/origin "dashboard"}))))
|
||||
|
||||
close-tutorial
|
||||
(mf/use-fn
|
||||
(fn []
|
||||
(st/emit! (du/update-profile-props {:viewed-tutorial? true})
|
||||
(ptk/data-event ::ev/event {::ev/name "dont-show-tutorial"
|
||||
::ev/origin "get-started-hero"
|
||||
:type "tutorial"
|
||||
:section "dashboard"}))))
|
||||
|
||||
close-walkthrough
|
||||
(mf/use-fn
|
||||
(fn []
|
||||
(st/emit! (du/update-profile-props {:viewed-walkthrough? true})
|
||||
(ptk/data-event ::ev/event {::ev/name "dont-show-walkthrough"
|
||||
::ev/origin "get-started-hero"
|
||||
:type "walkthrough"
|
||||
:section "dashboard"}))))
|
||||
|
||||
show-hero? (and is-my-penpot
|
||||
(or (not tutorial-viewed?)
|
||||
(not walkthrough-viewed?)))
|
||||
|
||||
show-team-hero? (and (not is-my-penpot) team-hero?)]
|
||||
|
||||
(mf/with-effect [team]
|
||||
|
|
@ -433,22 +331,9 @@
|
|||
(when team-hero?
|
||||
[:& team-hero {:team team :close-fn close-banner}])
|
||||
|
||||
(when (and (contains? cf/flags :dashboard-templates-section)
|
||||
show-hero?)
|
||||
[:div {:class (stl/css :hero-projects)}
|
||||
(when (and (not tutorial-viewed?) (:is-default team))
|
||||
[:& tutorial-project
|
||||
{:close-tutorial close-tutorial
|
||||
:default-project-id default-project-id}])
|
||||
|
||||
(when (and (not walkthrough-viewed?) (:is-default team))
|
||||
[:& interface-walkthrough
|
||||
{:close-walkthrough close-walkthrough}])])
|
||||
|
||||
[:div {:class (stl/css-case :dashboard-container true
|
||||
:no-bg true
|
||||
:dashboard-projects true
|
||||
:with-hero show-hero?
|
||||
:with-team-hero show-team-hero?)}
|
||||
(for [{:keys [id] :as project} projects]
|
||||
(let [files (when recent-map
|
||||
|
|
|
|||
|
|
@ -20,7 +20,6 @@
|
|||
height: calc(100vh - $s-64);
|
||||
}
|
||||
|
||||
.with-hero,
|
||||
.with-team-hero {
|
||||
height: calc(100vh - $s-280);
|
||||
}
|
||||
|
|
@ -242,88 +241,3 @@
|
|||
width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-projects {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-gap: $s-32;
|
||||
margin: 0 $s-16 $s-16 $s-20;
|
||||
|
||||
@media (max-width: 1366px) {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.tutorial,
|
||||
.walkthrough {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
position: relative;
|
||||
border-radius: $br-8;
|
||||
min-height: $s-216;
|
||||
background-color: $db-tertiary;
|
||||
padding: $s-8;
|
||||
|
||||
.thumbnail {
|
||||
width: $s-200;
|
||||
height: $s-200;
|
||||
border-radius: $br-6;
|
||||
padding: $s-32;
|
||||
display: block;
|
||||
background-color: var(--color-canvas);
|
||||
}
|
||||
|
||||
img {
|
||||
border-radius: $br-4;
|
||||
margin-bottom: 0;
|
||||
width: $s-232;
|
||||
}
|
||||
|
||||
.text {
|
||||
padding: $s-32;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.title {
|
||||
color: $df-primary;
|
||||
font-size: $fs-24;
|
||||
font-weight: $fw400;
|
||||
margin-bottom: $s-8;
|
||||
}
|
||||
.info {
|
||||
flex: 1;
|
||||
color: $df-secondary;
|
||||
margin-bottom: $s-20;
|
||||
font-size: $fs-16;
|
||||
}
|
||||
.invite {
|
||||
height: $s-32;
|
||||
}
|
||||
.action {
|
||||
width: $s-180;
|
||||
height: $s-40;
|
||||
}
|
||||
}
|
||||
.walkthrough {
|
||||
.thumbnail {
|
||||
background-image: url("/images/walkthrough-cover.png");
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
.tutorial {
|
||||
.thumbnail {
|
||||
background-image: url("/images/hands-on-tutorial.png");
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
.loader {
|
||||
display: flex;
|
||||
svg#loader-pencil {
|
||||
width: $s-32;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue