rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: super icons (#1974)

Browse Source
This commit is contained in:
Mo
2022-11-09 09:14:49 -06:00
committed by GitHub
parent 772fbea381
commit ec7f915642
177 changed files with 360 additions and 518 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
packages/blocks-editor/src/Lexical/Theme/IconComponent.tsx Normal file
View File

@@ -0,0 +1,15 @@
export const IconComponent = ({
children,
size = 20,
paddingTop = 0,
}: {
children: React.ReactNode;
size?: number;
paddingTop?: number;
}) => {
return (
<span className="svg-icon" style={{width: size, height: size, paddingTop}}>
{children}
</span>
);
};

166
packages/blocks-editor/src/Lexical/Theme/base.scss
View File

@@ -216,34 +216,6 @@ body {
bottom: 20px;
}
#options-button::after {
background-image: url(#{$blocks-editor-icons-path}/gear.svg);
}
#test-recorder-button::after {
background-image: url(#{$blocks-editor-icons-path}/journal-code.svg);
}
#paste-log-button::after {
background-image: url(#{$blocks-editor-icons-path}/clipboard.svg);
}
#test-recorder-button-snapshot {
margin-right: auto;
}
#test-recorder-button-snapshot::after {
background-image: url(#{$blocks-editor-icons-path}/camera.svg);
}
#test-recorder-button-copy::after {
background-image: url(#{$blocks-editor-icons-path}/clipboard.svg);
}
#test-recorder-button-download::after {
background-image: url(#{$blocks-editor-icons-path}/download.svg);
}
.mentions-menu {
width: 250px;
}
@@ -256,68 +228,6 @@ body {
width: 200px;
}
.link-editor .button.active,
.toolbar .button.active {
background-color: rgb(223, 232, 250);
}
.link-editor .link-input {
display: block;
width: calc(100% - 24px);
box-sizing: border-box;
margin: 8px 12px;
padding: 8px 12px;
border-radius: 15px;
background-color: #eee;
font-size: 15px;
color: rgb(5, 5, 5);
border: 0;
outline: 0;
position: relative;
font-family: inherit;
}
.link-editor div.link-edit {
background-image: url(#{$blocks-editor-icons-path}/pencil-fill.svg);
background-size: 16px;
background-position: center;
background-repeat: no-repeat;
width: 35px;
vertical-align: -0.25em;
position: absolute;
right: 0;
top: 0;
bottom: 0;
cursor: pointer;
}
.link-editor .link-input a {
color: rgb(33, 111, 219);
text-decoration: none;
display: block;
white-space: nowrap;
overflow: hidden;
margin-right: 30px;
text-overflow: ellipsis;
}
.link-editor .link-input a:hover {
text-decoration: underline;
}
.link-editor .font-size-wrapper,
.link-editor .font-family-wrapper {
display: flex;
margin: 0 4px;
}
.link-editor select {
padding: 6px;
border: none;
background-color: rgba(0, 0, 0, 0.075);
border-radius: 4px;
}
.mention:focus {
box-shadow: rgb(180 213 255) 0px 0px 0px 2px;
outline: none;
@@ -365,34 +275,6 @@ body {
margin: 2px;
}
#block-controls span.block-type.paragraph {
background-image: url(#{$blocks-editor-icons-path}/text-paragraph.svg);
}
#block-controls span.block-type.h1 {
background-image: url(#{$blocks-editor-icons-path}/type-h1.svg);
}
#block-controls span.block-type.h2 {
background-image: url(#{$blocks-editor-icons-path}/type-h2.svg);
}
#block-controls span.block-type.quote {
background-image: url(#{$blocks-editor-icons-path}/chat-square-quote.svg);
}
#block-controls span.block-type.ul {
background-image: url(#{$blocks-editor-icons-path}/list-ul.svg);
}
#block-controls span.block-type.ol {
background-image: url(#{$blocks-editor-icons-path}/list-ol.svg);
}
#block-controls span.block-type.code {
background-image: url(#{$blocks-editor-icons-path}/code.svg);
}
.characters-limit {
color: #888;
font-size: 12px;
@@ -757,54 +639,6 @@ body {
vertical-align: -0.25em;
}
.actions i.indent {
background-image: url(#{$blocks-editor-icons-path}/indent.svg);
}
.actions i.outdent {
background-image: url(#{$blocks-editor-icons-path}/outdent.svg);
}
.actions i.lock {
background-image: url(#{$blocks-editor-icons-path}/lock-fill.svg);
}
.actions i.image {
background-image: url(#{$blocks-editor-icons-path}/file-image.svg);
}
.actions i.table {
background-image: url(#{$blocks-editor-icons-path}/table.svg);
}
.actions i.unlock {
background-image: url(#{$blocks-editor-icons-path}/lock.svg);
}
.actions i.left-align {
background-image: url(#{$blocks-editor-icons-path}/text-left.svg);
}
.actions i.center-align {
background-image: url(#{$blocks-editor-icons-path}/text-center.svg);
}
.actions i.right-align {
background-image: url(#{$blocks-editor-icons-path}/text-right.svg);
}
.actions i.justify-align {
background-image: url(#{$blocks-editor-icons-path}/justify.svg);
}
.actions i.disconnect {
background-image: url(#{$blocks-editor-icons-path}/plug.svg);
}
.actions i.connect {
background-image: url(#{$blocks-editor-icons-path}/plug-fill.svg);
}
.table-cell-action-button-container {
position: absolute;
top: 0;

92
packages/blocks-editor/src/Lexical/Theme/icons.scss
View File

@@ -1,64 +1,10 @@
.icon.paragraph {
background-image: url(#{$blocks-editor-icons-path}/text-paragraph.svg);
}
.icon.h1 {
background-image: url(#{$blocks-editor-icons-path}/type-h1.svg);
}
.icon.h2 {
background-image: url(#{$blocks-editor-icons-path}/type-h2.svg);
}
.icon.h3 {
background-image: url(#{$blocks-editor-icons-path}/type-h3.svg);
}
.icon.h4 {
background-image: url(#{$blocks-editor-icons-path}/type-h4.svg);
}
.icon.h5 {
background-image: url(#{$blocks-editor-icons-path}/type-h5.svg);
}
.icon.h6 {
background-image: url(#{$blocks-editor-icons-path}/type-h6.svg);
}
.icon.bullet-list,
.icon.bullet {
background-image: url(#{$blocks-editor-icons-path}/list-ul.svg);
}
.icon.check-list,
.icon.check {
background-image: url(#{$blocks-editor-icons-path}/square-check.svg);
}
.icon.numbered-list,
.icon.number {
background-image: url(#{$blocks-editor-icons-path}/list-ol.svg);
}
.icon.quote {
background-image: url(#{$blocks-editor-icons-path}/chat-square-quote.svg);
}
.icon.code {
background-image: url(#{$blocks-editor-icons-path}/code.svg);
}
.icon.plus {
background-image: url(#{$blocks-editor-icons-path}/plus.svg);
}
.icon.caret-right {
background-image: url(#{$blocks-editor-icons-path}/caret-right-fill.svg);
}
/**
.icon.dropdown-more {
background-image: url(#{$blocks-editor-icons-path}/dropdown-more.svg);
background-image: url(#{$blocks-editor-icons-path}/dropdown-more.svg);
}
.icon.font-color {
@@ -85,18 +31,10 @@ i.clear {
background-image: url(#{$blocks-editor-icons-path}/trash.svg);
}
i.horizontal-rule {
background-image: url(#{$blocks-editor-icons-path}/horizontal-rule.svg);
}
i.image {
background-image: url(#{$blocks-editor-icons-path}/file-image.svg);
}
i.table {
background-image: url(#{$blocks-editor-icons-path}/table.svg);
}
i.close {
background-image: url(#{$blocks-editor-icons-path}/close.svg);
}
@@ -109,31 +47,6 @@ i.poll {
background-image: url(#{$blocks-editor-icons-path}/card-checklist.svg);
}
i.tweet {
background-image: url(#{$blocks-editor-icons-path}/tweet.svg);
}
i.youtube {
background-image: url(#{$blocks-editor-icons-path}/youtube.svg);
}
.icon.left-align,
i.left-align {
background-image: url(#{$blocks-editor-icons-path}/text-left.svg);
}
i.center-align {
background-image: url(#{$blocks-editor-icons-path}/text-center.svg);
}
i.right-align {
background-image: url(#{$blocks-editor-icons-path}/text-right.svg);
}
i.justify-align {
background-image: url(#{$blocks-editor-icons-path}/justify.svg);
}
i.indent {
background-image: url(#{$blocks-editor-icons-path}/indent.svg);
}
@@ -201,3 +114,4 @@ i.prettier {
i.prettier-error {
background-image: url(#{$blocks-editor-icons-path}/prettier-error.svg);
}
*/

3
packages/blocks-editor/src/Lexical/Theme/lexical.scss
View File

@@ -1,4 +1,5 @@
@import 'base';
@import 'custom';
@import 'editor';
@import 'icons';
@import 'icons';
@import 'links';

110
packages/blocks-editor/src/Lexical/Theme/links.scss Normal file
View File

@@ -0,0 +1,110 @@
.button.active,
.toolbar .button.active {
background-color: var(--sn-stylekit-contrast-background-color);
}
.link-editor {
background-color: var(--sn-stylekit-secondary-background-color);
border-radius: 8px;
border: 0;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
box-sizing: border-box;
display: absolute;
font-family: inherit;
font-size: 15px;
left: 0;
margin: 8px 12px;
max-width: 400px;
opacity: 0;
outline: 0;
padding: 8px 12px;
position: absolute;
top: 0;
transition: opacity 0.5s;
width: 100%;
will-change: transform;
z-index: 10;
}
.link-input {
background-color: var(--sn-stylekit-background-color);
border-radius: 15px;
border: 0;
box-sizing: border-box;
color: var(--sn-stylekit-contrast-color);
display: absolute;
font-family: inherit;
font-size: 15px;
margin: 8px 12px;
outline: 0;
padding: 8px 12px;
position: relative;
width: calc(100% - 24px);
}
.link-editor div.link-edit {
display: flex;
align-items: center;
background-size: 16px;
background-position: center;
background-repeat: no-repeat;
vertical-align: -0.25em;
position: absolute;
right: 12px;
top: 0;
bottom: 0;
cursor: pointer;
}
.link-editor .link-input a {
color: rgb(33, 111, 219);
text-decoration: none;
display: block;
white-space: nowrap;
overflow: hidden;
margin-right: 30px;
text-overflow: ellipsis;
}
.link-editor .link-input a:hover {
text-decoration: underline;
}
.link-editor .font-size-wrapper,
.link-editor .font-family-wrapper {
display: flex;
margin: 0 4px;
}
.link-editor select {
padding: 6px;
border: none;
background-color: rgba(0, 0, 0, 0.075);
border-radius: 4px;
}
.link-editor .button {
width: 20px;
height: 20px;
display: inline-block;
padding: 6px;
border-radius: 8px;
cursor: pointer;
margin: 0 2px;
}
.link-editor .button.hovered {
width: 20px;
height: 20px;
display: inline-block;
background-color: #eee;
}
.link-editor .button i,
.actions i {
background-size: contain;
display: inline-block;
height: 20px;
width: 20px;
vertical-align: -0.25em;
}