Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-07-27 10:02:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(mindmap): integrate node map stylesheet into component

Browse Source
This commit is contained in:
Elian Doran 2024-12-08 17:12:57 +02:00
parent fdcc69591b
commit 1648a40e57
No known key found for this signature in database
3 changed files with 116 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.vscode/settings.json vendored
View File

@ -21,4 +21,7 @@
"github-actions.workflows.pinned.workflows": [
".github/workflows/nightly.yml"
],
"[css]": {
"editor.defaultFormatter": "vscode.css-language-features"
},
}

3
src/public/app/services/library_loader.js
View File

@ -98,9 +98,6 @@ const MIND_ELIXIR = {
js: [
"node_modules/mind-elixir/dist/MindElixir.iife.js",
"node_modules/@mind-elixir/node-menu/dist/node-menu.umd.cjs"
],
css: [
"node_modules/@mind-elixir/node-menu/dist/style.css"
]
};

114
src/public/app/widgets/type_widgets/mind_map.js
View File

@ -16,7 +16,119 @@ const TPL = `
.note-detail-mind-map .mind-map-container {
height: 100%;
}
</style>
.mind-elixir .node-menu {
position: absolute;
right: 20px;
top: 20px;
background: #fff;
border-radius: 5px;
box-shadow: 0 1px 2px #0003;
width: 240px;
box-sizing: border-box;
padding: 0 15px 15px;
transition: .3s all
}
.mind-elixir .node-menu.close {
height: 30px;
width: 46px;
overflow: hidden
}
.mind-elixir .node-menu .button-container {
padding: 3px 0;
direction: rtl
}
.mind-elixir .node-menu #nm-tag {
margin-top: 20px
}
.mind-elixir .node-menu .nm-fontsize-container {
display: flex;
justify-content: space-around;
margin-bottom: 20px
}
.mind-elixir .node-menu .nm-fontsize-container div {
height: 36px;
width: 36px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 1px 2px #0003;
background-color: #fff;
color: tomato;
border-radius: 100%
}
.mind-elixir .node-menu .nm-fontcolor-container {
margin-bottom: 10px
}
.mind-elixir .node-menu input,
.mind-elixir .node-menu textarea {
background: #f7f9fa;
border: 1px solid #dce2e6;
border-radius: 3px;
padding: 5px;
margin: 10px 0;
width: 100%;
box-sizing: border-box
}
.mind-elixir .node-menu textarea {
resize: none
}
.mind-elixir .node-menu .split6 {
display: inline-block;
width: 16.66%;
margin-bottom: 5px
}
.mind-elixir .node-menu .palette {
border-radius: 100%;
width: 21px;
height: 21px;
border: 1px solid #edf1f2;
margin: auto
}
.mind-elixir .node-menu .nmenu-selected,
.mind-elixir .node-menu .palette:hover {
box-shadow: tomato 0 0 0 2px;
background-color: #c7e9fa
}
.mind-elixir .node-menu .size-selected {
background-color: tomato !important;
border-color: tomato;
fill: #fff;
color: #fff
}
.mind-elixir .node-menu .size-selected svg {
color: #fff
}
.mind-elixir .node-menu .bof {
text-align: center
}
.mind-elixir .node-menu .bof span {
display: inline-block;
font-size: 14px;
border-radius: 4px;
padding: 2px 5px
}
.mind-elixir .node-menu .bof .selected {
background-color: tomato;
color: #fff
}
</style>
</div>
`;