0
Fork 0
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:
Andrey Antukh 2024-02-02 08:34:31 +01:00 committed by GitHub
commit 60fbcc3e4b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 46 additions and 35 deletions

View file

@ -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 {

View file

@ -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)

View file

@ -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;
} }

View file

@ -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;

View file

@ -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)}

View file

@ -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;
}
} }