mirror of
https://github.com/codex-team/editor.js
synced 2024-06-18 05:35:28 +02:00
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:
parent
1a72d2153b
commit
d56c07c3dc
|
@ -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` — 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` — 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` — 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` — *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` — *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.
|
- `Improvement` — *ToolsAPI* — The `icon` property of the `toolbox` getter became optional.
|
||||||
|
|
|
@ -68,7 +68,8 @@ export default class InlineToolbar extends Module<InlineToolbarNodes> {
|
||||||
/**
|
/**
|
||||||
* Margin above/below the Toolbar
|
* 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
|
* TODO: Get rid of this
|
||||||
|
|
|
@ -46,6 +46,17 @@
|
||||||
&--active {
|
&--active {
|
||||||
color: var(--color-active-icon);
|
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;
|
text-align: center;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
&:hover {
|
@media (--can-hover) {
|
||||||
background: #FBFCFE;
|
&:hover {
|
||||||
box-shadow: 0 1px 3px 0 rgba(18,30,57,0.08);
|
background: #FBFCFE;
|
||||||
|
box-shadow: 0 1px 3px 0 rgba(18,30,57,0.08);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
svg {
|
svg {
|
||||||
|
|
|
@ -1,6 +1,8 @@
|
||||||
.ce-inline-toolbar {
|
.ce-inline-toolbar {
|
||||||
|
--y-offset: 8px;
|
||||||
|
|
||||||
@apply --overlay-pane;
|
@apply --overlay-pane;
|
||||||
transform: translateX(-50%) translateY(8px) scale(0.9);
|
transform: translateX(-50%) translateY(8px) scale(0.94);
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
transition: transform 150ms ease, opacity 250ms ease;
|
transition: transform 150ms ease, opacity 250ms ease;
|
||||||
|
@ -16,7 +18,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
&--left-oriented {
|
&--left-oriented {
|
||||||
transform: translateX(-23px) translateY(8px) scale(0.9);
|
transform: translateX(-23px) translateY(8px) scale(0.94);
|
||||||
}
|
}
|
||||||
|
|
||||||
&--left-oriented&--showed {
|
&--left-oriented&--showed {
|
||||||
|
@ -24,7 +26,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
&--right-oriented {
|
&--right-oriented {
|
||||||
transform: translateX(-100%) translateY(8px) scale(0.9);
|
transform: translateX(-100%) translateY(8px) scale(0.94);
|
||||||
margin-left: 23px;
|
margin-left: 23px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -58,8 +60,10 @@
|
||||||
border-right: 1px solid var(--color-gray-border);
|
border-right: 1px solid var(--color-gray-border);
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
|
||||||
&:hover {
|
@media (--can-hover) {
|
||||||
background: var(--bg-light);
|
&:hover {
|
||||||
|
background: var(--bg-light);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&--hidden {
|
&--hidden {
|
||||||
|
@ -88,7 +92,6 @@
|
||||||
|
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
line-height: normal;
|
line-height: normal;
|
||||||
padding: 0 1px !important;
|
|
||||||
|
|
||||||
|
|
||||||
&--link {
|
&--link {
|
||||||
|
@ -119,6 +122,13 @@
|
||||||
display: none;
|
display: none;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
border-top: 1px solid rgba(201,201,204,.48);
|
border-top: 1px solid rgba(201,201,204,.48);
|
||||||
|
-webkit-appearance: none;
|
||||||
|
font-family: inherit;
|
||||||
|
|
||||||
|
@media (--mobile){
|
||||||
|
font-size: 15px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
&::placeholder {
|
&::placeholder {
|
||||||
color: var(--grayText);
|
color: var(--grayText);
|
||||||
|
|
|
@ -59,6 +59,8 @@
|
||||||
* Size of svg icons got from the CodeX Icons pack
|
* Size of svg icons got from the CodeX Icons pack
|
||||||
*/
|
*/
|
||||||
--icon-size: 20px;
|
--icon-size: 20px;
|
||||||
|
--icon-size--mobile: 28px;
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* The main `.cdx-block` wrapper has such vertical paddings
|
* The main `.cdx-block` wrapper has such vertical paddings
|
||||||
|
@ -82,11 +84,6 @@
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
|
|
||||||
@media (--mobile){
|
|
||||||
box-shadow: 0 8px 6px -6px rgb(33 48 73 / 19%);
|
|
||||||
border-bottom-color: #c7c7c7;
|
|
||||||
}
|
|
||||||
|
|
||||||
&--left-oriented {
|
&--left-oriented {
|
||||||
&::before {
|
&::before {
|
||||||
left: 15px;
|
left: 15px;
|
||||||
|
@ -160,7 +157,7 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
||||||
padding: 0;
|
padding: 6px 1px;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
border: 0;
|
border: 0;
|
||||||
|
@ -173,10 +170,17 @@
|
||||||
svg {
|
svg {
|
||||||
width: var(--icon-size);
|
width: var(--icon-size);
|
||||||
height: var(--icon-size);
|
height: var(--icon-size);
|
||||||
|
|
||||||
|
@media (--mobile) {
|
||||||
|
width: var(--icon-size--mobile);
|
||||||
|
height: var(--icon-size--mobile);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
@media (--can-hover) {
|
||||||
background-color: var(--bg-light);
|
&:hover {
|
||||||
|
background-color: var(--bg-light);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&--active {
|
&--active {
|
||||||
|
@ -236,16 +240,21 @@
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
|
|
||||||
@media (--mobile) {
|
|
||||||
width: var(--toolbox-buttons-size--mobile);
|
|
||||||
height: var(--toolbox-buttons-size--mobile);
|
|
||||||
border-radius: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
svg {
|
svg {
|
||||||
width: var(--icon-size);
|
width: var(--icon-size);
|
||||||
height: 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);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue