Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-23 23:18:48 -05:00
Code Issues Activity

💄 Redesign debug panel

Browse source
This commit is contained in:
alonso.torres 2024-01-04 15:15:12 +01:00
parent 93bf8c1478
commit e3ed198ba1
2 changed files with 74 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
frontend/src/app/main/ui/workspace/sidebar/debug.cljs
View file

@ -5,6 +5,7 @@
;; Copyright (c) KALEIDOS INC
(ns app.main.ui.workspace.sidebar.debug
(:require-macros [app.main.style :as stl])
(:require
[app.common.data :as d]
[app.main.data.workspace :as dw]
@ -24,26 +25,27 @@
(dbg/toggle! option)
(js* "app.main.reinit()")))
on-close
handle-close
(mf/use-fn
(fn []
(st/emit! (dw/remove-layout-flag :debug-panel))))]
[:div.debug-panel
[:div.debug-panel-header
[:div.debug-panel-close-button
{:on-click on-close} i/close]
[:div.debug-panel-title "Debugging tools"]]
[:div.debug-panel-inner
[:div {:class (stl/css :debug-panel)}
[:div {:class (stl/css :panel-title)}
[:span "Debugging tools"]
[:div {:class (stl/css :close-button) :on-click handle-close}
i/close-refactor]]
[:div {:class (stl/css :debug-panel-inner)}
(for [option (sort-by d/name dbg/options)]
[:div.debug-option {:key (d/name option)
:on-click #(on-toggle-enabled % option)}
[:div {:class (stl/css :checkbox-wrapper)}
[:span {:class (stl/css-case :checkbox-icon true :global/checked (dbg/enabled? option))
:on-click #(on-toggle-enabled % option)}
(when (dbg/enabled? option) i/status-tick-refactor)]
[:input {:type "checkbox"
:id (d/name option)
:key (d/name option)
:on-change #(on-toggle-enabled % option)
:checked (dbg/enabled? option)}]
[:div.field.check
(if (dbg/enabled? option)
[:span.checked i/checkbox-checked]
[:span.unchecked i/checkbox-unchecked])]
[:label {:for (d/name option)} (d/name option)]])]]))

59
frontend/src/app/main/ui/workspace/sidebar/debug.scss Normal file
View file

@ -0,0 +1,59 @@
// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
//
// Copyright (c) KALEIDOS INC
@use "common/refactor/common-refactor.scss" as *;
.debug-panel {
display: flex;
flex-direction: column;
background-color: var(--panel-background-color);
}
.panel-title {
@include flexCenter;
@include tabTitleTipography;
position: relative;
height: $s-32;
min-height: $s-32;
margin: $s-8 $s-8 0 $s-8;
border-radius: $br-8;
background-color: var(--panel-title-background-color);
span {
@include flexCenter;
flex-grow: 1;
color: var(--title-foreground-color-hover);
}
}
.close-button {
@extend .button-tertiary;
position: absolute;
right: $s-2;
top: $s-2;
height: $s-28;
width: $s-28;
border-radius: $br-6;
svg {
@extend .button-icon;
stroke: var(--icon-foreground);
}
}
.checkbox-wrapper {
@extend .input-checkbox;
height: $s-32;
padding: 0;
}
.checkbox-icon {
@extend .checkbox-icon;
cursor: pointer;
}
.debug-panel-inner {
padding: $s-16 $s-8;
}