mirror of
https://github.com/penpot/penpot.git
synced 2025-03-20 19:51:23 -05:00
♻️ Refactor access tokens file
This commit is contained in:
Eva Marco
Andrey Antukh
parent
bc04eaa910
commit
8b6be5b62e
2 changed files with 125 additions and 188 deletions
frontend/src/app/main/ui/settings
|
|
@ -138,7 +138,8 @@
|
|||
:placeholder (tr "modals.create-access-token.name.placeholder")}]]
|
||||
|
||||
[:div {:class (stl/css :fields-row)}
|
||||
[:div {:class (stl/css :select-title)} (tr "modals.create-access-token.expiration-date.label")]
|
||||
[:div {:class (stl/css :select-title)}
|
||||
(tr "modals.create-access-token.expiration-date.label")]
|
||||
[:& fm/select {:options [{:label (tr "dashboard.access-tokens.expiration-never") :value "never" :key "never"}
|
||||
{:label (tr "dashboard.access-tokens.expiration-30-days") :value "720h" :key "720h"}
|
||||
{:label (tr "dashboard.access-tokens.expiration-60-days") :value "1440h" :key "1440h"}
|
||||
|
|
@ -192,16 +193,13 @@
|
|||
(mf/defc access-tokens-hero
|
||||
[]
|
||||
(let [on-click (mf/use-fn #(st/emit! (modal/show :access-token {})))]
|
||||
[:div {:class (stl/css :access-tokens-hero-container)}
|
||||
[:div {:class (stl/css :access-tokens-hero)}
|
||||
[:div {:class (stl/css :desc)}
|
||||
[:h2 (tr "dashboard.access-tokens.personal")]
|
||||
[:p (tr "dashboard.access-tokens.personal.description")]]
|
||||
[:div {:class (stl/css :access-tokens-hero)}
|
||||
[:h2 {:class (stl/css :hero-title)} (tr "dashboard.access-tokens.personal")]
|
||||
[:p {:class (stl/css :hero-desc)} (tr "dashboard.access-tokens.personal.description")]
|
||||
|
||||
[:button
|
||||
{:class (stl/css :btn-primary)
|
||||
:on-click on-click}
|
||||
[:span (tr "dashboard.access-tokens.create")]]]]))
|
||||
[:button {:class (stl/css :hero-btn)
|
||||
:on-click on-click}
|
||||
(tr "dashboard.access-tokens.create")]]))
|
||||
|
||||
(mf/defc access-token-actions
|
||||
[{:keys [on-delete]}]
|
||||
|
|
@ -231,11 +229,11 @@
|
|||
(dom/stop-propagation event)
|
||||
(on-menu-click event))))]
|
||||
|
||||
[:div {:class (stl/css :icon)
|
||||
:tab-index "0"
|
||||
:ref menu-ref
|
||||
:on-click on-menu-click
|
||||
:on-key-down on-keydown}
|
||||
[:button {:class (stl/css :menu-btn)
|
||||
:tab-index "0"
|
||||
:ref menu-ref
|
||||
:on-click on-menu-click
|
||||
:on-key-down on-keydown}
|
||||
menu-icon
|
||||
[:& context-menu-a11y
|
||||
{:on-close on-menu-close
|
||||
|
|
@ -274,15 +272,15 @@
|
|||
:on-accept delete-fn}))))]
|
||||
|
||||
[:div {:class (stl/css :table-row)}
|
||||
[:div {:class (stl/css :table-field :name)}
|
||||
[:div {:class (stl/css :table-field :field-name)}
|
||||
(str (:name token))]
|
||||
|
||||
[:div {:class (stl/css :table-field :expiration-date)}
|
||||
[:span {:class (stl/css-case :expired expired? :content true)}
|
||||
(cond
|
||||
(nil? expires-at) (tr "dashboard.access-tokens.no-expiration")
|
||||
expired? (tr "dashboard.access-tokens.expired-on" expires-txt)
|
||||
:else (tr "dashboard.access-tokens.expires-on" expires-txt))]]
|
||||
[:div {:class (stl/css-case :expiration-date true
|
||||
:expired expired?)}
|
||||
(cond
|
||||
(nil? expires-at) (tr "dashboard.access-tokens.no-expiration")
|
||||
expired? (tr "dashboard.access-tokens.expired-on" expires-txt)
|
||||
:else (tr "dashboard.access-tokens.expires-on" expires-txt))]
|
||||
[:div {:class (stl/css :table-field :actions)}
|
||||
[:& access-token-actions
|
||||
{:on-delete on-delete}]]]))
|
||||
|
|
@ -295,14 +293,13 @@
|
|||
(st/emit! (du/fetch-access-tokens)))
|
||||
|
||||
[:div {:class (stl/css :dashboard-access-tokens)}
|
||||
[:div
|
||||
[:& access-tokens-hero]
|
||||
(if (empty? tokens)
|
||||
[:div {:class (stl/css :access-tokens-empty)}
|
||||
[:div (tr "dashboard.access-tokens.empty.no-access-tokens")]
|
||||
[:div (tr "dashboard.access-tokens.empty.add-one")]]
|
||||
[:div {:class (stl/css :dashboard-table)}
|
||||
[:div {:class (stl/css :table-rows)}
|
||||
(for [token tokens]
|
||||
[:& access-token-item {:token token :key (:id token)}])]])]]))
|
||||
[:& access-tokens-hero]
|
||||
(if (empty? tokens)
|
||||
[:div {:class (stl/css :access-tokens-empty)}
|
||||
[:div (tr "dashboard.access-tokens.empty.no-access-tokens")]
|
||||
[:div (tr "dashboard.access-tokens.empty.add-one")]]
|
||||
[:div {:class (stl/css :dashboard-table)}
|
||||
[:div {:class (stl/css :table-rows)}
|
||||
(for [token tokens]
|
||||
[:& access-token-item {:token token :key (:id token)}])]])]))
|
||||
|
||||
|
|
|
|||
|
|
@ -6,175 +6,118 @@
|
|||
|
||||
@use "common/refactor/common-refactor.scss" as *;
|
||||
|
||||
.dashboard-table {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: $fs-16;
|
||||
margin-top: $s-20;
|
||||
// ACCESS TOKENS PAGE
|
||||
.dashboard-access-tokens {
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr;
|
||||
margin: $s-80 auto $s-120 auto;
|
||||
gap: $s-32;
|
||||
width: $s-800;
|
||||
svg {
|
||||
width: $s-12;
|
||||
height: $s-12;
|
||||
fill: $df-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.table-header {
|
||||
color: $df-secondary;
|
||||
// hero
|
||||
.access-tokens-hero {
|
||||
display: grid;
|
||||
font-size: $fs-12;
|
||||
grid-template-columns: 43% 1fr $s-108 $s-12;
|
||||
height: $s-40;
|
||||
grid-template-rows: auto auto 1fr;
|
||||
gap: $s-32;
|
||||
width: $s-500;
|
||||
font-size: $fs-14;
|
||||
margin: $s-16 auto 0 auto;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
@include bigTitleTipography;
|
||||
color: var(--title-foreground-color-hover);
|
||||
}
|
||||
|
||||
.hero-desc {
|
||||
color: var(--title-foreground-color);
|
||||
margin-bottom: 0;
|
||||
font-size: $fs-14;
|
||||
}
|
||||
|
||||
.hero-btn {
|
||||
@extend .button-primary;
|
||||
}
|
||||
|
||||
// table empty
|
||||
.access-tokens-empty {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
align-content: center;
|
||||
height: $s-156;
|
||||
max-width: $s-1000;
|
||||
padding: 0 $s-16;
|
||||
text-transform: uppercase;
|
||||
width: 100%;
|
||||
padding: $s-32;
|
||||
border: $s-1 solid var(--panel-border-color);
|
||||
border-radius: $br-8;
|
||||
color: var(--dashboard-list-text-foreground-color);
|
||||
}
|
||||
|
||||
// Access tokens table
|
||||
.dashboard-table {
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
.table-rows {
|
||||
color: $db-secondary;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: $s-16;
|
||||
max-width: $s-1000;
|
||||
padding-top: 0;
|
||||
display: grid;
|
||||
grid-auto-rows: $s-64;
|
||||
gap: $s-16;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-width: $s-1000;
|
||||
margin-top: $s-16;
|
||||
color: var(--title-foreground-color);
|
||||
}
|
||||
|
||||
.table-row {
|
||||
align-items: center;
|
||||
background-color: $db-tertiary;
|
||||
border-radius: $br-8;
|
||||
color: $df-primary;
|
||||
display: grid;
|
||||
font-size: $fs-14;
|
||||
grid-template-columns: 1fr 43% $s-12;
|
||||
height: fit-content;
|
||||
min-height: $s-40;
|
||||
padding: 0 $s-16;
|
||||
width: 100%;
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-top: $s-8;
|
||||
}
|
||||
}
|
||||
|
||||
.table-field {
|
||||
display: flex;
|
||||
grid-template-columns: 43% 1fr auto;
|
||||
align-items: center;
|
||||
|
||||
.icon {
|
||||
height: 100%;
|
||||
width: $s-16;
|
||||
padding-left: $s-12;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&.name {
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
color: $df-primary;
|
||||
display: -webkit-box;
|
||||
max-width: $s-480;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
&.expiration-date {
|
||||
color: $df-secondary;
|
||||
font-size: $fs-14;
|
||||
|
||||
.content {
|
||||
padding: $s-2 $s-6;
|
||||
&.expired {
|
||||
background-color: var(--status-color-warning-500);
|
||||
border-radius: $br-4;
|
||||
color: $db-secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.access-token-created {
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
&.actions {
|
||||
position: relative;
|
||||
}
|
||||
height: $s-64;
|
||||
width: 100%;
|
||||
padding: 0 $s-16;
|
||||
border-radius: $br-8;
|
||||
background-color: var(--dashboard-list-background-color);
|
||||
color: var(--dashboard-list-foreground-color);
|
||||
}
|
||||
|
||||
.field-name {
|
||||
@include textEllipsis;
|
||||
display: grid;
|
||||
width: 43%;
|
||||
min-width: $s-300;
|
||||
}
|
||||
|
||||
.expiration-date {
|
||||
@include flexCenter;
|
||||
min-width: $s-76;
|
||||
width: fit-content;
|
||||
height: $s-24;
|
||||
border-radius: $br-8;
|
||||
color: var(--dashboard-list-text-foreground-color);
|
||||
}
|
||||
|
||||
.expired {
|
||||
@include headlineSmallTypography;
|
||||
padding: 0 $s-6;
|
||||
color: var(--pill-foreground-color);
|
||||
background-color: var(--status-widget-background-color-warning);
|
||||
}
|
||||
|
||||
.actions {
|
||||
position: relative;
|
||||
}
|
||||
.menu-icon {
|
||||
@extend .button-icon;
|
||||
stroke: var(--icon-foreground);
|
||||
}
|
||||
|
||||
.dashboard-access-tokens {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: $s-120;
|
||||
margin-top: $s-80;
|
||||
width: $s-800;
|
||||
}
|
||||
|
||||
.access-tokens-hero-container {
|
||||
background-color: transparent;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: $s-1000;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.access-tokens-hero {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: $fs-14;
|
||||
gap: $s-32;
|
||||
justify-content: space-between;
|
||||
width: $s-468;
|
||||
|
||||
.desc {
|
||||
background-color: transparent;
|
||||
color: $df-secondary;
|
||||
width: 100%;
|
||||
|
||||
h2 {
|
||||
color: $df-primary;
|
||||
font-size: $fs-24;
|
||||
font-weight: regular;
|
||||
margin-bottom: $s-32;
|
||||
}
|
||||
p {
|
||||
color: $df-secondary;
|
||||
margin-bottom: 0;
|
||||
font-size: $fs-14;
|
||||
}
|
||||
}
|
||||
.btn-primary {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.access-tokens-empty {
|
||||
align-items: center;
|
||||
border-radius: $br-8;
|
||||
border: $s-1 solid $db-quaternary;
|
||||
color: $df-secondary;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: $fs-14;
|
||||
justify-content: center;
|
||||
margin-top: $s-32;
|
||||
max-width: $s-1000;
|
||||
min-height: $s-136;
|
||||
padding: $s-32;
|
||||
text-align: center;
|
||||
width: $s-468;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
@extend .button-primary;
|
||||
height: $s-32;
|
||||
.menu-btn {
|
||||
@include buttonStyle;
|
||||
}
|
||||
|
||||
// Create access token modal
|
||||
.modal-overlay {
|
||||
@extend .modal-overlay-base;
|
||||
}
|
||||
|
|
@ -186,13 +129,14 @@
|
|||
|
||||
.modal-header {
|
||||
margin-bottom: $s-24;
|
||||
.modal-title {
|
||||
@include uppercaseTitleTipography;
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
.modal-close-btn {
|
||||
@extend .modal-close-btn-base;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
@include uppercaseTitleTipography;
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
.modal-close-btn {
|
||||
@extend .modal-close-btn-base;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
|
|
@ -202,10 +146,6 @@
|
|||
margin-bottom: $s-24;
|
||||
}
|
||||
|
||||
.fields-row {
|
||||
@include flexColumn;
|
||||
}
|
||||
|
||||
.select-title {
|
||||
@include bodySmallTypography;
|
||||
color: var(--modal-title-foreground-color);
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue