Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-12 07:41:43 -05:00
Code Issues Activity

🐛 Fix paddings of right side panel on viewer

Browse source
This commit is contained in:
Eva Marco 2024-02-26 14:29:45 +01:00 • committed by Andrey Antukh
parent 162e7a56d6
commit 039baa6bd1
5 changed files with 32 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
frontend/src/app/main/ui/viewer.scss
View file

@ -58,6 +58,7 @@
} }
.viewer-section { .viewer-section {
@extend .new-scrollbar;
grid-row: 1 / span 2; grid-row: 1 / span 2;
grid-column: 1 / span 1; grid-column: 1 / span 1;
display: flex; display: flex;
@ -94,7 +95,7 @@
} }
.viewer-go-next.comment-sidebar { .viewer-go-next.comment-sidebar {
right: $s-264; right: $s-280;
} }
.viewer-go-prev { .viewer-go-prev {

2
frontend/src/app/main/ui/viewer/comments.scss
View file

@ -104,7 +104,7 @@
position: absolute; position: absolute;
right: 0; right: 0;
top: $s-44; top: $s-44;
width: $s-256; width: $s-276;
height: calc(100vh - $s-48); height: calc(100vh - $s-48);
z-index: $z-index-10; z-index: $z-index-10;
background-color: var(--panel-background-color); background-color: var(--panel-background-color);

4
frontend/src/app/main/ui/viewer/inspect/right_sidebar.scss
View file

@ -20,6 +20,10 @@
} }
} }
.viewer-code {
padding: 0 $s-8;
}
.tool-windows { .tool-windows {
height: 100%; height: 100%;
display: flex; display: flex;

13
frontend/src/app/main/ui/workspace/comments.cljs
View file

@ -27,7 +27,7 @@
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
(mf/defc sidebar-options (mf/defc sidebar-options
[] [{:keys [from-viewer]}]
(let [{cmode :mode cshow :show} (mf/deref refs/comments-local) (let [{cmode :mode cshow :show} (mf/deref refs/comments-local)
update-mode update-mode
(mf/use-fn (mf/use-fn
@ -44,7 +44,8 @@
(let [mode (if (= :pending cshow) :all :pending)] (let [mode (if (= :pending cshow) :all :pending)]
(st/emit! (dcm/update-filters {:show mode})))))] (st/emit! (dcm/update-filters {:show mode})))))]
[:ul {:class (stl/css :comment-mode-dropdown)} [:ul {:class (stl/css-case :comment-mode-dropdown true
:viewer-dropdown from-viewer)}
[:li {:class (stl/css-case :dropdown-item true [:li {:class (stl/css-case :dropdown-item true
:selected (or (= :all cmode) (nil? cmode))) :selected (or (= :all cmode) (nil? cmode)))
:data-value "all" :data-value "all"
@ -115,8 +116,10 @@
(dwcm/center-to-comment-thread thread) (dwcm/center-to-comment-thread thread)
(-> (dcm/open-thread thread) (-> (dcm/open-thread thread)
(with-meta {::ev/origin "workspace"})))))))] (with-meta {::ev/origin "workspace"})))))))]
[:div {:class (stl/css :comments-section)} [:div {:class (stl/css-case :comments-section true
[:div {:class (stl/css :comments-section-title)} :from-viewer from-viewer)}
[:div {:class (stl/css-case :comments-section-title true
:viewer-title from-viewer)}
[:span (tr "labels.comments")] [:span (tr "labels.comments")]
[:button {:class (stl/css :close-button) [:button {:class (stl/css :close-button)
:on-click close-section} :on-click close-section}
@ -132,7 +135,7 @@
[:& dropdown {:show options? [:& dropdown {:show options?
:on-close #(reset! state* false)} :on-close #(reset! state* false)}
[:& sidebar-options {:local local}]] [:& sidebar-options {:local local :from-viewer from-viewer}]]
[:div {:class (stl/css :comments-section-content)} [:div {:class (stl/css :comments-section-content)}

19
frontend/src/app/main/ui/workspace/comments.scss
View file

@ -13,6 +13,10 @@
grid-template-rows: $s-40 $s-48 1fr; grid-template-rows: $s-40 $s-48 1fr;
} }
.from-viewer {
padding: 0 $s-8;
}
.comments-section-title { .comments-section-title {
@include flexCenter; @include flexCenter;
@include uppercaseTitleTipography; @include uppercaseTitleTipography;
@ -29,6 +33,11 @@
} }
} }
.viewer-title {
margin: 0;
margin-block-start: $s-8;
}
.close-button { .close-button {
@extend .button-tertiary; @extend .button-tertiary;
position: absolute; position: absolute;
@ -48,7 +57,8 @@
@extend .asset-element; @extend .asset-element;
background-color: var(--color-background-tertiary); background-color: var(--color-background-tertiary);
display: flex; display: flex;
width: $s-256; width: 100%;
max-width: $s-256;
height: $s-32; height: $s-32;
padding: $s-8; padding: $s-8;
border-radius: $br-8; border-radius: $br-8;
@ -79,7 +89,12 @@
@extend .dropdown-wrapper; @extend .dropdown-wrapper;
top: $s-92; top: $s-92;
left: $s-12; left: $s-12;
width: $s-256; max-width: $s-256;
width: 100%;
}
.viewer-dropdown {
left: $s-8;
} }
.dropdown-item { .dropdown-item {