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
This commit is contained in:
Peter Savchenko 2022-11-29 12:02:23 +04:00 committed by GitHub
parent 1a72d2153b
commit d56c07c3dc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 58 additions and 24 deletions

View File

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

View File

@ -68,7 +68,8 @@ export default class InlineToolbar extends Module<InlineToolbarNodes> {
/**
* 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

View File

@ -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,10 +104,12 @@
text-align: center;
cursor: pointer;
@media (--can-hover) {
&:hover {
background: #FBFCFE;
box-shadow: 0 1px 3px 0 rgba(18,30,57,0.08);
}
}
svg {
height: 20px;

View File

@ -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,9 +60,11 @@
border-right: 1px solid var(--color-gray-border);
box-sizing: border-box;
@media (--can-hover) {
&:hover {
background: var(--bg-light);
}
}
&--hidden {
display: none;
@ -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);

View File

@ -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,11 +170,18 @@
svg {
width: var(--icon-size);
height: var(--icon-size);
@media (--mobile) {
width: var(--icon-size--mobile);
height: var(--icon-size--mobile);
}
}
@media (--can-hover) {
&:hover {
background-color: var(--bg-light);
}
}
&--active {
color: var(--color-active-icon);
@ -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);
}
}
}
}