diff --git a/docs/img/interface/youraccount-notifications.webp b/docs/img/interface/youraccount-notifications.webp new file mode 100644 index 0000000000..4abb846785 Binary files /dev/null and b/docs/img/interface/youraccount-notifications.webp differ diff --git a/docs/img/interface/youraccount-password.webp b/docs/img/interface/youraccount-password.webp new file mode 100644 index 0000000000..72979791b0 Binary files /dev/null and b/docs/img/interface/youraccount-password.webp differ diff --git a/docs/img/interface/youraccount-profile.webp b/docs/img/interface/youraccount-profile.webp new file mode 100644 index 0000000000..122242b84c Binary files /dev/null and b/docs/img/interface/youraccount-profile.webp differ diff --git a/docs/img/interface/youraccount-settings.webp b/docs/img/interface/youraccount-settings.webp new file mode 100644 index 0000000000..3fb1bbe93b Binary files /dev/null and b/docs/img/interface/youraccount-settings.webp differ diff --git a/docs/user-guide/the-interface/index.njk b/docs/user-guide/the-interface/index.njk index b17a8a75b2..fb416ec311 100644 --- a/docs/user-guide/the-interface/index.njk +++ b/docs/user-guide/the-interface/index.njk @@ -5,52 +5,6 @@ title: 02· The interface

The interface

The Penpot interface has three main areas: Dashboard, Workspace and View mode. Lets take a look at their composition and main features.

- -

Dashboard

-

The Dashboard is the place where you will be able to organize your files, libraries, projects and teams.

-
- - Penpot's dashboard - -
- -

- 1) Teams - 2) Search files - 3) Projects - 4) Drafts - 5) Shared Libraries - 6) Custom fonts - 7) Pinned projects - 8) User area - 9) Comment notifications - 10) Create project - 11) File card - 12) Libraries & Templates module -

- -
    -
  1. Teams: A team allows you to collaborate with other Penpot users. Team members are allowed to work with any project or file within the team depending on their permissions. Members with admin permissions can also invite other members. Create or join as many teams as you need with different groups of people.
  2. -
  3. Search: If you are looking for a specific file just type its title at the search box.
  4. -
  5. Projects: A project allows you to group design files. It works pretty much like a folder in a file system. You can create as many projects as you need. If you are going to work with more people in a project, you should create it inside a team.
  6. -
  7. Drafts: The drafts section is where you can find the design files that are not inside any project.
  8. -
  9. Shared Libraries: In this section you will find all the design files that have been added as shared libraries. That way you will be able to better control the files that are sharing their assets.
  10. -
  11. Custom fonts: If you have purchased or own personal fonts that are not included in the catalog provided by Penpot, you can upload them from your computer and use them across the files of a team.
  12. -
  13. Pinned projects: If you want to keep some projects handy (for instance because you’re currently working on them) you can pin them to make them quickly available at the sidebar.
  14. -
  15. User area: This must be you! Access your profile settings, Penpot tutorials, the Penpot Community and more. You can also find here a way to leave us feedback. We’d love to read your thoughts :)
  16. -
  17. Comments notifications: Here you will be able to see if you have unread comments inside the files of the team. There's also a button to mark all notifications as read.
  18. -
  19. Create project: Create as many projects as you need to organize your designs.
  20. -
  21. File card: Basic information about a file at plain sight. A preview, update info or if it’s added as a Shared Library. From there you can perform several actions over the file (rename, duplicate, move, download, delete).
  22. -
  23. Libraries & Templates module: A curated selection of Libraries & Templates files ready to import.
  24. -
- - -

Your account

-

Your account settings can be changed at the user area, in Your account. Here you can make changes to your profile, password or account language, as well as generate personal access tokens and access release notes.

-

If you want to change the email address associated to your account or remove your account entirely, this can be done in the Profile section.

- - -

Workspace

The Workspace is where you actually create your designs. You have an infinite canvas where you can work directly but you also have the ability to create and work inside boards that will help you to create pages and exportation units.

@@ -102,8 +56,6 @@ title: 02· The interface
  • Assets panel: Each file has a default library (File Library) where you can store elements and styles that are likely to be reused within a project. That includes components, colors and typographies. To add an asset to a library just click the “+” button at the header of each asset group.
  • - -

    View mode

    Launch the view mode to present and share your designs, comment on them and play with the interactions set at the workspace. You also have an Inspect mode where you can get properties specifications and code snippets. More about the View mode.

    @@ -145,6 +97,83 @@ title: 02· The interface
  • Navigation buttons: Forward and backwards buttons.
  • +

    Dashboard

    +

    The Dashboard is the place where you will be able to organize your files, libraries, projects and teams.

    +
    + + Penpot's dashboard + +
    + +

    + 1) Teams + 2) Search files + 3) Projects + 4) Drafts + 5) Shared Libraries + 6) Custom fonts + 7) Pinned projects + 8) User area + 9) Comment notifications + 10) Create project + 11) File card + 12) Libraries & Templates module +

    + +
      +
    1. Teams: A team allows you to collaborate with other Penpot users. Team members are allowed to work with any project or file within the team depending on their permissions. Members with admin permissions can also invite other members. Create or join as many teams as you need with different groups of people.
    2. +
    3. Search: If you are looking for a specific file just type its title at the search box.
    4. +
    5. Projects: A project allows you to group design files. It works pretty much like a folder in a file system. You can create as many projects as you need. If you are going to work with more people in a project, you should create it inside a team.
    6. +
    7. Drafts: The drafts section is where you can find the design files that are not inside any project.
    8. +
    9. Shared Libraries: In this section you will find all the design files that have been added as shared libraries. That way you will be able to better control the files that are sharing their assets.
    10. +
    11. Custom fonts: If you have purchased or own personal fonts that are not included in the catalog provided by Penpot, you can upload them from your computer and use them across the files of a team.
    12. +
    13. Pinned projects: If you want to keep some projects handy (for instance because you’re currently working on them) you can pin them to make them quickly available at the sidebar.
    14. +
    15. User area: This must be you! Access your profile settings, Penpot tutorials, the Penpot Community and more. You can also find here a way to leave us feedback. We’d love to read your thoughts :)
    16. +
    17. Comments notifications: Here you will be able to see if you have unread comments inside the files of the team. There's also a button to mark all notifications as read.
    18. +
    19. Create project: Create as many projects as you need to organize your designs.
    20. +
    21. File card: Basic information about a file at plain sight. A preview, update info or if it’s added as a Shared Library. From there you can perform several actions over the file (rename, duplicate, move, download, delete).
    22. +
    23. Libraries & Templates module: A curated selection of Libraries & Templates files ready to import.
    24. +
    + +

    Your account

    +

    Your account settings can be changed at the user area, in Your account. Here you can make changes to your profile, password or account language, as well as generate personal access tokens and access release notes.

    + +

    Profile + # +

    +

    If you want to change the email address associated to your account or remove your account entirely, this can be done in the Profile section.

    +
    + Penpot's profile +
    + +

    Password + # +

    +

    If you want to change your password to a new one, this can be done in the Password section.

    +
    + Penpot's password +
    + +

    Notifications + # +

    +

    At the Notifications section you can configure the email and dashboard notifications.

    +
    + Penpot's notifications +
    + +

    Settings + # +

    +

    At the Settings section you can change the language and the UI color theme.

    +
    + Penpot's settings +
    + +

    Access tokens + # +

    +

    At the Asset tokens section you can manage your access tokens. Read more about access tokens here.

    UI Theme

    Penpot's default interface is dark but you can switch anytime to a light option. You have 2 ways to change the theme:

    @@ -170,4 +199,4 @@ title: 02· The interface Penpot's view mode
    Penpot's view mode in light mode
    - + \ No newline at end of file diff --git a/frontend/src/app/main/data/comments.cljs b/frontend/src/app/main/data/comments.cljs index 515061c6b7..b509f49cea 100644 --- a/frontend/src/app/main/data/comments.cljs +++ b/frontend/src/app/main/data/comments.cljs @@ -92,7 +92,6 @@ (update :comments-local assoc :open id)) (update :comments-local assoc :options nil) (update :comments-local dissoc :draft) - (update :workspace-drawing dissoc :comment) (update-in [:comments id] assoc (:id comment) comment)))) ptk/WatchEvent @@ -148,7 +147,6 @@ (update :comments-local assoc :open id) (update :comments-local assoc :options nil) (update :comments-local dissoc :draft) - (update :workspace-drawing dissoc :comment) (update-in [:comments id] assoc (:id comment) comment)))) ptk/WatchEvent @@ -417,8 +415,8 @@ (->> (rp/cmd! :get-comment-threads {:file-id file-id :share-id share-id}) (rx/map comment-threads-fetched)) - ;; Refresh team members - (rx/of (dtm/fetch-members))))))) + (when (:workspace-local state) + (rx/of (dtm/fetch-members)))))))) (defn retrieve-comments [thread-id] @@ -496,7 +494,7 @@ (-> state (update :comments-local assoc :open id) (update :comments-local assoc :options nil) - (update :workspace-drawing dissoc :comment))))) + (update :comments-local dissoc :draft))))) (defn close-thread [] @@ -504,8 +502,7 @@ ptk/UpdateEvent (update [_ state] (-> state - (update :comments-local dissoc :open :draft :options) - (update :workspace-drawing dissoc :comment))))) + (update :comments-local dissoc :open :draft :options))))) (defn update-filters [{:keys [mode show list] :as params}] @@ -546,7 +543,6 @@ ptk/UpdateEvent (update [_ state] (-> state - (update :workspace-drawing assoc :comment params) (update :comments-local assoc :draft params))))) (defn update-draft-thread @@ -555,7 +551,6 @@ ptk/UpdateEvent (update [_ state] (-> state - (d/update-in-when [:workspace-drawing :comment] merge data) (d/update-in-when [:comments-local :draft] merge data))))) (defn toggle-comment-options diff --git a/frontend/src/app/main/data/viewer.cljs b/frontend/src/app/main/data/viewer.cljs index 3365885b30..770c24bf1e 100644 --- a/frontend/src/app/main/data/viewer.cljs +++ b/frontend/src/app/main/data/viewer.cljs @@ -171,7 +171,7 @@ (declare go-to-frame-auto) (defn bundle-fetched - [{:keys [project file share-links libraries users permissions thumbnails] :as bundle}] + [{:keys [project file team share-links libraries users permissions thumbnails] :as bundle}] (let [pages (->> (dm/get-in file [:data :pages]) (map (fn [page-id] (let [data (get-in file [:data :pages-index page-id])] @@ -183,15 +183,19 @@ (ptk/reify ::bundle-fetched ptk/UpdateEvent (update [_ state] - (-> state - (assoc :share-links share-links) - (assoc :viewer {:libraries (d/index-by :id libraries) - :users (d/index-by :id users) - :permissions permissions - :project project - :pages pages - :thumbnails thumbnails - :file file}))) + (let [team-id (:id team) + team {:members users}] + (-> state + (assoc :share-links share-links) + (assoc :current-team-id team-id) + (assoc :teams {team-id team}) + (assoc :viewer {:libraries (d/index-by :id libraries) + :users (d/index-by :id users) + :permissions permissions + :project project + :pages pages + :thumbnails thumbnails + :file file})))) ptk/WatchEvent (watch [_ state _] diff --git a/frontend/src/app/main/ui/comments.cljs b/frontend/src/app/main/ui/comments.cljs index ee88826731..1b6d992445 100644 --- a/frontend/src/app/main/ui/comments.cljs +++ b/frontend/src/app/main/ui/comments.cljs @@ -132,10 +132,11 @@ (defn- blank-content? [content] - (or (str/blank? content) - (str/empty? content) - ;; If only one char and it's the zero-width whitespace - (and (= 1 (count content)) (= (first content) zero-width-space)))) + (let [content (str/trim content)] + (or (str/blank? content) + (str/empty? content) + (and (= (count content) 1) + (= (first content) zero-width-space))))) ;; Component that renders the component content (mf/defc comment-content* diff --git a/frontend/src/app/main/ui/workspace/viewport.cljs b/frontend/src/app/main/ui/workspace/viewport.cljs index 2a31a10133..d106c28fb5 100644 --- a/frontend/src/app/main/ui/workspace/viewport.cljs +++ b/frontend/src/app/main/ui/workspace/viewport.cljs @@ -304,8 +304,7 @@ :page-id page-id :file-id file-id :vport vport - :zoom zoom - :drawing drawing}]) + :zoom zoom}]) (when picking-color? [:& pixel-overlay/pixel-overlay {:vport vport diff --git a/frontend/src/app/main/ui/workspace/viewport/comments.cljs b/frontend/src/app/main/ui/workspace/viewport/comments.cljs index c68cb9af1b..30a2d6dae0 100644 --- a/frontend/src/app/main/ui/workspace/viewport/comments.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/comments.cljs @@ -16,7 +16,7 @@ [rumext.v2 :as mf])) (mf/defc comments-layer* - [{:keys [vbox vport zoom drawing file-id page-id]}] + [{:keys [vbox vport zoom file-id page-id]}] (let [vbox-x (dm/get-prop vbox :x) vbox-y (dm/get-prop vbox :y) vport-w (dm/get-prop vport :width) @@ -73,7 +73,7 @@ :viewport viewport :zoom zoom}]))) - (when-let [draft (:comment drawing)] + (when-let [draft (:draft local)] [:> cmt/comment-floating-thread-draft* {:draft draft :on-cancel on-draft-cancel diff --git a/frontend/src/app/main/ui/workspace/viewport_wasm.cljs b/frontend/src/app/main/ui/workspace/viewport_wasm.cljs index 25284edf51..3f41a55d0f 100644 --- a/frontend/src/app/main/ui/workspace/viewport_wasm.cljs +++ b/frontend/src/app/main/ui/workspace/viewport_wasm.cljs @@ -345,8 +345,7 @@ [:> comments/comments-layer* {:vbox vbox :page-id page-id :vport vport - :zoom zoom - :drawing drawing}]) + :zoom zoom}]) (when picking-color? [:& pixel-overlay/pixel-overlay {:vport vport diff --git a/frontend/translations/en.po b/frontend/translations/en.po index be346e6566..8538e7f90f 100644 --- a/frontend/translations/en.po +++ b/frontend/translations/en.po @@ -4774,7 +4774,7 @@ msgstr "Or add some of these to try:" #: src/app/main/ui/workspace/libraries.cljs:368 msgid "workspace.libraries.empty.no-libraries" -msgstr "There are no Shared Libraries at you team, you can look for" +msgstr "There are no Shared Libraries at your team, you can look for" #: src/app/main/ui/workspace/libraries.cljs:372 msgid "workspace.libraries.empty.some-templates" diff --git a/frontend/translations/es.po b/frontend/translations/es.po index ac17eb78e1..93c9c7eebb 100644 --- a/frontend/translations/es.po +++ b/frontend/translations/es.po @@ -4784,7 +4784,7 @@ msgstr "O añadir algunas de éstas para probar:" #: src/app/main/ui/workspace/libraries.cljs:368 msgid "workspace.libraries.empty.no-libraries" -msgstr "No hay Biblioteacas Compartidas en tu equipo, puedes buscar" +msgstr "No hay Bibliotecas Compartidas en tu equipo, puedes buscar" #: src/app/main/ui/workspace/libraries.cljs:372 msgid "workspace.libraries.empty.some-templates"