mirror of
https://github.com/penpot/penpot.git
synced 2025-02-13 02:28:18 -05:00
Merge pull request #2002 from penpot/palba-improvements-view-mode
🎉 Improvements on view mode
This commit is contained in:
Alejandro
GitHub
commit
0bbd898173
17 changed files with 359 additions and 114 deletions
|
|
@ -17,6 +17,7 @@
|
|||
- Multiple team invitations on onboarding [Taiga #3084](https://tree.taiga.io/project/penpot/us/3084)
|
||||
- Change text properties position at the sidebar [Taiga #3047](https://tree.taiga.io/project/penpot/us/3047)
|
||||
- Group assets by drag and drop [Taiga #2831](https://tree.taiga.io/project/penpot/us/2831)
|
||||
- View mode improvements to enable access and use in different conditions [Taiga #3023](https://tree.taiga.io/project/penpot/us/3023)
|
||||
|
||||
### :bug: Bugs fixed
|
||||
- Fix menu file not accessible in certain conditions [Taiga #3385](https://tree.taiga.io/project/penpot/issue/3385)
|
||||
|
|
|
|||
1
frontend/resources/images/icons/go-next.svg
Normal file
1
frontend/resources/images/icons/go-next.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="6798 409 500 500"><path d="m6939 409-16 15-15 16 109 109 110 110-110 110-109 109 15 16 16 15 124-125 125-125-125-125Z"/></svg>
|
||||
|
After Width: | Height: | Size: 176 B |
1
frontend/resources/images/icons/go-prev.svg
Normal file
1
frontend/resources/images/icons/go-prev.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="4805 400 500 500"><path d="m5164 400 16 15 15 16-109 109-110 110 110 110 109 109-15 16-16 15-124-125-125-125 125-125z"/></svg>
|
||||
|
After Width: | Height: | Size: 176 B |
1
frontend/resources/images/icons/reset.svg
Normal file
1
frontend/resources/images/icons/reset.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="4816 1000 500 500"><path d="M5092 1000c-113 0-207 95-222 217l-25-29-29 31 77 88 81-92-29-31-34 38c13-99 89-176 181-176 101 0 182 91 182 204s-81 204-182 204c-50 0-96-23-129-60l-29 32c40 46 96 74 158 74 124 0 224-112 224-250s-100-250-224-250zm0 0z"/></svg>
|
||||
|
After Width: | Height: | Size: 304 B |
|
|
@ -3,11 +3,12 @@
|
|||
background-color: $color-gray-50;
|
||||
border-bottom: 1px solid $color-gray-60;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
grid-template-columns: 45% 10% 45%;
|
||||
height: 48px;
|
||||
padding: 0 $size-4 0 55px;
|
||||
position: relative;
|
||||
justify-content: space-between;
|
||||
width: 100vw;
|
||||
|
||||
a {
|
||||
font-size: $fs12;
|
||||
|
|
@ -15,6 +16,7 @@
|
|||
|
||||
.nav-zone {
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.main-icon {
|
||||
|
|
@ -54,10 +56,25 @@
|
|||
|
||||
> * {
|
||||
margin-left: $size-5;
|
||||
@media only screen and (max-width: 1366px) {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
flex-shrink: 0;
|
||||
svg {
|
||||
display: none;
|
||||
}
|
||||
@media only screen and (max-width: 1366px) {
|
||||
padding: 0 0.5rem;
|
||||
svg {
|
||||
display: inline-block;
|
||||
}
|
||||
span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.view-options {
|
||||
|
|
@ -105,6 +122,7 @@
|
|||
display: flex;
|
||||
padding: $size-1;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
.icon {
|
||||
display: flex;
|
||||
|
|
@ -119,9 +137,13 @@
|
|||
}
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
display: grid;
|
||||
grid-template-columns: auto 10px auto 10px auto;
|
||||
}
|
||||
|
||||
.breadcrumb,
|
||||
.current-frame {
|
||||
display: flex;
|
||||
position: relative;
|
||||
|
||||
> span {
|
||||
|
|
@ -140,7 +162,8 @@
|
|||
}
|
||||
|
||||
.current-frame {
|
||||
display: flex;
|
||||
display: grid;
|
||||
grid-template-columns: 14px 1fr;
|
||||
span {
|
||||
color: $color-white;
|
||||
margin-right: $size-1;
|
||||
|
|
|
|||
|
|
@ -21,6 +21,107 @@
|
|||
|
||||
overflow: auto;
|
||||
|
||||
& .viewer-go-prev,
|
||||
& .viewer-go-next {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.arrow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 12px;
|
||||
background: $color-gray-50;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
cursor: pointer;
|
||||
fill: $color-gray-30;
|
||||
|
||||
svg {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $color-primary;
|
||||
fill: $color-black;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& .viewer-go-next {
|
||||
right: 0;
|
||||
padding-right: 29px;
|
||||
svg {
|
||||
margin-left: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
& .viewer-go-next.right-bar {
|
||||
right: 256px;
|
||||
}
|
||||
|
||||
& .viewer-go-prev {
|
||||
left: 0;
|
||||
padding-left: 29px;
|
||||
svg {
|
||||
margin-right: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
& .viewer-go-prev.left-bar {
|
||||
left: 256px;
|
||||
}
|
||||
|
||||
& .viewer-bottom {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
height: 50px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
&.left-bar {
|
||||
width: calc(100% - 512px);
|
||||
}
|
||||
|
||||
.reset {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 12px;
|
||||
background: $color-gray-50;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
cursor: pointer;
|
||||
fill: $color-gray-30;
|
||||
margin-left: 29px;
|
||||
|
||||
svg {
|
||||
margin-left: 4px;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $color-primary;
|
||||
fill: $color-black;
|
||||
}
|
||||
}
|
||||
|
||||
.counter {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 12px;
|
||||
background: $color-gray-50;
|
||||
width: 67px;
|
||||
height: 25px;
|
||||
fill: $color-gray-20;
|
||||
}
|
||||
}
|
||||
|
||||
& .viewer-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
|
@ -42,6 +143,23 @@
|
|||
transform-origin: center;
|
||||
}
|
||||
}
|
||||
|
||||
& .viewer-wrapper-out {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
& .comments-right-sidebar {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50px;
|
||||
width: 256px;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.viewport-container {
|
||||
|
|
|
|||
|
|
@ -243,7 +243,7 @@
|
|||
(update :workspace-drawing dissoc :comment)))))
|
||||
|
||||
(defn update-filters
|
||||
[{:keys [mode show] :as params}]
|
||||
[{:keys [mode show list] :as params}]
|
||||
(ptk/reify ::update-filters
|
||||
ptk/UpdateEvent
|
||||
(update [_ state]
|
||||
|
|
@ -254,7 +254,10 @@
|
|||
(assoc :mode mode)
|
||||
|
||||
(some? show)
|
||||
(assoc :show show)))))))
|
||||
(assoc :show show)
|
||||
|
||||
(some? list)
|
||||
(assoc :list list)))))))
|
||||
|
||||
(s/def ::create-draft-params
|
||||
(s/keys :req-un [::page-id ::file-id ::position]))
|
||||
|
|
|
|||
|
|
@ -303,6 +303,18 @@
|
|||
(dcm/close-thread)
|
||||
(rt/nav :viewer pparams (assoc qparams :index (inc index)))))))))
|
||||
|
||||
|
||||
(def select-first-frame
|
||||
(ptk/reify ::select-first-frame
|
||||
ptk/WatchEvent
|
||||
(watch [_ state _]
|
||||
(let [route (:route state)
|
||||
qparams (:query-params route)
|
||||
pparams (:path-params route)]
|
||||
(rx/of
|
||||
(dcm/close-thread)
|
||||
(rt/nav :viewer pparams (assoc qparams :index 0)))))))
|
||||
|
||||
(s/def ::interactions-mode #{:hide :show :show-on-click})
|
||||
|
||||
(defn set-interactions-mode
|
||||
|
|
|
|||
|
|
@ -42,12 +42,12 @@
|
|||
:fn #(st/emit! dv/toggle-fullscreen)}
|
||||
|
||||
:next-frame {:tooltip ds/left-arrow
|
||||
:command "left"
|
||||
:command ["left" "up"]
|
||||
:subsections [:general-viewer]
|
||||
:fn #(st/emit! dv/select-prev-frame)}
|
||||
|
||||
:prev-frame {:tooltip ds/right-arrow
|
||||
:command "right"
|
||||
:command ["right" "down"]
|
||||
:subsections [:general-viewer]
|
||||
:fn #(st/emit! dv/select-next-frame)}
|
||||
|
||||
|
|
|
|||
|
|
@ -76,6 +76,8 @@
|
|||
(def full-screen-off (icon-xref :full-screen-off))
|
||||
(def grid (icon-xref :grid))
|
||||
(def grid-snap (icon-xref :grid-snap))
|
||||
(def go-next (icon-xref :go-next))
|
||||
(def go-prev (icon-xref :go-prev))
|
||||
(def help (icon-xref :help))
|
||||
(def icon-empty (icon-xref :icon-empty))
|
||||
(def icon-filter (icon-xref :filter))
|
||||
|
|
@ -143,6 +145,7 @@
|
|||
(def radius-4 (icon-xref :radius-4))
|
||||
(def recent (icon-xref :recent))
|
||||
(def redo (icon-xref :redo))
|
||||
(def reset (icon-xref :reset))
|
||||
(def rotate (icon-xref :rotate))
|
||||
(def ruler (icon-xref :ruler))
|
||||
(def ruler-tool (icon-xref :ruler-tool))
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@
|
|||
[app.main.ui.shapes.filters :as filters]
|
||||
[app.main.ui.share-link]
|
||||
[app.main.ui.static :as static]
|
||||
[app.main.ui.viewer.comments :refer [comments-layer]]
|
||||
[app.main.ui.viewer.comments :refer [comments-layer comments-sidebar]]
|
||||
[app.main.ui.viewer.handoff :as handoff]
|
||||
[app.main.ui.viewer.header :refer [header]]
|
||||
[app.main.ui.viewer.interactions :as interactions]
|
||||
|
|
@ -32,6 +32,7 @@
|
|||
[app.util.dom :as dom]
|
||||
[app.util.i18n :as i18n :refer [tr]]
|
||||
[app.util.webapi :as wapi]
|
||||
[cuerdas.core :as str]
|
||||
[goog.events :as events]
|
||||
[rumext.alpha :as mf]))
|
||||
|
||||
|
|
@ -60,6 +61,113 @@
|
|||
:height (* height zoom)
|
||||
:vbox (str "0 0 " width " " height)})))
|
||||
|
||||
|
||||
(mf/defc viewer-pagination
|
||||
[{:keys [index num-frames left-bar right-bar] :as props}]
|
||||
[:*
|
||||
(when (pos? index)
|
||||
[:div.viewer-go-prev {:class (when left-bar "left-bar")}
|
||||
[:div.arrow {:on-click #(st/emit! dv/select-prev-frame)} i/go-prev]])
|
||||
(when (< (+ index 1) num-frames)
|
||||
[:div.viewer-go-next {:class (when right-bar "right-bar")}
|
||||
[:div.arrow {:on-click #(st/emit! dv/select-next-frame)} i/go-next]])
|
||||
[:div.viewer-bottom {:class (when left-bar "left-bar")}
|
||||
[:div.reset {:on-click #(st/emit! dv/select-first-frame)} i/reset]
|
||||
[:div.counter (str/join " / " [(+ index 1) num-frames])]
|
||||
[:span]]])
|
||||
|
||||
|
||||
(mf/defc viewer-wrapper
|
||||
[{:keys [wrapper-size scroll orig-frame orig-viewport-ref orig-size page file users current-viewport-ref
|
||||
size frame interactions-mode overlays zoom close-overlay section index] :as props}]
|
||||
(let [{clist :list} (mf/deref refs/comments-local)
|
||||
show-comments-list (and (= section :comments) (= :show clist))]
|
||||
[:*
|
||||
[:& viewer-pagination {:index index :num-frames (count (:frames page)) :right-bar show-comments-list}]
|
||||
|
||||
(when show-comments-list
|
||||
[:& comments-sidebar {:users users :frame frame :page page}])
|
||||
|
||||
[:div.viewer-wrapper
|
||||
{:style {:width (:width wrapper-size)
|
||||
:height (:height wrapper-size)}}
|
||||
[:& (mf/provider ctx/scroll-ctx) {:value @scroll}
|
||||
[:div.viewer-clipper
|
||||
[:*
|
||||
(when orig-frame
|
||||
[:div.viewport-container
|
||||
{:ref orig-viewport-ref
|
||||
:style {:width (:width orig-size)
|
||||
:height (:height orig-size)
|
||||
:position "relative"}}
|
||||
|
||||
[:& interactions/viewport
|
||||
{:frame orig-frame
|
||||
:base-frame orig-frame
|
||||
:frame-offset (gpt/point 0 0)
|
||||
:size orig-size
|
||||
:page page
|
||||
:file file
|
||||
:users users
|
||||
:interactions-mode :hide}]])
|
||||
|
||||
[:div.viewport-container
|
||||
{:ref current-viewport-ref
|
||||
:style {:width (:width size)
|
||||
:height (:height size)
|
||||
:position "relative"}}
|
||||
|
||||
[:& interactions/viewport
|
||||
{:frame frame
|
||||
:base-frame frame
|
||||
:frame-offset (gpt/point 0 0)
|
||||
:size size
|
||||
:page page
|
||||
:file file
|
||||
:users users
|
||||
:interactions-mode interactions-mode}]
|
||||
|
||||
(for [overlay overlays]
|
||||
(let [size-over (calculate-size (:frame overlay) zoom)]
|
||||
[:*
|
||||
(when (or (:close-click-outside overlay)
|
||||
(:background-overlay overlay))
|
||||
[:div.viewer-overlay-background
|
||||
{:class (dom/classnames
|
||||
:visible (:background-overlay overlay))
|
||||
:style {:width (:width wrapper-size)
|
||||
:height (:height wrapper-size)
|
||||
:position "absolute"
|
||||
:left 0
|
||||
:top 0}
|
||||
:on-click #(when (:close-click-outside overlay)
|
||||
(close-overlay (:frame overlay)))}])
|
||||
[:div.viewport-container.viewer-overlay
|
||||
|
||||
{:id (str "overlay-" (-> overlay :frame :id))
|
||||
:style {:width (:width size-over)
|
||||
:height (:height size-over)
|
||||
:left (* (:x (:position overlay)) zoom)
|
||||
:top (* (:y (:position overlay)) zoom)}}
|
||||
[:& interactions/viewport
|
||||
{:frame (:frame overlay)
|
||||
:base-frame frame
|
||||
:frame-offset (:position overlay)
|
||||
:size size-over
|
||||
:page page
|
||||
:file file
|
||||
:users users
|
||||
:interactions-mode interactions-mode}]]]))]]
|
||||
|
||||
(when (= section :comments)
|
||||
[:& comments-layer {:file file
|
||||
:users users
|
||||
:frame frame
|
||||
:page page
|
||||
:zoom zoom}])]]]]))
|
||||
|
||||
|
||||
|
||||
(mf/defc viewer
|
||||
[{:keys [params data]}]
|
||||
|
||||
|
|
@ -120,11 +228,6 @@
|
|||
(when (= section :comments)
|
||||
(st/emit! (dcm/close-thread)))))
|
||||
|
||||
close-overlay
|
||||
(mf/use-callback
|
||||
(fn [frame]
|
||||
(st/emit! (dv/close-overlay (:id frame)))))
|
||||
|
||||
set-up-new-size
|
||||
(mf/use-callback
|
||||
(fn [_]
|
||||
|
|
@ -288,85 +391,28 @@
|
|||
:page page
|
||||
:file file
|
||||
:section section
|
||||
:local local}]
|
||||
:local local
|
||||
:index index
|
||||
:viewer-pagination viewer-pagination}]
|
||||
|
||||
[:*
|
||||
[:div.viewer-wrapper
|
||||
{:style {:width (:width wrapper-size)
|
||||
:height (:height wrapper-size)}}
|
||||
[:& (mf/provider ctx/scroll-ctx) {:value @scroll}
|
||||
[:div.viewer-clipper
|
||||
[:*
|
||||
(when orig-frame
|
||||
[:div.viewport-container
|
||||
{:ref orig-viewport-ref
|
||||
:style {:width (:width orig-size)
|
||||
:height (:height orig-size)
|
||||
:position "relative"}}
|
||||
|
||||
[:& interactions/viewport
|
||||
{:frame orig-frame
|
||||
:base-frame orig-frame
|
||||
:frame-offset (gpt/point 0 0)
|
||||
:size orig-size
|
||||
:page page
|
||||
:file file
|
||||
:users users
|
||||
:interactions-mode :hide}]])
|
||||
|
||||
[:div.viewport-container
|
||||
{:ref current-viewport-ref
|
||||
:style {:width (:width size)
|
||||
:height (:height size)
|
||||
:position "relative"}}
|
||||
|
||||
[:& interactions/viewport
|
||||
{:frame frame
|
||||
:base-frame frame
|
||||
:frame-offset (gpt/point 0 0)
|
||||
:size size
|
||||
:page page
|
||||
:file file
|
||||
:users users
|
||||
:interactions-mode interactions-mode}]
|
||||
|
||||
(for [overlay overlays]
|
||||
(let [size-over (calculate-size (:frame overlay) zoom)]
|
||||
[:*
|
||||
(when (or (:close-click-outside overlay)
|
||||
(:background-overlay overlay))
|
||||
[:div.viewer-overlay-background
|
||||
{:class (dom/classnames
|
||||
:visible (:background-overlay overlay))
|
||||
:style {:width (:width wrapper-size)
|
||||
:height (:height wrapper-size)
|
||||
:position "absolute"
|
||||
:left 0
|
||||
:top 0}
|
||||
:on-click #(when (:close-click-outside overlay)
|
||||
(close-overlay (:frame overlay)))}])
|
||||
[:div.viewport-container.viewer-overlay
|
||||
{:id (str "overlay-" (str (:id (:frame overlay))))
|
||||
:style {:width (:width size-over)
|
||||
:height (:height size-over)
|
||||
:left (* (:x (:position overlay)) zoom)
|
||||
:top (* (:y (:position overlay)) zoom)}}
|
||||
[:& interactions/viewport
|
||||
{:frame (:frame overlay)
|
||||
:base-frame frame
|
||||
:frame-offset (:position overlay)
|
||||
:size size-over
|
||||
:page page
|
||||
:file file
|
||||
:users users
|
||||
:interactions-mode interactions-mode}]]]))]]
|
||||
|
||||
(when (= section :comments)
|
||||
[:& comments-layer {:file file
|
||||
:users users
|
||||
:frame frame
|
||||
:page page
|
||||
:zoom zoom}])]]]]))]]]))
|
||||
|
||||
[:& viewer-wrapper
|
||||
{:wrapper-size wrapper-size
|
||||
:scroll scroll
|
||||
:orig-frame orig-frame
|
||||
:orig-viewport-ref orig-viewport-ref
|
||||
:orig-size orig-size
|
||||
:page page
|
||||
:file file
|
||||
:users users
|
||||
:current-viewport-ref current-viewport-ref
|
||||
:size size
|
||||
:frame frame
|
||||
:interactions-mode interactions-mode
|
||||
:overlays overlays
|
||||
:zoom zoom
|
||||
:section section
|
||||
:index index}]))]]]))
|
||||
|
||||
;; --- Component: Viewer Page
|
||||
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@
|
|||
[app.main.ui.comments :as cmt]
|
||||
[app.main.ui.components.dropdown :refer [dropdown]]
|
||||
[app.main.ui.icons :as i]
|
||||
[app.main.ui.workspace.comments :as wc]
|
||||
[app.util.dom :as dom]
|
||||
[app.util.i18n :as i18n :refer [tr]]
|
||||
[okulary.core :as l]
|
||||
|
|
@ -22,7 +23,7 @@
|
|||
|
||||
(mf/defc comments-menu
|
||||
[]
|
||||
(let [{cmode :mode cshow :show} (mf/deref refs/comments-local)
|
||||
(let [{cmode :mode cshow :show clist :list} (mf/deref refs/comments-local)
|
||||
|
||||
show-dropdown? (mf/use-state false)
|
||||
toggle-dropdown (mf/use-fn #(swap! show-dropdown? not))
|
||||
|
|
@ -36,7 +37,12 @@
|
|||
update-show
|
||||
(mf/use-callback
|
||||
(fn [mode]
|
||||
(st/emit! (dcm/update-filters {:show mode}))))]
|
||||
(st/emit! (dcm/update-filters {:show mode}))))
|
||||
|
||||
update-list
|
||||
(mf/use-callback
|
||||
(fn [show-list]
|
||||
(st/emit! (dcm/update-filters {:list show-list}))))]
|
||||
|
||||
[:div.view-options {:on-click toggle-dropdown}
|
||||
[:span.label (tr "labels.comments")]
|
||||
|
|
@ -59,7 +65,14 @@
|
|||
[:li {:class (dom/classnames :selected (= :pending cshow))
|
||||
:on-click #(update-show (if (= :pending cshow) :all :pending))}
|
||||
[:span.icon i/tick]
|
||||
[:span.label (tr "labels.hide-resolved-comments")]]]]]))
|
||||
[:span.label (tr "labels.hide-resolved-comments")]]
|
||||
|
||||
[:hr]
|
||||
|
||||
[:li {:class (dom/classnames :selected (= :show clist))
|
||||
:on-click #(update-list (if (= :show clist) :hide :show))}
|
||||
[:span.icon i/tick]
|
||||
[:span.label (tr "labels.show-comments-list")]]]]]))
|
||||
|
||||
|
||||
(defn- frame-contains?
|
||||
|
|
@ -156,3 +169,17 @@
|
|||
:on-cancel on-draft-cancel
|
||||
:on-submit on-draft-submit
|
||||
:zoom zoom}])]]]))
|
||||
|
||||
|
||||
(mf/defc comments-sidebar
|
||||
[{:keys [users frame page]}]
|
||||
(let [profile (mf/deref refs/profile)
|
||||
cstate (mf/deref refs/comments-local)
|
||||
threads-map (mf/deref threads-ref)
|
||||
threads (->> (vals threads-map)
|
||||
(dcm/apply-filters cstate profile)
|
||||
(filter (fn [{:keys [position]}]
|
||||
(frame-contains? frame position))))]
|
||||
[:aside.settings-bar.settings-bar-right.comments-right-sidebar
|
||||
[:div.settings-bar-inside
|
||||
[:& wc/comments-sidebar {:users users :threads threads :page-id (:id page)}]]]))
|
||||
|
|
|
|||
|
|
@ -6,13 +6,13 @@
|
|||
|
||||
(ns app.main.ui.viewer.handoff
|
||||
(:require
|
||||
[app.main.data.viewer :as dv]
|
||||
[app.main.data.viewer :as dv]
|
||||
[app.main.store :as st]
|
||||
[app.main.ui.viewer.handoff.left-sidebar :refer [left-sidebar]]
|
||||
[app.main.ui.viewer.handoff.render :refer [render-frame-svg]]
|
||||
[app.main.ui.viewer.handoff.right-sidebar :refer [right-sidebar]]
|
||||
[app.util.dom :as dom]
|
||||
[app.util.keyboard :as kbd]
|
||||
[app.util.keyboard :as kbd]
|
||||
[goog.events :as events]
|
||||
[rumext.alpha :as mf])
|
||||
(:import goog.events.EventType))
|
||||
|
|
@ -25,7 +25,7 @@
|
|||
(st/emit! (dv/select-shape (:id frame)))))
|
||||
|
||||
(mf/defc viewport
|
||||
[{:keys [local file page frame]}]
|
||||
[{:keys [local file page frame index viewer-pagination]}]
|
||||
(let [on-mouse-wheel
|
||||
(fn [event]
|
||||
(when (kbd/mod? event)
|
||||
|
|
@ -58,6 +58,7 @@
|
|||
:local local
|
||||
:page page}]
|
||||
[:div.handoff-svg-wrapper {:on-click (handle-select-frame frame)}
|
||||
[:& viewer-pagination {:index index :num-frames (count (:frames page)) :left-bar true :right-bar true}]
|
||||
[:div.handoff-svg-container
|
||||
[:& render-frame-svg {:frame frame :page page :local local}]]]
|
||||
|
||||
|
|
|
|||
|
|
@ -107,18 +107,17 @@
|
|||
i/full-screen)]
|
||||
|
||||
(when (:is-admin permissions)
|
||||
[:span.btn-primary {:on-click open-share-dialog} (tr "labels.share-prototype")])
|
||||
[:span.btn-primary {:on-click open-share-dialog} i/export [:span (tr "labels.share-prototype")]])
|
||||
|
||||
(when (:can-edit permissions)
|
||||
[:span.btn-text-dark {:on-click go-to-workspace} (tr "labels.edit-file")])]))
|
||||
|
||||
(mf/defc header-sitemap
|
||||
[{:keys [project file page frame index] :as props}]
|
||||
[{:keys [project file page frame] :as props}]
|
||||
(let [project-name (:name project)
|
||||
file-name (:name file)
|
||||
page-name (:name page)
|
||||
frame-name (:name frame)
|
||||
total (count (:frames page))
|
||||
show-dropdown? (mf/use-state false)
|
||||
|
||||
toggle-thumbnails
|
||||
|
|
@ -151,7 +150,7 @@
|
|||
[:span "/"]
|
||||
|
||||
[:span.page-name page-name]
|
||||
[:span.icon i/arrow-down]
|
||||
|
||||
|
||||
[:& dropdown {:show @show-dropdown?
|
||||
:on-close close-dropdown}
|
||||
|
|
@ -161,12 +160,12 @@
|
|||
:on-click (partial navigate-to id)}
|
||||
(get-in file [:data :pages-index id :name])])]]]
|
||||
|
||||
[:span.icon {:on-click open-dropdown} i/arrow-down]
|
||||
[:div.current-frame
|
||||
{:on-click toggle-thumbnails}
|
||||
[:span.label "/"]
|
||||
[:span.label frame-name]
|
||||
[:span.icon i/arrow-down]
|
||||
[:span.counters (str (inc index) " / " total)]]]))
|
||||
[:span.label frame-name]]
|
||||
[:span.icon {:on-click toggle-thumbnails} i/arrow-down]]))
|
||||
|
||||
|
||||
(mf/defc header
|
||||
|
|
|
|||
|
|
@ -57,20 +57,23 @@
|
|||
[:span.label (tr "labels.hide-resolved-comments")]]]))
|
||||
|
||||
(mf/defc comments-sidebar
|
||||
[]
|
||||
[{:keys [users threads page-id]}]
|
||||
(let [threads-map (mf/deref refs/threads-ref)
|
||||
profile (mf/deref refs/profile)
|
||||
users (mf/deref refs/users)
|
||||
users-refs (mf/deref refs/users)
|
||||
users (or users users-refs)
|
||||
local (mf/deref refs/comments-local)
|
||||
options? (mf/use-state false)
|
||||
threads (if (nil? threads)
|
||||
(->> (vals threads-map)
|
||||
(sort-by :modified-at)
|
||||
(reverse)
|
||||
(dcm/apply-filters local profile))
|
||||
threads)
|
||||
tgroups (->> threads
|
||||
(dcm/group-threads-by-page))
|
||||
|
||||
tgroups (->> (vals threads-map)
|
||||
(sort-by :modified-at)
|
||||
(reverse)
|
||||
(dcm/apply-filters local profile)
|
||||
(dcm/group-threads-by-page))
|
||||
|
||||
page-id (mf/use-ctx ctx/current-page-id)
|
||||
page-id (or page-id (mf/use-ctx ctx/current-page-id))
|
||||
|
||||
on-thread-click
|
||||
(mf/use-callback
|
||||
|
|
@ -87,7 +90,7 @@
|
|||
|
||||
[:div.comments-section.comment-threads-section
|
||||
[:div.workspace-comment-threads-sidebar-header
|
||||
[:div.label "Comments"]
|
||||
[:div.label (tr "labels.comments")]
|
||||
[:div.options {:on-click #(reset! options? true)}
|
||||
[:div.label (case (:mode local)
|
||||
(nil :all) (tr "labels.all")
|
||||
|
|
|
|||
|
|
@ -1182,6 +1182,9 @@ msgstr "Help Center"
|
|||
msgid "labels.hide-resolved-comments"
|
||||
msgstr "Hide resolved comments"
|
||||
|
||||
msgid "labels.show-comments-list"
|
||||
msgstr "Show comments list"
|
||||
|
||||
msgid "labels.icons"
|
||||
msgstr "Icons"
|
||||
|
||||
|
|
|
|||
|
|
@ -1246,6 +1246,9 @@ msgstr "Centro de ayuda"
|
|||
msgid "labels.hide-resolved-comments"
|
||||
msgstr "Ocultar comentarios resueltos"
|
||||
|
||||
msgid "labels.show-comments-list"
|
||||
msgstr "Mostrar lista de comentarios"
|
||||
|
||||
msgid "labels.icons"
|
||||
msgstr "Iconos"
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue