Mirrors/notesnook
1
0
Fork 0
mirror of https://github.com/streetwriters/notesnook.git synced 2026-02-24 12:12:54 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat: change collapsible headers UI

Browse Source
This commit is contained in:
thecodrr
2022-03-04 23:38:29 +05:00
parent 9e45aed44f
commit a5dd25e44b
3 changed files with 65 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/web/package.json
View File

@@ -12,7 +12,7 @@
"@notesnook/crypto": "^1.0.0",
"@notesnook/desktop": "file:desktop",
"@rebass/forms": "^4.0.6",
"@streetwriters/tinymce-plugins": "^1.5.11",
"@streetwriters/tinymce-plugins": "^1.5.12",
"@tinymce/tinymce-react": "^3.13.0",
"async-mutex": "^0.3.2",
"axios": "^0.21.4",

64
apps/web/src/components/editor/editor.css
View File

@@ -384,3 +384,67 @@ table thead {
.ephox-snooker-resizer-cols.ephox-snooker-resizer-bar:hover {
opacity: 0.2 !important;
}
/*
COLLAPSIBLE HEADERS
*/
.editorScroll h2::before,
.editorScroll h3::before,
.editorScroll h4::before,
.editorScroll h5::before,
.editorScroll h6::before {
transition: opacity 200ms ease-in;
opacity: 0;
cursor: row-resize;
margin-right: 7px;
margin-left: -30px;
content: "";
width: 24px;
height: 24px;
display: inline-block;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' role='presentation' style='stroke-width: 0px; stroke: rgb(59, 59, 59); width: 14px; height: 14px;'%3E%3Cpath d='M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z' style='fill: rgb(59, 59, 59);'%3E%3C/path%3E%3C/svg%3E")
no-repeat 50% 50%;
mask-size: cover;
background-color: var(--disabled);
border: none;
}
.editorScroll:hover h2::before,
.editorScroll:hover h3::before,
.editorScroll:hover h4::before,
.editorScroll:hover h5::before,
.editorScroll:hover h6::before {
opacity: 1;
}
.mce-content-body h2::before {
margin-bottom: -5px;
}
.mce-content-body h3::before {
margin-bottom: -6px;
}
.mce-content-body h4::before {
margin-bottom: -7px;
}
.mce-content-body h5::before {
margin-bottom: -6px;
width: 20px;
height: 20px;
}
.mce-content-body h6::before {
margin-bottom: -5px;
width: 18px;
height: 18px;
}
.mce-content-body .c::before {
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' role='presentation' style='stroke-width: 0px; stroke: rgb(59, 59, 59); width: 14px; height: 14px;'%3E%3Cpath d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58' style='fill: rgb(59, 59, 59);'%3E%3C/path%3E%3C/svg%3E")
no-repeat 50% 50%;
}
.h {
display: none;
}

1
apps/web/src/components/editor/tinymce.js
View File

@@ -1,7 +1,6 @@
import React, { useEffect } from "react";
import "./editor.css";
import "@streetwriters/tinymce-plugins/codeblock/styles.css";
import "@streetwriters/tinymce-plugins/collapsibleheaders/styles.css";
import "tinymce/tinymce";
// eslint-disable-next-line import/no-webpack-loader-syntax
import "file-loader?name=static/js/icons/default/icons.js&esModule=false!tinymce/icons/default/icons.min.js";