mirror of
https://github.com/penpot/penpot.git
synced 2025-03-15 17:21:17 -05:00
Merge pull request #4094 from penpot/ladybenko-6828-fix-text-selection
🐛 Fix text options & font selector in design tab
This commit is contained in:
commit
60fbcc3e4b
6 changed files with 46 additions and 35 deletions
|
@ -361,6 +361,10 @@
|
||||||
// TEXT SELECTION
|
// TEXT SELECTION
|
||||||
--text-editor-selection-background-color: var(--da-tertiary-70);
|
--text-editor-selection-background-color: var(--da-tertiary-70);
|
||||||
--text-editor-selection-foreground-color: var(--app-white);
|
--text-editor-selection-foreground-color: var(--app-white);
|
||||||
|
|
||||||
|
// NEW TEAM BUTTON
|
||||||
|
// TODO: we should not put these functional tokens here, but rather in the components they belong to
|
||||||
|
--new-team-button-background-color: var(--color-background-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
#app {
|
#app {
|
||||||
|
|
|
@ -21,6 +21,7 @@
|
||||||
on-clear (unchecked-get props "clear-action")
|
on-clear (unchecked-get props "clear-action")
|
||||||
placeholder (unchecked-get props "placeholder")
|
placeholder (unchecked-get props "placeholder")
|
||||||
icon (unchecked-get props "icon")
|
icon (unchecked-get props "icon")
|
||||||
|
autofocus (unchecked-get props "auto-focus")
|
||||||
|
|
||||||
handle-change
|
handle-change
|
||||||
(mf/use-fn
|
(mf/use-fn
|
||||||
|
@ -52,6 +53,7 @@
|
||||||
icon
|
icon
|
||||||
[:input {:on-change handle-change
|
[:input {:on-change handle-change
|
||||||
:value value
|
:value value
|
||||||
|
:auto-focus autofocus
|
||||||
:placeholder placeholder
|
:placeholder placeholder
|
||||||
:on-key-down handle-key-down}]
|
:on-key-down handle-key-down}]
|
||||||
(when (not= "" value)
|
(when (not= "" value)
|
||||||
|
|
|
@ -30,6 +30,7 @@
|
||||||
background-color: var(--input-background-color);
|
background-color: var(--input-background-color);
|
||||||
font-size: $fs-12;
|
font-size: $fs-12;
|
||||||
color: var(--input-foreground-color);
|
color: var(--input-foreground-color);
|
||||||
|
border-radius: $br-8;
|
||||||
&:focus {
|
&:focus {
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
|
@ -232,13 +232,10 @@
|
||||||
width: $s-168;
|
width: $s-168;
|
||||||
}
|
}
|
||||||
|
|
||||||
.new-team {
|
|
||||||
background-color: $db-quaternary;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.action {
|
&.action {
|
||||||
.team-icon {
|
.team-icon {
|
||||||
background-color: #2e3434;
|
background-color: #2e3434;
|
||||||
|
background-color: var(--new-team-button-background-color);
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
height: $s-24;
|
height: $s-24;
|
||||||
margin-right: $s-12;
|
margin-right: $s-12;
|
||||||
|
|
|
@ -176,6 +176,7 @@
|
||||||
[:div {:class (stl/css :header)}
|
[:div {:class (stl/css :header)}
|
||||||
[:& search-bar {:on-change on-filter-change
|
[:& search-bar {:on-change on-filter-change
|
||||||
:value (:term @state)
|
:value (:term @state)
|
||||||
|
:auto-focus true
|
||||||
:placeholder (tr "workspace.options.search-font")}]
|
:placeholder (tr "workspace.options.search-font")}]
|
||||||
(when (and recent-fonts show-recent)
|
(when (and recent-fonts show-recent)
|
||||||
[:section {:class (stl/css :show-recent)}
|
[:section {:class (stl/css :show-recent)}
|
||||||
|
|
|
@ -247,14 +247,13 @@
|
||||||
|
|
||||||
.text-options {
|
.text-options {
|
||||||
@include flexColumn;
|
@include flexColumn;
|
||||||
margin-bottom: $s-8;
|
|
||||||
&:not(.text-options-full-size) {
|
&:not(.text-options-full-size) {
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
.font-option {
|
.font-option {
|
||||||
@include titleTipography;
|
@include titleTipography;
|
||||||
@extend .asset-element;
|
@extend .asset-element;
|
||||||
padding-right: 0;
|
padding: $s-8 0 $s-8 $s-8;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
.name {
|
.name {
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
|
@ -292,6 +291,7 @@
|
||||||
padding: 0;
|
padding: 0;
|
||||||
.numeric-input {
|
.numeric-input {
|
||||||
@extend .input-base;
|
@extend .input-base;
|
||||||
|
padding-inline-start: $s-8;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -375,11 +375,14 @@
|
||||||
padding: $s-12;
|
padding: $s-12;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.font-wrapper {
|
.font-wrapper {
|
||||||
padding-bottom: $s-4;
|
padding-bottom: $s-4;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
.font-item {
|
}
|
||||||
|
|
||||||
|
.font-item {
|
||||||
@extend .asset-element;
|
@extend .asset-element;
|
||||||
margin-bottom: $s-4;
|
margin-bottom: $s-4;
|
||||||
border-radius: $br-8;
|
border-radius: $br-8;
|
||||||
|
@ -406,8 +409,6 @@
|
||||||
@include titleTipography;
|
@include titleTipography;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-selector-dropdown-full-size {
|
.font-selector-dropdown-full-size {
|
||||||
|
@ -418,7 +419,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.fonts-list {
|
.fonts-list {
|
||||||
@include menuShadow;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
@ -439,4 +439,10 @@
|
||||||
border-start-start-radius: 0;
|
border-start-start-radius: 0;
|
||||||
border-start-end-radius: 0;
|
border-start-end-radius: 0;
|
||||||
border: $s-1 solid var(--color-background-quaternary);
|
border: $s-1 solid var(--color-background-quaternary);
|
||||||
|
|
||||||
|
// TODO: this should belong to typography-entry , but atm we don't have a clear
|
||||||
|
// way of accessing whether we are in fullsize mode or not
|
||||||
|
.selected {
|
||||||
|
padding-inline-end: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Add table
Reference in a new issue