From d56c07c3dc41e52ab81965b68e3512e6de17cee9 Mon Sep 17 00:00:00 2001 From: Peter Savchenko Date: Tue, 29 Nov 2022 12:02:23 +0400 Subject: [PATCH] chore(icons): icons size increased for mobile devices (#2190) * popover icons size increased on mobile devices * update icon size on mobile * some mobile styles improvements * inline tools click on mobile devices improved --- docs/CHANGELOG.md | 1 + src/components/modules/toolbar/inline.ts | 3 +- src/styles/export.css | 19 ++++++++++-- src/styles/inline-toolbar.css | 22 ++++++++++---- src/styles/variables.css | 37 +++++++++++++++--------- 5 files changed, 58 insertions(+), 24 deletions(-) diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md index 82370afe..981cd59e 100644 --- a/docs/CHANGELOG.md +++ b/docs/CHANGELOG.md @@ -15,6 +15,7 @@ - `Fix` — Pasting from Microsoft Word to Chrome (Mac OS) fixed. Now if there are no image-tools connected, regular text content will be pasted. - `Fix` — Workaround for the HTMLJanitor bug with Tables (https://github.com/guardian/html-janitor/issues/3) added - `Fix` — Toolbox shortcuts appearance and execution fixed [#2112](https://github.com/codex-team/editor.js/issues/2112) +- `Fix` — Inline Tools click handling on mobile devices improved - `Improvement` — *Tools API* — `pasteConfig().tags` now support sanitizing configuration. It allows you to leave some explicitly specified attributes for pasted content. - `Improvement` — *CodeStyle* — [CodeX ESLint Config](https://github.com/codex-team/eslint-config) has bee updated. All ESLint/Spelling issues resolved - `Improvement` — *ToolsAPI* — The `icon` property of the `toolbox` getter became optional. diff --git a/src/components/modules/toolbar/inline.ts b/src/components/modules/toolbar/inline.ts index 9b682fb5..e4b5ae12 100644 --- a/src/components/modules/toolbar/inline.ts +++ b/src/components/modules/toolbar/inline.ts @@ -68,7 +68,8 @@ export default class InlineToolbar extends Module { /** * Margin above/below the Toolbar */ - private readonly toolbarVerticalMargin: number = 5; + // eslint-disable-next-line @typescript-eslint/no-magic-numbers + private readonly toolbarVerticalMargin: number = _.isMobileScreen() ? 20 : 6; /** * TODO: Get rid of this diff --git a/src/styles/export.css b/src/styles/export.css index 4f25aa1a..3e3bb524 100644 --- a/src/styles/export.css +++ b/src/styles/export.css @@ -46,6 +46,17 @@ &--active { color: var(--color-active-icon); } + + svg { + width: auto; + height: auto; + } + + @media (--mobile) { + width: var(--toolbox-buttons-size--mobile); + height: var(--toolbox-buttons-size--mobile); + border-radius: 8px; + } } /** @@ -93,9 +104,11 @@ text-align: center; cursor: pointer; - &:hover { - background: #FBFCFE; - box-shadow: 0 1px 3px 0 rgba(18,30,57,0.08); + @media (--can-hover) { + &:hover { + background: #FBFCFE; + box-shadow: 0 1px 3px 0 rgba(18,30,57,0.08); + } } svg { diff --git a/src/styles/inline-toolbar.css b/src/styles/inline-toolbar.css index 810b23f8..c935fe5a 100644 --- a/src/styles/inline-toolbar.css +++ b/src/styles/inline-toolbar.css @@ -1,6 +1,8 @@ .ce-inline-toolbar { + --y-offset: 8px; + @apply --overlay-pane; - transform: translateX(-50%) translateY(8px) scale(0.9); + transform: translateX(-50%) translateY(8px) scale(0.94); opacity: 0; visibility: hidden; transition: transform 150ms ease, opacity 250ms ease; @@ -16,7 +18,7 @@ } &--left-oriented { - transform: translateX(-23px) translateY(8px) scale(0.9); + transform: translateX(-23px) translateY(8px) scale(0.94); } &--left-oriented&--showed { @@ -24,7 +26,7 @@ } &--right-oriented { - transform: translateX(-100%) translateY(8px) scale(0.9); + transform: translateX(-100%) translateY(8px) scale(0.94); margin-left: 23px; } @@ -58,8 +60,10 @@ border-right: 1px solid var(--color-gray-border); box-sizing: border-box; - &:hover { - background: var(--bg-light); + @media (--can-hover) { + &:hover { + background: var(--bg-light); + } } &--hidden { @@ -88,7 +92,6 @@ border-radius: 0; line-height: normal; - padding: 0 1px !important; &--link { @@ -119,6 +122,13 @@ display: none; font-weight: 500; border-top: 1px solid rgba(201,201,204,.48); + -webkit-appearance: none; + font-family: inherit; + + @media (--mobile){ + font-size: 15px; + font-weight: 500; + } &::placeholder { color: var(--grayText); diff --git a/src/styles/variables.css b/src/styles/variables.css index 837d0006..8c600cda 100644 --- a/src/styles/variables.css +++ b/src/styles/variables.css @@ -59,6 +59,8 @@ * Size of svg icons got from the CodeX Icons pack */ --icon-size: 20px; + --icon-size--mobile: 28px; + /** * The main `.cdx-block` wrapper has such vertical paddings @@ -82,11 +84,6 @@ border-radius: 6px; z-index: 2; - @media (--mobile){ - box-shadow: 0 8px 6px -6px rgb(33 48 73 / 19%); - border-bottom-color: #c7c7c7; - } - &--left-oriented { &::before { left: 15px; @@ -160,7 +157,7 @@ align-items: center; justify-content: center; - padding: 0; + padding: 6px 1px; border-radius: 3px; cursor: pointer; border: 0; @@ -173,10 +170,17 @@ svg { width: var(--icon-size); height: var(--icon-size); + + @media (--mobile) { + width: var(--icon-size--mobile); + height: var(--icon-size--mobile); + } } - &:hover { - background-color: var(--bg-light); + @media (--can-hover) { + &:hover { + background-color: var(--bg-light); + } } &--active { @@ -236,16 +240,21 @@ flex-shrink: 0; margin-right: 10px; - @media (--mobile) { - width: var(--toolbox-buttons-size--mobile); - height: var(--toolbox-buttons-size--mobile); - border-radius: 8px; - } - svg { width: var(--icon-size); height: var(--icon-size); } + + @media (--mobile) { + width: var(--toolbox-buttons-size--mobile); + height: var(--toolbox-buttons-size--mobile); + border-radius: 8px; + + svg { + width: var(--icon-size--mobile); + height: var(--icon-size--mobile); + } + } } }