mirror of
https://github.com/anyproto/anytype-ts.git
synced 2025-06-08 05:57:02 +09:00
Feature/Widgets (#1501)
* patch * JS-1472: fix * JS-1480: sidebar z-index * JS-1484: fix crash * JS-1479: fix * fix space subscription * fix space subscription * JS-1467: markdown shortcuts sections * code block show lang * JS-1466: add tooltip captions * JS-1485: refactoring of edit icon in grid * JS-1492: new shortcuts * JS-1469: link paste * store header tooltips
This commit is contained in:
Razor
parent
d220cc3c81
commit
22d7c35356
GPG key ID:
4AEE18F83AFDEB23
223 changed files with 4830 additions and 2427 deletions
28
js-anytype.code-workspace
Normal file
28
js-anytype.code-workspace
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
{
|
||||
"folders": [
|
||||
{
|
||||
"path": "."
|
||||
}
|
||||
],
|
||||
"extensions": {
|
||||
"recommendations": [
|
||||
"esbenp.prettier-vscode",
|
||||
"aaron-bond.better-comments",
|
||||
"github.copilot",
|
||||
"eamodio.gitlens",
|
||||
"timonwong.shellcheck",
|
||||
"dbaeumer.vscode-eslint"
|
||||
]
|
||||
},
|
||||
"settings": {
|
||||
"prettier.enable": true,
|
||||
"editor.formatOnSave": false,
|
||||
"editor.codeActionsOnSave": {
|
||||
"source.fixAll": false,
|
||||
"source.organizeImports": false
|
||||
},
|
||||
"prettier.documentSelectors": ["**/*.svg"],
|
||||
"editor.defaultFormatter": "esbenp.prettier-vscode",
|
||||
"debug.inlineValues": "on",
|
||||
}
|
||||
}
|
||||
3
src/img/arrow/widget.svg
Normal file
3
src/img/arrow/widget.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="8" height="5" viewBox="0 0 8 5" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1 0.87793L4 3.87793L7 0.87793" stroke="#2c2b27" stroke-linecap="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 182 B |
3
src/img/icon/archive/checkbox0.svg
Normal file
3
src/img/icon/archive/checkbox0.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1.5 5.87793C1.5 3.94493 3.067 2.37793 5 2.37793H13C14.933 2.37793 16.5 3.94493 16.5 5.87793V13.8779C16.5 15.8109 14.933 17.3779 13 17.3779H5C3.067 17.3779 1.5 15.8109 1.5 13.8779V5.87793Z" stroke="#ACA996"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 321 B |
4
src/img/icon/archive/checkbox1.svg
Normal file
4
src/img/icon/archive/checkbox1.svg
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="1" y="0.999023" width="16" height="16" rx="4" fill="#2C2B27"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.6094 5.43533L8.09478 13.1558L4.46875 9.52974L5.52941 8.46907L7.90338 10.843L12.3888 4.56348L13.6094 5.43533Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 353 B |
3
src/img/icon/archive/controls/checkbox0.svg
Normal file
3
src/img/icon/archive/controls/checkbox0.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M14 3.49902H6C4.61929 3.49902 3.5 4.61831 3.5 5.99902V13.999C3.5 15.3797 4.61929 16.499 6 16.499H14C15.3807 16.499 16.5 15.3797 16.5 13.999V5.99902C16.5 4.61831 15.3807 3.49902 14 3.49902ZM6 1.99902C3.79086 1.99902 2 3.78988 2 5.99902V13.999C2 16.2082 3.79086 17.999 6 17.999H14C16.2091 17.999 18 16.2082 18 13.999V5.99902C18 3.78988 16.2091 1.99902 14 1.99902H6Z" fill="#ACA996"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 534 B |
4
src/img/icon/archive/controls/checkbox1.svg
Normal file
4
src/img/icon/archive/controls/checkbox1.svg
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.6104 6.43533L9.09576 14.1558L5.46973 10.5297L6.53039 9.46907L8.90435 11.843L13.3898 5.56348L14.6104 6.43533Z" fill="#ACA996"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M14 3.49902H6C4.61929 3.49902 3.5 4.61831 3.5 5.99902V13.999C3.5 15.3797 4.61929 16.499 6 16.499H14C15.3807 16.499 16.5 15.3797 16.5 13.999V5.99902C16.5 4.61831 15.3807 3.49902 14 3.49902ZM6 1.99902C3.79086 1.99902 2 3.78988 2 5.99902V13.999C2 16.2082 3.79086 17.999 6 17.999H14C16.2091 17.999 18 16.2082 18 13.999V5.99902C18 3.78988 16.2091 1.99902 14 1.99902H6Z" fill="#ACA996"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 714 B |
7
src/img/icon/archive/logo.svg
Normal file
7
src/img/icon/archive/logo.svg
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
<svg width="32" height="33" viewBox="0 0 32 33" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g opacity="0.9">
|
||||
<path d="M26.25 8.6748C26.25 9.50525 25.4892 10.5676 23.5321 11.4809C21.6561 12.3564 18.9942 12.9248 16 12.9248C13.0058 12.9248 10.3439 12.3564 8.46793 11.4809C6.51077 10.5676 5.75 9.50525 5.75 8.6748C5.75 7.84436 6.51077 6.78202 8.46793 5.86868C10.3439 4.99323 13.0058 4.4248 16 4.4248C18.9942 4.4248 21.6561 4.99323 23.5321 5.86868C25.4892 6.78202 26.25 7.84436 26.25 8.6748Z" stroke="#2C2B27" stroke-width="2"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.82546 9.28418H4.8252L8.50098 26.8779H23.501L27.1753 9.28496C26.5275 11.897 21.7714 13.9248 16.0005 13.9248C10.229 13.9248 5.47253 11.8966 4.82546 9.28418Z" fill="#2C2B27"/>
|
||||
<ellipse cx="16" cy="26.5811" rx="7.5" ry="3.75" fill="#2C2B27"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 832 B |
|
|
@ -1,19 +1,9 @@
|
|||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10.5 3.125C9.91421 3.125 9.4375 2.64829 9.4375 2.0625C9.4375 1.47671 9.91421 1 10.5 1C11.0858 1 11.5625 1.47671 11.5625 2.0625C11.5625 2.64829 11.0858 3.125 10.5 3.125Z" fill="#ACA996"/>
|
||||
<path d="M10.5 18C9.91421 18 9.4375 17.5233 9.4375 16.9375C9.4375 16.3517 9.91421 15.875 10.5 15.875C11.0858 15.875 11.5625 16.3517 11.5625 16.9375C11.5625 17.5233 11.0858 18 10.5 18Z" fill="#ACA996"/>
|
||||
<path d="M15.0078 4.99144C14.5935 4.57777 14.5921 3.90556 15.0078 3.48906C15.4073 3.08815 16.1086 3.08744 16.5102 3.48906C16.926 3.90486 16.926 4.57706 16.5102 4.99215C16.0944 5.40794 15.4229 5.40723 15.0078 4.99144Z" fill="#ACA996"/>
|
||||
<path d="M4.48982 15.5102C4.07403 15.0944 4.07403 14.4222 4.48982 14.0071C4.89074 13.6069 5.59199 13.6069 5.9922 14.0078C6.40657 14.4215 6.40799 15.0937 5.9922 15.5095C5.57711 15.926 4.90491 15.926 4.48982 15.5102Z" fill="#ACA996"/>
|
||||
<path d="M17.9375 10.5625C17.3517 10.5625 16.875 10.0858 16.875 9.5C16.875 8.91421 17.3517 8.4375 17.9375 8.4375C18.5233 8.4375 19 8.91421 19 9.5C19 10.0858 18.5233 10.5625 17.9375 10.5625Z" fill="#ACA996"/>
|
||||
<path d="M3.0625 10.5625C2.47671 10.5625 2 10.0858 2 9.5C2 8.91421 2.47671 8.4375 3.0625 8.4375C3.64829 8.4375 4.125 8.91421 4.125 9.5C4.125 10.0858 3.64829 10.5625 3.0625 10.5625Z" fill="#ACA996"/>
|
||||
<path d="M15.0078 15.5103C14.592 15.0945 14.5927 14.423 15.0085 14.0079C15.4073 13.6077 16.1092 13.607 16.5109 14.0079C16.9252 14.4216 16.9267 15.0945 16.5109 15.5103C16.0951 15.9261 15.4229 15.9261 15.0078 15.5103Z" fill="#ACA996"/>
|
||||
<path d="M4.48982 4.99225C4.07403 4.57716 4.07403 3.90496 4.48982 3.48916C4.89145 3.08825 5.59199 3.08825 5.99291 3.48916C6.40728 3.90425 6.4087 4.57646 5.99149 4.99225C5.57782 5.40733 4.90561 5.40804 4.48982 4.99225Z" fill="#ACA996"/>
|
||||
<path d="M10.5 5.427C10.2067 5.427 9.96875 5.189 9.96875 4.89575V2.77075C9.96875 2.4775 10.2067 2.2395 10.5 2.2395C10.7932 2.2395 11.0312 2.4775 11.0312 2.77075V4.89575C11.0312 5.189 10.7932 5.427 10.5 5.427Z" fill="#ACA996"/>
|
||||
<path d="M10.5 16.7605C10.2067 16.7605 9.96875 16.5225 9.96875 16.2292V14.1042C9.96875 13.811 10.2067 13.573 10.5 13.573C10.7932 13.573 11.0312 13.811 11.0312 14.1042V16.2292C11.0312 16.5225 10.7932 16.7605 10.5 16.7605Z" fill="#ACA996"/>
|
||||
<path d="M13.7556 6.77573C13.6196 6.77573 13.4836 6.72403 13.3801 6.6199C13.1726 6.41236 13.1726 6.0759 13.3801 5.86836L14.8825 4.36598C15.0901 4.15844 15.4265 4.15844 15.6341 4.36598C15.8416 4.57353 15.8416 4.90998 15.6341 5.11753L14.1317 6.6199C14.0276 6.72403 13.8916 6.77573 13.7556 6.77573Z" fill="#ACA996"/>
|
||||
<path d="M5.74201 14.789C5.60601 14.789 5.47001 14.7373 5.36659 14.6332C5.15905 14.4257 5.15905 14.0892 5.36659 13.8817L6.86897 12.3793C7.07651 12.1717 7.41297 12.1717 7.62051 12.3793C7.82805 12.5868 7.82805 12.9233 7.62051 13.1308L6.11814 14.6332C6.01401 14.7373 5.87801 14.789 5.74201 14.789Z" fill="#ACA996"/>
|
||||
<path d="M17.2292 10.0312H15.1042C14.811 10.0312 14.573 9.79325 14.573 9.5C14.573 9.20675 14.811 8.96875 15.1042 8.96875H17.2292C17.5225 8.96875 17.7605 9.20675 17.7605 9.5C17.7605 9.79325 17.5225 10.0312 17.2292 10.0312Z" fill="#ACA996"/>
|
||||
<path d="M5.89575 10.0312H3.77075C3.4775 10.0312 3.2395 9.79325 3.2395 9.5C3.2395 9.20675 3.4775 8.96875 3.77075 8.96875H5.89575C6.189 8.96875 6.427 9.20675 6.427 9.5C6.427 9.79325 6.189 10.0312 5.89575 10.0312Z" fill="#ACA996"/>
|
||||
<path d="M15.2579 14.789C15.1219 14.789 14.9859 14.7373 14.8825 14.6332L13.3801 13.1308C13.1726 12.9233 13.1726 12.5868 13.3801 12.3793C13.5877 12.1717 13.9241 12.1717 14.1317 12.3793L15.6341 13.8817C15.8416 14.0892 15.8416 14.4257 15.6341 14.6332C15.5299 14.7373 15.3939 14.789 15.2579 14.789Z" fill="#ACA996"/>
|
||||
<path d="M7.24448 6.77573C7.10848 6.77573 6.97248 6.72403 6.86907 6.6199L5.36598 5.11753C5.15844 4.90998 5.15844 4.57353 5.36598 4.36598C5.57353 4.15844 5.90998 4.15844 6.11753 4.36598L7.6199 5.86836C7.82744 6.0759 7.82744 6.41236 7.6199 6.6199C7.51648 6.72403 7.38048 6.77573 7.24448 6.77573Z" fill="#ACA996"/>
|
||||
<rect x="8.375" y="7.375" width="4.25" height="4.25" rx="2.125" fill="#ACA996"/>
|
||||
<svg width="16" height="18" viewBox="0 0 16 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="8" cy="9" r="2.5" fill="#ACA996"/>
|
||||
<circle cx="8" cy="15.5" r="2" fill="#ACA996"/>
|
||||
<circle cx="8" cy="2.5" r="2" fill="#ACA996"/>
|
||||
<circle cx="14" cy="12.5" r="2" fill="#ACA996"/>
|
||||
<circle cx="2" cy="5.5" r="2" fill="#ACA996"/>
|
||||
<circle cx="14" cy="5.5" r="2" fill="#ACA996"/>
|
||||
<circle cx="2" cy="12.5" r="2" fill="#ACA996"/>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 4 KiB After Width: | Height: | Size: 437 B |
5
src/img/icon/header/hamburger.svg
Normal file
5
src/img/icon/header/hamburger.svg
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
<svg width="17" height="14" viewBox="0 0 17 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="0.875" y="6.25" width="16" height="1.5" rx="0.75" fill="#ACA996"/>
|
||||
<rect x="0.875" y="0.25" width="16" height="1.5" rx="0.75" fill="#ACA996"/>
|
||||
<rect x="0.875" y="12.25" width="16" height="1.5" rx="0.75" fill="#ACA996"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 344 B |
|
|
@ -1,6 +0,0 @@
|
|||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M7 3.5H3C2.72386 3.5 2.5 3.72386 2.5 4V7C2.5 7.27614 2.72386 7.5 3 7.5H7C7.27614 7.5 7.5 7.27614 7.5 7V4C7.5 3.72386 7.27614 3.5 7 3.5ZM3 2C1.89543 2 1 2.89543 1 4V7C1 8.10457 1.89543 9 3 9H7C8.10457 9 9 8.10457 9 7V4C9 2.89543 8.10457 2 7 2H3Z" fill="#ACA996"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M7 12.5H3C2.72386 12.5 2.5 12.7239 2.5 13V16C2.5 16.2761 2.72386 16.5 3 16.5H7C7.27614 16.5 7.5 16.2761 7.5 16V13C7.5 12.7239 7.27614 12.5 7 12.5ZM3 11C1.89543 11 1 11.8954 1 13V16C1 17.1046 1.89543 18 3 18H7C8.10457 18 9 17.1046 9 16V13C9 11.8954 8.10457 11 7 11H3Z" fill="#ACA996"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M17 3.5H13C12.7239 3.5 12.5 3.72386 12.5 4V7C12.5 7.27614 12.7239 7.5 13 7.5H17C17.2761 7.5 17.5 7.27614 17.5 7V4C17.5 3.72386 17.2761 3.5 17 3.5ZM13 2C11.8954 2 11 2.89543 11 4V7C11 8.10457 11.8954 9 13 9H17C18.1046 9 19 8.10457 19 7V4C19 2.89543 18.1046 2 17 2H13Z" fill="#ACA996"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M17 12.5H13C12.7239 12.5 12.5 12.7239 12.5 13V16C12.5 16.2761 12.7239 16.5 13 16.5H17C17.2761 16.5 17.5 16.2761 17.5 16V13C17.5 12.7239 17.2761 12.5 17 12.5ZM13 11C11.8954 11 11 11.8954 11 13V16C11 17.1046 11.8954 18 13 18H17C18.1046 18 19 17.1046 19 16V13C19 11.8954 18.1046 11 17 11H13Z" fill="#ACA996"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.4 KiB |
4
src/img/icon/menu/action/removeWidget0.svg
Normal file
4
src/img/icon/menu/action/removeWidget0.svg
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="10" cy="10" r="7.25" stroke="#ACA996" stroke-width="1.5"/>
|
||||
<path d="M6.5 10H13.5" stroke="#ACA996" stroke-width="1.5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 258 B |
3
src/img/icon/menu/action/store0.svg
Normal file
3
src/img/icon/menu/action/store0.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M3 6C3 4.34315 4.34315 3 6 3C7.65685 3 9 4.34315 9 6C9 7.65685 7.65685 9 6 9C4.34315 9 3 7.65685 3 6ZM3 13C3 11.8954 3.89543 11 5 11H7C8.10457 11 9 11.8954 9 13V15C9 16.1046 8.10457 17 7 17H5C3.89543 17 3 16.1046 3 15V13ZM16.5 3.5H11.5V8.5H16.5V3.5ZM13.5 11.5C13.5 11.2239 13.7239 11 14 11C14.2761 11 14.5 11.2239 14.5 11.5V13.5H16.5C16.7761 13.5 17 13.7239 17 14C17 14.2761 16.7761 14.5 16.5 14.5H14.5V16.5C14.5 16.7761 14.2761 17 14 17C13.7239 17 13.5 16.7761 13.5 16.5V14.5H11.5C11.2239 14.5 11 14.2761 11 14C11 13.7239 11.2239 13.5 11.5 13.5H13.5V11.5Z" fill="#ACA996"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 727 B |
7
src/img/icon/menu/action/unlink0.svg
Normal file
7
src/img/icon/menu/action/unlink0.svg
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.5766 9.08457L12.8915 10.7697L13.8897 11.768L15.5749 10.0828C17.1822 8.47549 17.2189 5.90615 15.6568 4.34405C14.0947 2.78195 11.5254 2.81864 9.91801 4.42599L8.23289 6.11111L9.23115 7.10938L10.9163 5.42426C11.9563 4.38421 13.6188 4.36047 14.6296 5.37124C15.6404 6.38201 15.6166 8.04452 14.5766 9.08457ZM5.51453 10.826L7.10912 9.23141L6.11085 8.23314L4.51626 9.82774C2.85852 11.4855 2.78099 14.0957 4.34309 15.6578C5.90518 17.2199 8.51537 17.1423 10.1731 15.4846L11.7677 13.89L10.7694 12.8917L9.17484 14.4863C8.10219 15.559 6.41324 15.6091 5.40247 14.5984C4.39171 13.5876 4.44187 11.8987 5.51453 10.826Z" fill="#ACA996"/>
|
||||
<rect x="6.10938" y="2" width="1.5" height="3" fill="#ACA996"/>
|
||||
<rect x="2" y="7.76172" width="1.5" height="3" transform="rotate(-90 2 7.76172)" fill="#ACA996"/>
|
||||
<rect x="12.2402" y="15" width="1.5" height="3" fill="#ACA996"/>
|
||||
<rect x="15" y="13.8906" width="1.5" height="3" transform="rotate(-90 15 13.8906)" fill="#ACA996"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
|
|
@ -1,4 +1,4 @@
|
|||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="16" height="1.5" rx="0.75" transform="matrix(1 0 0 -1 2 10.75)" fill="#ACA996"/>
|
||||
<rect width="16" height="1.5" rx="0.75" transform="matrix(0 1 1 0 9.25 2)" fill="#ACA996"/>
|
||||
<rect width="16" height="1.5" rx="0.75" transform="matrix(1 0 0 -1 2 10.75)" fill="#ACA996"/>
|
||||
<rect width="16" height="1.5" rx="0.75" transform="matrix(0 1 1 0 9.25 2)" fill="#ACA996"/>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 289 B After Width: | Height: | Size: 297 B |
7
src/img/icon/sidebar/bin.svg
Normal file
7
src/img/icon/sidebar/bin.svg
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g opacity="0.9">
|
||||
<path d="M17 5.40918C17 6.06603 16.4097 6.81595 15.0919 7.43096C13.8146 8.02703 12.0149 8.40918 10 8.40918C7.98515 8.40918 6.18543 8.02703 4.90814 7.43096C3.59025 6.81595 3 6.06603 3 5.40918C3 4.75233 3.59025 4.00241 4.90814 3.3874C6.18543 2.79133 7.98515 2.40918 10 2.40918C12.0149 2.40918 13.8146 2.79133 15.0919 3.3874C16.4097 4.00241 17 4.75233 17 5.40918Z" stroke="#2C2B27"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M2.54998 5.81543H2.5498L4.9999 17.4521H14.9999L17.4499 5.81596C17.018 7.55732 13.8473 8.90918 10 8.90918C6.15231 8.90918 2.98136 7.55704 2.54998 5.81543Z" fill="#2C2B27"/>
|
||||
<ellipse cx="10" cy="17.3467" rx="5" ry="2.5" fill="#2C2B27"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 791 B |
|
|
@ -1,4 +1,5 @@
|
|||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16 4L10 10L16 16" stroke="#ACA996" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<path d="M9 4L3 10L9 16" stroke="#ACA996" stroke-width="1.5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<path d="M12 4L6 10L12 16" stroke="#ACA996" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<path d="M18 10H6" stroke="#ACA996" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M2 4V16" stroke="#ACA996" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 277 B After Width: | Height: | Size: 398 B |
7
src/img/icon/sidebar/library.svg
Normal file
7
src/img/icon/sidebar/library.svg
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="1" y="1.87793" width="8" height="8" rx="4" fill="#2C2B27"/>
|
||||
<rect x="1" y="11.8779" width="8" height="8" rx="2.5" fill="#2C2B27"/>
|
||||
<rect x="11.5" y="2.37793" width="7" height="7" fill="#2C2B27"/>
|
||||
<rect x="14.25" y="11.8779" width="1.5" height="8" rx="0.75" fill="#2C2B27"/>
|
||||
<rect x="11" y="15.1279" width="8" height="1.5" rx="0.75" fill="#2C2B27"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 461 B |
8
src/img/icon/sidebar/preview.svg
Normal file
8
src/img/icon/sidebar/preview.svg
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
<svg width="16" height="14" viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="1.5" cy="7" r="1.5" fill="#ACA996"/>
|
||||
<circle cx="1.5" cy="12" r="1.5" fill="#ACA996"/>
|
||||
<circle cx="1.5" cy="2" r="1.5" fill="#ACA996"/>
|
||||
<rect x="5" y="1.25" width="11" height="1.5" rx="0.75" fill="#ACA996"/>
|
||||
<rect x="5" y="6.25" width="11" height="1.5" rx="0.75" fill="#ACA996"/>
|
||||
<rect x="5" y="11.25" width="11" height="1.5" rx="0.75" fill="#ACA996"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 468 B |
3
src/img/icon/sidebar/remove.svg
Normal file
3
src/img/icon/sidebar/remove.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="12" height="2" viewBox="0 0 12 2" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1 1H11" stroke="#ACA996" stroke-width="1.5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 180 B |
11
src/img/icon/sidebar/toggle-sidebar.svg
Normal file
11
src/img/icon/sidebar/toggle-sidebar.svg
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_3822_12893)">
|
||||
<rect x="6" y="17.5" width="15" height="1.5" rx="0.75" transform="rotate(-90 6 17.5)" fill="#ACA996"/>
|
||||
<rect x="0.75" y="2.75" width="18.5" height="14.5" rx="1.75" stroke="#ACA996" stroke-width="1.5"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_3822_12893">
|
||||
<rect width="20" height="20" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 453 B |
|
|
@ -1,5 +1,5 @@
|
|||
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="0.5" y="0.5" width="27" height="27" rx="13.5" stroke="#DFDDD0"/>
|
||||
<rect x="0.5" y="0.5" width="27" height="27" rx="13.5" fill="#F3F2EC" stroke="#DFDDD0"/>
|
||||
<rect width="12" height="1.5" rx="0.75" transform="matrix(1 0 0 -1 8 14.75)" fill="#2c2b27"/>
|
||||
<rect width="12" height="1.5" rx="0.75" transform="matrix(0 1 1 0 13.25 8)" fill="#2c2b27"/>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 364 B After Width: | Height: | Size: 379 B |
3
src/img/icon/widget/back.svg
Normal file
3
src/img/icon/widget/back.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M13 4.87793L7 10.8779L13 16.8779" stroke="#2C2B27" stroke-width="1.5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 206 B |
3
src/img/icon/widget/collapse.svg
Normal file
3
src/img/icon/widget/collapse.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15 8L10 13L5 8" stroke="#ACA996" stroke-width="1.5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 189 B |
4
src/img/icon/widget/link.svg
Normal file
4
src/img/icon/widget/link.svg
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="0.5" y="12.4375" width="39" height="15" rx="3.5" stroke="#DFDDD0"/>
|
||||
<rect x="6" y="19.25" width="28" height="1.5" rx="0.75" fill="#ACA996"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 253 B |
19
src/img/icon/widget/list.svg
Normal file
19
src/img/icon/widget/list.svg
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_3043_3792)">
|
||||
<rect x="0.5" y="0.4375" width="39" height="39" rx="5.5" stroke="#DFDDD0"/>
|
||||
<rect x="17" y="7.25" width="17" height="1.5" rx="0.75" fill="#ACA996"/>
|
||||
<rect x="17" y="11.25" width="12" height="1.5" rx="0.75" fill="#ACA996"/>
|
||||
<rect x="6" y="6" width="8" height="8" rx="2" fill="#DFDDD0"/>
|
||||
<rect x="17" y="17.25" width="17" height="1.5" rx="0.75" fill="#ACA996"/>
|
||||
<rect x="17" y="21.25" width="12" height="1.5" rx="0.75" fill="#ACA996"/>
|
||||
<rect x="6" y="16" width="8" height="8" rx="2" fill="#DFDDD0"/>
|
||||
<rect x="17" y="27.25" width="17" height="1.5" rx="0.75" fill="#ACA996"/>
|
||||
<rect x="17" y="31.25" width="12" height="1.5" rx="0.75" fill="#ACA996"/>
|
||||
<rect x="6" y="26" width="8" height="8" rx="2" fill="#DFDDD0"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_3043_3792">
|
||||
<rect width="40" height="40" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 959 B |
5
src/img/icon/widget/options.svg
Normal file
5
src/img/icon/widget/options.svg
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10.0156 11.5C10.8441 11.5 11.5156 10.8284 11.5156 10C11.5156 9.17157 10.8441 8.5 10.0156 8.5C9.1872 8.5 8.51562 9.17157 8.51562 10C8.51562 10.8284 9.1872 11.5 10.0156 11.5Z" fill="#ACA996"/>
|
||||
<path d="M4.01562 11.5C4.84405 11.5 5.51562 10.8284 5.51562 10C5.51562 9.17157 4.84405 8.5 4.01562 8.5C3.1872 8.5 2.51562 9.17157 2.51562 10C2.51562 10.8284 3.1872 11.5 4.01562 11.5Z" fill="#ACA996"/>
|
||||
<path d="M16.0156 11.5C16.8441 11.5 17.5156 10.8284 17.5156 10C17.5156 9.17157 16.8441 8.5 16.0156 8.5C15.1872 8.5 14.5156 9.17157 14.5156 10C14.5156 10.8284 15.1872 11.5 16.0156 11.5Z" fill="#ACA996"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 708 B |
|
Before Width: | Height: | Size: 2.5 KiB After Width: | Height: | Size: 2.5 KiB |
22
src/img/icon/widget/tree.svg
Normal file
22
src/img/icon/widget/tree.svg
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_3043_3806)">
|
||||
<rect x="0.5" y="0.4375" width="39" height="39" rx="5.5" stroke="#DFDDD0"/>
|
||||
<rect x="10" y="6.25" width="24" height="1.5" rx="0.75" fill="#ACA996"/>
|
||||
<path d="M6 7C6 6.44772 6.44772 6 7 6C7.55228 6 8 6.44772 8 7C8 7.55228 7.55228 8 7 8C6.44772 8 6 7.55228 6 7Z" fill="#ACA996"/>
|
||||
<path d="M6 12C6 11.4477 6.44772 11 7 11C7.55228 11 8 11.4477 8 12C8 12.5523 7.55228 13 7 13C6.44772 13 6 12.5523 6 12Z" fill="#ACA996"/>
|
||||
<path d="M10 17C10 16.4477 10.4477 16 11 16C11.5523 16 12 16.4477 12 17C12 17.5523 11.5523 18 11 18C10.4477 18 10 17.5523 10 17Z" fill="#ACA996"/>
|
||||
<path d="M14 22C14 21.4477 14.4477 21 15 21C15.5523 21 16 21.4477 16 22C16 22.5523 15.5523 23 15 23C14.4477 23 14 22.5523 14 22Z" fill="#ACA996"/>
|
||||
<path d="M10 12C10 11.5858 10.3358 11.25 10.75 11.25H33.25C33.6642 11.25 34 11.5858 34 12C34 12.4142 33.6642 12.75 33.25 12.75H10.75C10.3358 12.75 10 12.4142 10 12Z" fill="#ACA996"/>
|
||||
<rect x="14" y="16.25" width="20" height="1.5" rx="0.75" fill="#ACA996"/>
|
||||
<rect x="18" y="21.25" width="16" height="1.5" rx="0.75" fill="#ACA996"/>
|
||||
<path d="M14 27C14 26.4477 14.4477 26 15 26C15.5523 26 16 26.4477 16 27C16 27.5523 15.5523 28 15 28C14.4477 28 14 27.5523 14 27Z" fill="#ACA996"/>
|
||||
<rect x="18" y="26.25" width="16" height="1.5" rx="0.75" fill="#ACA996"/>
|
||||
<path d="M6 32C6 31.4477 6.44772 31 7 31C7.55228 31 8 31.4477 8 32C8 32.5523 7.55228 33 7 33C6.44772 33 6 32.5523 6 32Z" fill="#ACA996"/>
|
||||
<rect x="10" y="31.25" width="24" height="1.5" rx="0.75" fill="#ACA996"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_3043_3806">
|
||||
<rect width="40" height="40" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
3
src/img/theme/dark/arrow/widget.svg
Normal file
3
src/img/theme/dark/arrow/widget.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="8" height="5" viewBox="0 0 8 5" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1 0.87793L4 3.87793L7 0.87793" stroke="#dfddd3" stroke-linecap="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 182 B |
7
src/img/theme/dark/icon/sidebar/bin.svg
Normal file
7
src/img/theme/dark/icon/sidebar/bin.svg
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g opacity="0.9">
|
||||
<path d="M17 5.40918C17 6.06603 16.4097 6.81595 15.0919 7.43096C13.8146 8.02703 12.0149 8.40918 10 8.40918C7.98515 8.40918 6.18543 8.02703 4.90814 7.43096C3.59025 6.81595 3 6.06603 3 5.40918C3 4.75233 3.59025 4.00241 4.90814 3.3874C6.18543 2.79133 7.98515 2.40918 10 2.40918C12.0149 2.40918 13.8146 2.79133 15.0919 3.3874C16.4097 4.00241 17 4.75233 17 5.40918Z" stroke="#dfddd3"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M2.54998 5.81543H2.5498L4.9999 17.4521H14.9999L17.4499 5.81596C17.018 7.55732 13.8473 8.90918 10 8.90918C6.15231 8.90918 2.98136 7.55704 2.54998 5.81543Z" fill="#dfddd3"/>
|
||||
<ellipse cx="10" cy="17.3467" rx="5" ry="2.5" fill="#dfddd3"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 791 B |
7
src/img/theme/dark/icon/sidebar/library.svg
Normal file
7
src/img/theme/dark/icon/sidebar/library.svg
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="1" y="1.87793" width="8" height="8" rx="4" fill="#dfddd3"/>
|
||||
<rect x="1" y="11.8779" width="8" height="8" rx="2.5" fill="#dfddd3"/>
|
||||
<rect x="11.5" y="2.37793" width="7" height="7" fill="#dfddd3"/>
|
||||
<rect x="14.25" y="11.8779" width="1.5" height="8" rx="0.75" fill="#dfddd3"/>
|
||||
<rect x="11" y="15.1279" width="8" height="1.5" rx="0.75" fill="#dfddd3"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 461 B |
3
src/img/theme/dark/icon/widget/back.svg
Normal file
3
src/img/theme/dark/icon/widget/back.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M13 4.87793L7 10.8779L13 16.8779" stroke="#dfddd3" stroke-width="1.5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 206 B |
3
src/img/theme/dark/icon/widget/collapse.svg
Normal file
3
src/img/theme/dark/icon/widget/collapse.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15 8L10 13L5 8" stroke="#dfddd3" stroke-width="1.5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 189 B |
4
src/img/theme/dark/icon/widget/link.svg
Normal file
4
src/img/theme/dark/icon/widget/link.svg
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="0.5" y="12.4375" width="39" height="15" rx="3.5" stroke="#525148"/>
|
||||
<rect x="6" y="19.25" width="28" height="1.5" rx="0.75" fill="#dfddd3"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 253 B |
19
src/img/theme/dark/icon/widget/list.svg
Normal file
19
src/img/theme/dark/icon/widget/list.svg
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_3043_3792)">
|
||||
<rect x="0.5" y="0.4375" width="39" height="39" rx="5.5" stroke="#525148"/>
|
||||
<rect x="17" y="7.25" width="17" height="1.5" rx="0.75" fill="#DFDDD0"/>
|
||||
<rect x="17" y="11.25" width="12" height="1.5" rx="0.75" fill="#DFDDD0"/>
|
||||
<rect x="6" y="6" width="8" height="8" rx="2" fill="#525148"/>
|
||||
<rect x="17" y="17.25" width="17" height="1.5" rx="0.75" fill="#DFDDD0"/>
|
||||
<rect x="17" y="21.25" width="12" height="1.5" rx="0.75" fill="#DFDDD0"/>
|
||||
<rect x="6" y="16" width="8" height="8" rx="2" fill="#525148"/>
|
||||
<rect x="17" y="27.25" width="17" height="1.5" rx="0.75" fill="#DFDDD0"/>
|
||||
<rect x="17" y="31.25" width="12" height="1.5" rx="0.75" fill="#DFDDD0"/>
|
||||
<rect x="6" y="26" width="8" height="8" rx="2" fill="#525148"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_3043_3792">
|
||||
<rect width="40" height="40" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 959 B |
5
src/img/theme/dark/icon/widget/options.svg
Normal file
5
src/img/theme/dark/icon/widget/options.svg
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10.0156 11.5C10.8441 11.5 11.5156 10.8284 11.5156 10C11.5156 9.17157 10.8441 8.5 10.0156 8.5C9.1872 8.5 8.51562 9.17157 8.51562 10C8.51562 10.8284 9.1872 11.5 10.0156 11.5Z" fill="#dfddd3"/>
|
||||
<path d="M4.01562 11.5C4.84405 11.5 5.51562 10.8284 5.51562 10C5.51562 9.17157 4.84405 8.5 4.01562 8.5C3.1872 8.5 2.51562 9.17157 2.51562 10C2.51562 10.8284 3.1872 11.5 4.01562 11.5Z" fill="#dfddd3"/>
|
||||
<path d="M16.0156 11.5C16.8441 11.5 17.5156 10.8284 17.5156 10C17.5156 9.17157 16.8441 8.5 16.0156 8.5C15.1872 8.5 14.5156 9.17157 14.5156 10C14.5156 10.8284 15.1872 11.5 16.0156 11.5Z" fill="#dfddd3"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 708 B |
22
src/img/theme/dark/icon/widget/tree.svg
Normal file
22
src/img/theme/dark/icon/widget/tree.svg
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_3043_3806)">
|
||||
<rect x="0.5" y="0.4375" width="39" height="39" rx="5.5" stroke="#525148"/>
|
||||
<rect x="10" y="6.25" width="24" height="1.5" rx="0.75" fill="#DFDDD0"/>
|
||||
<path d="M6 7C6 6.44772 6.44772 6 7 6C7.55228 6 8 6.44772 8 7C8 7.55228 7.55228 8 7 8C6.44772 8 6 7.55228 6 7Z" fill="#DFDDD0"/>
|
||||
<path d="M6 12C6 11.4477 6.44772 11 7 11C7.55228 11 8 11.4477 8 12C8 12.5523 7.55228 13 7 13C6.44772 13 6 12.5523 6 12Z" fill="#DFDDD0"/>
|
||||
<path d="M10 17C10 16.4477 10.4477 16 11 16C11.5523 16 12 16.4477 12 17C12 17.5523 11.5523 18 11 18C10.4477 18 10 17.5523 10 17Z" fill="#DFDDD0"/>
|
||||
<path d="M14 22C14 21.4477 14.4477 21 15 21C15.5523 21 16 21.4477 16 22C16 22.5523 15.5523 23 15 23C14.4477 23 14 22.5523 14 22Z" fill="#DFDDD0"/>
|
||||
<path d="M10 12C10 11.5858 10.3358 11.25 10.75 11.25H33.25C33.6642 11.25 34 11.5858 34 12C34 12.4142 33.6642 12.75 33.25 12.75H10.75C10.3358 12.75 10 12.4142 10 12Z" fill="#DFDDD0"/>
|
||||
<rect x="14" y="16.25" width="20" height="1.5" rx="0.75" fill="#DFDDD0"/>
|
||||
<rect x="18" y="21.25" width="16" height="1.5" rx="0.75" fill="#DFDDD0"/>
|
||||
<path d="M14 27C14 26.4477 14.4477 26 15 26C15.5523 26 16 26.4477 16 27C16 27.5523 15.5523 28 15 28C14.4477 28 14 27.5523 14 27Z" fill="#DFDDD0"/>
|
||||
<rect x="18" y="26.25" width="16" height="1.5" rx="0.75" fill="#DFDDD0"/>
|
||||
<path d="M6 32C6 31.4477 6.44772 31 7 31C7.55228 31 8 31.4477 8 32C8 32.5523 7.55228 33 7 33C6.44772 33 6 32.5523 6 32Z" fill="#DFDDD0"/>
|
||||
<rect x="10" y="31.25" width="24" height="1.5" rx="0.75" fill="#DFDDD0"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_3043_3806">
|
||||
<rect width="40" height="40" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
|
|
@ -13,7 +13,13 @@
|
|||
},
|
||||
|
||||
"coverCnt": 13,
|
||||
"limitMenuRecords": 100,
|
||||
"limit": {
|
||||
"menuRecords": 100,
|
||||
"widgetRecords": {
|
||||
"tree": 20,
|
||||
"list": 4
|
||||
}
|
||||
},
|
||||
|
||||
"default": {
|
||||
"lang": "en",
|
||||
|
|
@ -57,7 +63,8 @@
|
|||
"viewEdit": [ "select" ],
|
||||
"featuredType": [ "searchObject", "typeSuggest" ],
|
||||
"dataviewHead": [ "dataviewSource", "searchObject" ],
|
||||
"store": [ "typeSuggest", "relationSuggest" ]
|
||||
"store": [ "typeSuggest", "relationSuggest" ],
|
||||
"widget": [ "searchObject", "select" ]
|
||||
},
|
||||
|
||||
"popupPinIds": [ "search" ],
|
||||
|
|
@ -128,7 +135,7 @@
|
|||
],
|
||||
|
||||
"sidebarRelationKeys": [
|
||||
"id", "name", "snippet", "layout", "type", "iconEmoji", "iconImage", "isReadonly", "isHidden", "isDeleted", "isArchived", "isFavorite", "done",
|
||||
"id", "name", "description", "snippet", "layout", "type", "iconEmoji", "iconImage", "isReadonly", "isHidden", "isDeleted", "isArchived", "isFavorite", "done",
|
||||
"relationFormat", "fileExt", "fileMimeType", "links", "restrictions"
|
||||
],
|
||||
|
||||
|
|
@ -147,12 +154,14 @@
|
|||
"search": "search",
|
||||
"profile": "profile",
|
||||
"deleted": "deleted",
|
||||
"sidebar": "sidebar",
|
||||
"type": "type",
|
||||
"relation": "relation",
|
||||
"option": "option",
|
||||
"store": "store",
|
||||
"graph": "graph"
|
||||
"archive": "archive",
|
||||
"sidebar": "sidebar",
|
||||
"graph": "graph",
|
||||
"space": "space"
|
||||
},
|
||||
|
||||
"typeId": {
|
||||
|
|
@ -190,10 +199,16 @@
|
|||
"header": "header"
|
||||
},
|
||||
|
||||
"widgetId": {
|
||||
"favorite": "favorite",
|
||||
"recent": "recent",
|
||||
"set": "set"
|
||||
},
|
||||
|
||||
"size": {
|
||||
"editor": 704,
|
||||
"blockMenu": 48,
|
||||
"image": 2048,
|
||||
"image": 1920,
|
||||
"headerWindows": 30,
|
||||
"iconPage": 256,
|
||||
|
||||
|
|
@ -202,7 +217,7 @@
|
|||
|
||||
"sidebar": {
|
||||
"height": { "min": 400 },
|
||||
"width": { "min": 180, "max": 500, "default": 240 }
|
||||
"width": { "min": 240, "max": 500, "default": 240 }
|
||||
},
|
||||
|
||||
"table": {
|
||||
|
|
|
|||
|
|
@ -242,9 +242,10 @@
|
|||
"blockBookmarkError": { "en": "There was an error fetching the url" },
|
||||
|
||||
"popupSettingsTitle": { "en": "Settings" },
|
||||
"popupSettingsAccountTitle": { "en": "Account & data" },
|
||||
"popupSettingsAccountTitle": { "en": "Account & data" },
|
||||
"popupSettingsAccountDeleteTitle": { "en": "Delete account" },
|
||||
"popupSettingsAccountMoveTitle": { "en": "Account data location" },
|
||||
"popupSettingsSpaceTitle": { "en": "Space" },
|
||||
"popupSettingsPersonalTitle": { "en": "Personalization" },
|
||||
"popupSettingsAppearanceTitle": { "en": "Appearance" },
|
||||
"popupSettingsWallpaperTitle": { "en": "Wallpaper" },
|
||||
|
|
@ -462,6 +463,7 @@
|
|||
|
||||
"defaultNamePage": { "en": "Untitled" },
|
||||
"defaultNameSet": { "en": "New set" },
|
||||
"defaultNameSpace": { "en": "Untitled space" },
|
||||
"defaultNameType": { "en": "New type" },
|
||||
"defaultNameRelation": { "en": "New relation" },
|
||||
"defaultNameBookmark": { "en": "Paste link" },
|
||||
|
|
@ -503,5 +505,17 @@
|
|||
"surveyObjectTitle": { "en": "Tell us how it's going!" },
|
||||
"surveyObjectText": { "en": "Hi there, we hope you're enjoying your experience with Anytype! Would you take 5 minutes to help us improve our product?" },
|
||||
"surveyObjectConfirm": { "en": "Sure, let's go" },
|
||||
"surveyObjectCancel": { "en": "No thanks" }
|
||||
"surveyObjectCancel": { "en": "No thanks" },
|
||||
|
||||
"widget0Name": { "en": "Link" },
|
||||
"widget0Description": { "en": "Сompact version of the object" },
|
||||
"widget1Name": { "en": "Tree" },
|
||||
"widget1Description": { "en": "Hierarchical structure of objects" },
|
||||
"widget2Name": { "en": "List" },
|
||||
"widget2Description": { "en": "Widget with list view of set object" },
|
||||
|
||||
"widgetFavorite": { "en": "Favorites" },
|
||||
"widgetRecent": { "en": "Recent" },
|
||||
"widgetSet": { "en": "Sets" }
|
||||
|
||||
}
|
||||
|
|
@ -75,8 +75,6 @@
|
|||
.card { display: none; }
|
||||
}
|
||||
|
||||
.column > .ghost { margin-top: 42px; width: 240px; flex-shrink: 0; }
|
||||
|
||||
.card { width: 224px; display: flex; flex-direction: column; margin: 0px auto 8px auto; position: relative; z-index: 1; }
|
||||
.card {
|
||||
.cellContent.isName {
|
||||
|
|
|
|||
|
|
@ -67,8 +67,8 @@
|
|||
.row:hover {
|
||||
.cellContent.isName.canEdit {
|
||||
.name { width: calc(100% - 40px) !important; }
|
||||
.icon.edit { display: block; }
|
||||
}
|
||||
.icon.edit { display: block; }
|
||||
}
|
||||
|
||||
.row > .selectable { display: grid; }
|
||||
|
|
|
|||
|
|
@ -79,7 +79,7 @@
|
|||
.icon { opacity: 0 !important; }
|
||||
}
|
||||
|
||||
.loaderWrapper { width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; }
|
||||
.loaderWrapper { width: 100%; height: 48px; position: relative; left: 0px; top: 0px; }
|
||||
|
||||
.react-pdf__Document { width: 100%; display: inline-block; position: relative; flex-grow: 1; cursor: pointer; }
|
||||
.react-pdf__Page { position: static !important; }
|
||||
|
|
|
|||
|
|
@ -184,8 +184,7 @@
|
|||
.additional .buttons { opacity: 1; }
|
||||
}
|
||||
.block.blockText.textCode.isReadonly > .wrapContent > .selectable > .dropTarget > .flex {
|
||||
#value { white-space: pre !important; }
|
||||
.additional { display: none; }
|
||||
.additional .buttons { display: none; }
|
||||
}
|
||||
.block.blockText.textCode.isUnwrapped > .wrapContent > .selectable > .dropTarget #value { white-space: nowrap; overflow-x: auto; }
|
||||
|
||||
|
|
|
|||
|
|
@ -152,7 +152,7 @@ search.active { background: orange !important; }
|
|||
.block.isSelectionSelected > .wrapContent > .selectable::after
|
||||
{
|
||||
display: block; position: absolute; left: -2px; top: 0px; width: calc(100% + 4px); height: 100%; background-color: rgba(42, 167, 238, 0.15);
|
||||
pointer-events: none; z-index: 10; content: ""; border-radius: 2px;
|
||||
pointer-events: none; z-index: 10; content: "";
|
||||
}
|
||||
|
||||
.textColor-default { color: $colorBlack !important; }
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
background-size: 20px 20px;
|
||||
}
|
||||
|
||||
#button-expand { position: absolute; left: 14px; bottom: 14px; background-image: url('~img/icon/footer/expand.svg'); }
|
||||
#button-add { position: absolute; left: 14px; bottom: 14px; background-image: url('~img/icon/sidebar/add.svg'); }
|
||||
#button-help { position: absolute; right: 14px; bottom: 14px; }
|
||||
#button-manager { position: absolute; right: 14px; bottom: 14px; background-image: url('~img/icon/dataview/button/settings.svg'); }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -33,11 +33,11 @@
|
|||
.icon { -webkit-app-region: no-drag; flex-shrink: 0; }
|
||||
|
||||
.icon.big { width: 28px; height: 28px; background-size: 20px; border-radius: 6px; cursor: pointer; }
|
||||
.icon.big.home, .icon.big.expand { width: 32px; margin-right: 10px; }
|
||||
.icon.big.expand, .icon.big.toggleSidebar { width: 32px; margin-right: 10px; }
|
||||
.icon.big.nav, .icon.big.graph { width: 32px; margin-left: 10px; }
|
||||
.icon.big:hover, .icon.big.hover { background-color: $colorVeryLightGrey; }
|
||||
|
||||
.icon.home { background-image: url('~img/icon/header/home.svg'); }
|
||||
.icon.toggleSidebar { background-image: url('~img/icon/sidebar/toggle-sidebar.svg'); }
|
||||
.icon.back { background-image: url('~img/icon/header/back.svg'); }
|
||||
.icon.forward { background-image: url('~img/icon/header/back.svg'); }
|
||||
.icon.nav { background-image: url('~img/icon/header/nav.svg'); }
|
||||
|
|
@ -47,7 +47,6 @@
|
|||
.icon.settings { background-image: url('~img/icon/header/settings.svg'); }
|
||||
.icon.expand { display: none; background-image: url('~img/icon/header/expand.svg'); }
|
||||
.icon.graph { background-image: url('~img/icon/header/graph.svg'); }
|
||||
|
||||
.icon.lock { width: 8px; height: 20px; background-image: url('~img/icon/lock.svg'); flex-shrink: 0; }
|
||||
}
|
||||
|
||||
|
|
@ -92,6 +91,10 @@
|
|||
}
|
||||
.header.mainHistory.snapLeft { right: 254px; }
|
||||
|
||||
.header.mainEdit {
|
||||
.icon.nav { display: none; }
|
||||
}
|
||||
|
||||
.header.isCommon { background: $colorWhite; height: 38px; }
|
||||
.header.isCommon {
|
||||
.path { border: 1px solid rgba(0,0,0,0); padding: 0px 10px; }
|
||||
|
|
@ -122,12 +125,16 @@
|
|||
.icon.settings { background-image: url('~img/icon/dataview/button/settings.svg'); }
|
||||
}
|
||||
|
||||
.header.withSidebar {
|
||||
.icon.toggleSidebar { display: none; }
|
||||
}
|
||||
|
||||
.popup {
|
||||
.header { position: sticky; padding: 0px; border-radius: 12px 12px 0px 0px; top: 0px !important; }
|
||||
.header {
|
||||
.side.left { padding-left: 14px !important; }
|
||||
.side.left {
|
||||
.icon.home { display: none; }
|
||||
.icon.sidebar { display: none; }
|
||||
.icon.expand { display: inline-block; }
|
||||
}
|
||||
}
|
||||
|
|
|
|||
34
src/scss/component/list/widget.scss
Normal file
34
src/scss/component/list/widget.scss
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
@import "~scss/_vars";
|
||||
|
||||
.listWidget { overflow: hidden; overflow-y: scroll; padding: 0px 12px 10px 12px; gap: 12px 0px; height: 100%; }
|
||||
.listWidget {
|
||||
> .buttons { display: flex; justify-content: center; width: 100%; gap: 0px 8px; }
|
||||
> .buttons {
|
||||
.button {
|
||||
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.2); border-radius: 8px; width: 100%; min-width: 60px; max-width: 200px; background-color: $colorWhite;
|
||||
color: $colorDarkGrey; cursor: pointer; font-weight: 400;
|
||||
}
|
||||
.button:hover { background-color: $colorVeryLightGrey; }
|
||||
|
||||
.button.disabled { background: $colorVeryLightGrey; max-width: 80px; }
|
||||
.button.edit {
|
||||
box-shadow: 0px 0px; background: $colorHover; border-radius: 6px; @include text-common; color: $colorBlack; line-height: 26px; width: auto;
|
||||
padding: 0px 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.listWidget.isEditing {
|
||||
> .buttons { position: fixed; bottom: 0px; left: 0px; padding: 16px; }
|
||||
|
||||
.widget {
|
||||
.head { cursor: grab; }
|
||||
.icon.remove { display: block; }
|
||||
}
|
||||
|
||||
.widget.isOver::before { content: ""; position: absolute; background: $colorOrange; height: 4px; width: 100%; border-radius: 2px; left: 0px; }
|
||||
.widget.isOver.top::before { top: -8px; }
|
||||
.widget.isOver.bottom::before { bottom: -8px; }
|
||||
}
|
||||
|
||||
.listWidget.isListPreview { overflow: hidden; }
|
||||
|
|
@ -1,10 +1,10 @@
|
|||
@import "~scss/_vars";
|
||||
|
||||
.preview {
|
||||
.previewWrapper {
|
||||
position: absolute; left: 0px; top: 0px; width: 344px; z-index: 1000; display: none; opacity: 0;
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
}
|
||||
.preview {
|
||||
.previewWrapper {
|
||||
.content { background: $colorWhite; box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.2); border-radius: 8px; position: relative; height: 100%; overflow: hidden; }
|
||||
.loaderWrapper { height: 24px !important; margin: 16px auto; border: 0px !important; }
|
||||
.polygon { position: absolute; left: 0px; width: 100%; cursor: pointer; }
|
||||
|
|
@ -26,11 +26,11 @@
|
|||
}
|
||||
}
|
||||
|
||||
.preview {
|
||||
.previewWrapper {
|
||||
.head { border-top: 1px solid $colorBorderLight; bottom: 0px; padding-bottom: 11px; }
|
||||
.img { border-radius: 8px 8px 0px 0px; border-top: 0px; }
|
||||
}
|
||||
|
||||
.preview.withHead {
|
||||
.previewWrapper.withHead {
|
||||
.content { padding-bottom: 44px; }
|
||||
}
|
||||
|
|
@ -21,4 +21,9 @@
|
|||
.name { width: 100%; @include text-overflow-nw; }
|
||||
}
|
||||
.item::before { display: none; }
|
||||
}
|
||||
|
||||
.select.isReadonly { cursor: default; }
|
||||
.select.isReadonly {
|
||||
.icon.arrow { display: none; }
|
||||
}
|
||||
|
|
@ -4,5 +4,5 @@
|
|||
#selection * { user-select: none; }
|
||||
#selection-rect {
|
||||
position: absolute; left: 0px; top: 0px; width: 0px; height: 0px; display: none; z-index: 102; background: rgba(42, 167, 238, 0.15);
|
||||
border: 0.05em solid #2aa7ee; pointer-events: none; border-radius: 4px;
|
||||
border: 0.05em solid #2aa7ee; pointer-events: none;
|
||||
}
|
||||
|
|
@ -3,142 +3,62 @@
|
|||
.pageFlex { display: flex; flex-direction: row; justify-content: space-between; width: 100% !important; }
|
||||
.pageFlex {
|
||||
.sidebarDummy { flex-shrink: 0; }
|
||||
#page { width: 100%; position: relative; }
|
||||
#page { width: 100%; position: relative; }
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
position: fixed; background-color: #fff; z-index: 21; border-radius: 12px; box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.2);
|
||||
display: flex; flex-direction: column; user-select: none; transition: none;
|
||||
.sidebar {
|
||||
position: fixed; background-color: $colorVeryLightGrey; z-index: 30; border-radius: 12px; box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.2); display: flex;
|
||||
flex-direction: column; user-select: none; transition: none;
|
||||
}
|
||||
.sidebar.left { left: 0px; transform: translate3d(-110%,0px,0px); }
|
||||
.sidebar.right { right: 0px; transform: translate3d(110%,0px,0px); }
|
||||
.sidebar.fixed {
|
||||
height: 100% !important; top: 0px !important; border-radius: 0px; box-shadow: 0px 0px rgba(0, 0, 0, 0); border-right: 1px solid $colorBorderLight;
|
||||
transform: translate3d(0px,0px,0px);
|
||||
.sidebar.left { left: 0px; transform: translate3d(-110%, 0px, 0px); }
|
||||
.sidebar.right { right: 0px; transform: translate3d(110%, 0px, 0px); }
|
||||
.sidebar.fixed {
|
||||
height: 100% !important; top: 0px !important; border-radius: 0px; box-shadow: 0px 0px rgba(0, 0, 0, 0); border-right: 1px solid $colorBorderLight;
|
||||
transform: translate3d(0px, 0px, 0px);
|
||||
}
|
||||
.sidebar.anim {
|
||||
transition-property: left, top, box-shadow, transform;
|
||||
transition-duration: 0.3s;
|
||||
transition-timing-function: ease-in-out;
|
||||
}
|
||||
.sidebar.active { transform: translate3d(0px,0px,0px); }
|
||||
.sidebar.anim { transition-property: left, top, box-shadow, transform; transition-duration: 0.2s; transition-timing-function: ease-in-out; }
|
||||
.sidebar.active { transform: translate3d(0px, 0px, 0px); }
|
||||
|
||||
.sidebar.right {
|
||||
.resize-h { right: auto; left: -5px; }
|
||||
|
||||
.foot {
|
||||
.resize-h { right: auto; left: -5px; }
|
||||
.sidebarHeader {
|
||||
.icon.collapse { transform: rotateZ(180deg); }
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar.fixed.right { border-left: 1px solid $colorBorderLight; border-right: 0px; }
|
||||
.sidebar.fixed {
|
||||
.resize-v { display: none; }
|
||||
.resize-v { display: none; }
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
.resize-h { width: 10px; height: 100%; position: absolute; top: 0px; right: -5px; cursor: col-resize; }
|
||||
.resize-v { height: 10px; width: 100%; position: absolute; bottom: -5px; left: 0px; cursor: row-resize; }
|
||||
.resize-h { width: 10px; height: 100%; position: absolute; top: 0px; right: -5px; cursor: col-resize; }
|
||||
.resize-v { height: 10px; width: 100%; position: absolute; bottom: -5px; left: 0px; cursor: row-resize; }
|
||||
|
||||
.loaderWrapper { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; }
|
||||
.loaderWrapper { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; }
|
||||
|
||||
.head { position: relative; flex-shrink: 0; -webkit-app-region: no-drag; cursor: grab; }
|
||||
.head {
|
||||
.icon.expand {
|
||||
width: 44px; height: 32px; background-size: 20px 20px; background-image: url('~img/icon/header/expand.svg');
|
||||
background-color: $colorHover; border-radius: 0px 12px 0px 12px; position: absolute; right: 0px; top: 0px;
|
||||
cursor: pointer; z-index: 1;
|
||||
}
|
||||
> .top { display: flex; flex-direction: row-reverse; }
|
||||
> .head { position: relative; flex-shrink: 0; flex-grow: 1; -webkit-app-region: no-drag; cursor: grab; }
|
||||
|
||||
.icon.close {
|
||||
width: 28px; height: 28px; position: absolute; right: 12px; top: 16px;
|
||||
background-image: url('~img/icon/graph/close.svg'); background-size: 20px 20px; border-radius: 6px;
|
||||
}
|
||||
.icon.close:hover { background-color: $colorVeryLightGrey; }
|
||||
}
|
||||
|
||||
.foot { display: flex; flex-direction: row; align-items: center; }
|
||||
.foot {
|
||||
.icon {
|
||||
height: 52px; flex-basis: 20%; flex-grow: 1; display: flex; align-items: center; justify-content: center; cursor: pointer;
|
||||
flex-direction: row; background-size: 20px; cursor: pointer;
|
||||
.sidebarHeader { display: flex; flex-direction: row; align-items: center; padding: 0px 12px; }
|
||||
.sidebarHeader {
|
||||
.icon {
|
||||
width: 32px; height: 28px; flex-basis: 20%; flex-grow: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-direction: row;
|
||||
background-size: 20px; cursor: pointer; border-radius: 6px;
|
||||
}
|
||||
.icon:hover { background-color: $colorHover; }
|
||||
|
||||
.iconObject { height: 52px; }
|
||||
|
||||
.icon.store { background-image: url('~img/icon/sidebar/store.svg'); }
|
||||
.icon.add { background-image: url('~img/icon/sidebar/add.svg'); }
|
||||
.icon.settings { background-image: url('~img/icon/sidebar/settings.svg'); }
|
||||
.icon.collapse { display: none; background-image: url('~img/icon/sidebar/collapse.svg'); }
|
||||
}
|
||||
|
||||
.body { overflow: hidden; height: 100%; position: relative; flex-grow: 1; }
|
||||
.body {
|
||||
.ReactVirtualized__List { overflow: overlay !important; padding: 0px 0px 10px 0px; }
|
||||
|
||||
.icon { width: 20px; height: 20px; flex-shrink: 0; flex-basis: 20px; transition: none; }
|
||||
|
||||
.icon.set { background-image: url('~img/icon/sidebar/set.svg'); }
|
||||
.icon.blank { background-image: url('~img/icon/sidebar/blank.svg'); }
|
||||
.icon.arrow {
|
||||
background-image: url('~img/arrow/select/dark.svg'); transform: rotate(-90deg); cursor: pointer;
|
||||
}
|
||||
|
||||
.item { position: relative; }
|
||||
.item {
|
||||
.inner {
|
||||
display: flex; flex-direction: row; gap: 0px 2px; align-items: center; justify-content: space-between;
|
||||
cursor: pointer; position: relative; padding: 2px 14px 2px 10px;
|
||||
}
|
||||
.inner::before {
|
||||
content: ""; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background: rgba(172, 169, 150, 0); z-index: 1;
|
||||
pointer-events: none; border-radius: inherit; transition: $transitionFast;
|
||||
}
|
||||
.inner:hover::before, .inner.hover::before { background: $colorHover; }
|
||||
|
||||
.iconObject { flex-shrink: 0; flex-basis: 20px; }
|
||||
.clickable {
|
||||
flex-grow: 1; display: flex; flex-direction: row; gap: 0px 6px; width: calc(100% - 24px); align-items: center;
|
||||
justify-content: space-between; cursor: pointer;
|
||||
}
|
||||
.name { flex-grow: 1; @include text-overflow-nw; }
|
||||
}
|
||||
.item.hover .inner::before { background: $colorHover; }
|
||||
|
||||
.item.active .icon.arrow { transform: rotate(0deg); }
|
||||
|
||||
.item.isSection { padding-bottom: 2px; }
|
||||
.item.isSection.withPadding { padding-top: 8px; }
|
||||
.item.isSection {
|
||||
.icon.arrow { background-image: url('~img/arrow/sidebar.svg'); }
|
||||
.name { @include text-paragraph; @include text-overflow-nw; font-weight: 600; flex-grow: 1; }
|
||||
.cnt { flex-shrink: 0; text-align: right; @include text-small; flex-basis: 20px; }
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar.fixed {
|
||||
.foot {
|
||||
.icon.collapse { display: flex; }
|
||||
.icon:hover { background-color: $colorHover; }
|
||||
.icon.toggleSidebar { background-image: url('~img/icon/sidebar/toggle-sidebar.svg'); }
|
||||
}
|
||||
|
||||
> .body { height: calc(100% - 52px); position: relative; flex-grow: 1; }
|
||||
}
|
||||
|
||||
html.bodyMainIndex {
|
||||
#sidebar { display: none; }
|
||||
}
|
||||
|
||||
html.platformMac {
|
||||
body.isFullScreen {
|
||||
.sidebar {
|
||||
.head { height: 12px !important; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
html.platformWindows {
|
||||
.sidebar {
|
||||
.head { -webkit-app-region: drag; }
|
||||
> .head { -webkit-app-region: drag; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -3,9 +3,12 @@
|
|||
#tooltip { position: fixed; left: 0px; top: 0px; z-index: 1000; pointer-events: none; }
|
||||
|
||||
.tooltip {
|
||||
position: absolute; border-radius: 4px; background: $colorVeryDarkGrey; padding: 3px 7px; text-transform: none;
|
||||
position: absolute; border-radius: 4px; background: #373632; padding: 3px 7px; text-transform: none;
|
||||
@include text-small; color: $colorWhite; white-space: nowrap; transform: scale3d(0.5, 0.5, 1); opacity: 0;
|
||||
}
|
||||
.tooltip.anim { transition-duration: 0.2s; transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); transition-property: opacity, transform; }
|
||||
.tooltip.show { transform: scale3d(1, 1, 1); opacity: 1; }
|
||||
.tooltip .txt { line-height: 1; margin-top: -1px; }
|
||||
.tooltip {
|
||||
.txt { line-height: 1; margin-top: -1px; }
|
||||
.caption { color: $colorDarkGrey; }
|
||||
}
|
||||
86
src/scss/component/widget/common.scss
Normal file
86
src/scss/component/widget/common.scss
Normal file
|
|
@ -0,0 +1,86 @@
|
|||
@import "~scss/_vars";
|
||||
|
||||
.widget { background: $colorWhite; border-radius: 12px; transform: translate(0px, 0px); position: relative; margin: 0px 0px 12px 0px; }
|
||||
.widget:last-child { margin: 0px; }
|
||||
.widget {
|
||||
.head { width: 100%; position: relative; display: flex; flex-direction: column; cursor: pointer; padding: 12px 8px 10px 16px; }
|
||||
.head {
|
||||
.flex { display: flex; flex-direction: row; align-items: center; gap: 0px 6px; justify-content: space-between; }
|
||||
.flex {
|
||||
.clickable { display: flex; flex-direction: row; align-items: center; gap: 0px 12px; flex-grow: 1; width: 100%; }
|
||||
.clickable {
|
||||
.iconObject { flex-shrink: 0; }
|
||||
.name { @include text-paragraph; @include text-overflow-nw; line-height: 24px; font-weight: 600; flex-grow: 1; }
|
||||
}
|
||||
}
|
||||
|
||||
.iconWrap { width: 24px; height: 24px; border-radius: 4px; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
|
||||
.iconWrap:hover { background-color: $colorHover; }
|
||||
.iconWrap.active { opacity: 1; background-color: $colorHover; }
|
||||
|
||||
.icon { width: 20px; height: 20px; }
|
||||
.icon.back { background-image: url('~img/icon/widget/back.svg'); }
|
||||
.icon.options { background-image: url('~img/icon/widget/options.svg'); }
|
||||
.icon.collapse { background-image: url('~img/icon/widget/collapse.svg'); }
|
||||
.icon.collapse.isClosed { transform: rotateZ(-90deg); }
|
||||
|
||||
.buttons { flex-shrink: 0; display: flex; flex-direction: row; align-items: center; gap: 0px 6px; visibility: hidden; }
|
||||
.buttons.active { visibility: visible; }
|
||||
}
|
||||
|
||||
.head::before {
|
||||
content: ""; position: absolute; background: $colorHover; width: calc(100% - 8px); height: 28px; left: 4px; top: 10px; border-radius: 4px;
|
||||
pointer-events: none; transition: $transitionFast; opacity: 0;
|
||||
}
|
||||
.head:hover::before { opacity: 1; }
|
||||
|
||||
.label.empty { text-align: center; @include text-small; }
|
||||
|
||||
.contentWrapper { transition: height 0.3s ease-out; }
|
||||
|
||||
.icon.remove {
|
||||
position: absolute; top: -5px; right: -5px; height: 20px; width: 20px; border-radius: 50%; background-color: $colorWhite; cursor: pointer !important;
|
||||
background-image: url('~img/icon/sidebar/remove.svg'); background-size: 12px; box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.2); display: none; z-index: 1;
|
||||
}
|
||||
.icon.remove:hover { background-color: $colorVeryLightGrey; }
|
||||
}
|
||||
.widget:hover {
|
||||
.head > .flex > .clickable { width: calc(100% - 60px); }
|
||||
.buttons { visibility: visible; }
|
||||
}
|
||||
|
||||
.widget.isPreview {
|
||||
.head { border-bottom: 1px solid $colorBorderLight; margin: 0px 0px 16px 0px; padding: 20px 16px 16px 10px; }
|
||||
.head::before { top: 18px; }
|
||||
.head > .flex > .clickable { width: calc(100% - 30px); }
|
||||
}
|
||||
.widget.isPreview:hover {
|
||||
.head > .flex > .clickable { width: calc(100% - 90px); }
|
||||
}
|
||||
|
||||
.widget.isClosed {
|
||||
.contentWrapper { height: 0px; overflow: hidden; }
|
||||
}
|
||||
|
||||
.widget.widgetLink {
|
||||
.head { padding-bottom: 12px; }
|
||||
.iconWrap.collapse { display: none; }
|
||||
}
|
||||
.widget.widgetLink:hover {
|
||||
.head > .flex > .clickable { width: calc(100% - 36px); }
|
||||
}
|
||||
|
||||
.button.widget {
|
||||
height: unset; text-align: left; @include text-paragraph; @include text-overflow-nw; line-height: 24px; font-weight: 600; padding: 12px 16px;
|
||||
display: flex; position: relative; gap: 0px 12px; flex-direction: row; align-items: center;
|
||||
}
|
||||
.button.widget {
|
||||
.icon { height: 20px; width: 20px; margin: 0px; }
|
||||
.icon.library { background-image: url('~img/icon/sidebar/library.svg'); }
|
||||
.icon.bin { background-image: url('~img/icon/sidebar/bin.svg'); }
|
||||
}
|
||||
.button.widget::before {
|
||||
content: ""; position: absolute; background: $colorHover; width: calc(100% - 8px); height: 24px; left: 4px; top: 10px; border-radius: 4px;
|
||||
pointer-events: none; transition: $transitionFast; opacity: 0;
|
||||
}
|
||||
.button.widget:hover::before { opacity: 1; }
|
||||
77
src/scss/component/widget/list.scss
Normal file
77
src/scss/component/widget/list.scss
Normal file
|
|
@ -0,0 +1,77 @@
|
|||
@import "~scss/_vars";
|
||||
|
||||
.widget.widgetList { display: flex; flex-direction: column; padding-bottom: 12px; };
|
||||
.widget.widgetList {
|
||||
.loaderWrapper { position: relative; }
|
||||
.head { padding-bottom: 0px; }
|
||||
.innerWrap { height: 100%; }
|
||||
.contentWrapper { flex-grow: 1; }
|
||||
|
||||
#viewSelect { padding: 0px 16px 6px 16px; }
|
||||
#viewSelect {
|
||||
.viewList { width: 100%; overflow-x: auto; overflow-y: hidden; }
|
||||
.viewList {
|
||||
.inner { padding: 0px 16px; white-space: nowrap; }
|
||||
|
||||
.viewItem {
|
||||
@include text-common; font-weight: 500; color: $colorMediumGrey; transition: $transitionFast; margin-right: 16px; display: inline-block;
|
||||
vertical-align: top; cursor: pointer;
|
||||
}
|
||||
.viewItem:last-child { margin: 0px; }
|
||||
.viewItem:hover, .viewItem.active { color: $colorBlack; }
|
||||
}
|
||||
|
||||
.select { border: none; margin-left: -6px; padding-right: 16px; }
|
||||
.select {
|
||||
.item { @include text-small; line-height: 18px !important; font-weight: 500; }
|
||||
.icon.arrow {
|
||||
width: 8px !important; height: 5px !important; margin-top: -2.5px !important; background-image: url('~img/arrow/widget.svg') !important;
|
||||
background-size: contain; right: 4px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.body { display: flex; flex-direction: column; gap: 2px; padding: 0px 4px 4px 4px; }
|
||||
.body {
|
||||
.item { cursor: pointer; height: 64px; transition: $transitionFast; border-radius: 6px; }
|
||||
.item:hover { background-color: $colorHover; }
|
||||
.item:hover {
|
||||
.info { width: calc(100% - 96px); }
|
||||
.buttons { display: flex; }
|
||||
}
|
||||
|
||||
.item {
|
||||
.inner { display: flex; flex-direction: row; gap: 0px 12px; align-items: center; padding: 8px 12px; height: 100%; }
|
||||
.dropTarget { border-radius: 6px; height: 100%; }
|
||||
.iconObject { flex-shrink: 0; background: $colorVeryLightGrey; border-radius: 10px; }
|
||||
.iconObject.isTask, .iconObject.isBookmark { background: none; }
|
||||
|
||||
.info { width: calc(100% - 60px); }
|
||||
.name { @include text-overflow-nw; }
|
||||
.descr { @include text-small; color: $colorDarkGrey; @include text-overflow-nw; }
|
||||
|
||||
.buttons { flex-shrink: 0; display: flex; flex-direction: row; align-items: center; gap: 0px 6px; display: none; }
|
||||
.buttons.active { display: flex; }
|
||||
.buttons {
|
||||
.icon { width: 24px; height: 24px; border-radius: 4px; cursor: pointer; flex-shrink: 0; background-size: 20px; }
|
||||
.icon:hover { background-color: $colorHover; }
|
||||
.icon.active { opacity: 1; background-color: $colorHover; }
|
||||
.icon.more { background-image: url('~img/icon/menu/action/more0.svg'); }
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
.widget.widgetList.isPreview { padding: 0px; }
|
||||
.widget.widgetList.isPreview {
|
||||
.head { padding: 0px; border: 0px; margin: 0px; }
|
||||
.head {
|
||||
.flex { padding: 20px 16px 10px 10px; }
|
||||
}
|
||||
|
||||
#viewSelect { border-bottom: 1px solid $colorBorderLight; padding: 0px 0px 10px 0px; }
|
||||
|
||||
.body { height: 100%; overflow-x: hidden; overflow-y: overlay; padding-bottom: 0px; }
|
||||
.ReactVirtualized__List { padding: 12px 0px 8px 0px; }
|
||||
.contentWrapper { height: calc(100% - 77px); }
|
||||
}
|
||||
28
src/scss/component/widget/space.scss
Normal file
28
src/scss/component/widget/space.scss
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
@import "~scss/_vars";
|
||||
|
||||
.widget.widgetSpace { padding: 16px; cursor: pointer; }
|
||||
.widget.widgetSpace {
|
||||
.icon.remove { display: none !important; }
|
||||
.icon.options { right: 44px; display: none !important; /* remove once Space is actually useful */ }
|
||||
|
||||
.body { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 0px 12px; }
|
||||
|
||||
.side.left { display: flex; flex-direction: row; align-items: center; gap: 0px 16px; width: calc(100% - 40px); flex-grow: 1; }
|
||||
.side.left {
|
||||
.iconObject { flex-shrink: 0; }
|
||||
.txt { width: calc(100% - 64px); }
|
||||
.name { @include text-paragraph; @include text-overflow-nw; font-weight: 600; }
|
||||
.type { @include text-small; color: $colorDarkGrey; @include text-overflow-nw; }
|
||||
}
|
||||
|
||||
.side.right { flex-shrink: 0; }
|
||||
|
||||
.icon { width: 28px; height: 28px; border-radius: 4px; background-size: 20px; opacity: 0; }
|
||||
.icon:hover { background-color: $colorHover; }
|
||||
.icon.settings { background-image: url('~img/icon/widget/settings.svg'); }
|
||||
}
|
||||
|
||||
.widget.widgetSpace:hover {
|
||||
.info { width: calc(100% - 56px); }
|
||||
.icon { opacity: 1; }
|
||||
}
|
||||
55
src/scss/component/widget/tree.scss
Normal file
55
src/scss/component/widget/tree.scss
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
@import "~scss/_vars";
|
||||
|
||||
.widget.widgetTree {
|
||||
.ReactVirtualized__List { padding: 0px 12px 12px 12px; }
|
||||
|
||||
.item { position: relative; }
|
||||
.item {
|
||||
.inner {
|
||||
display: flex; flex-direction: row; gap: 0px 2px; align-items: center; justify-content: space-between; cursor: pointer; position: relative;
|
||||
height: 28px; padding: 0px 2px;
|
||||
}
|
||||
.inner::before {
|
||||
content: ""; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background: $colorHover; z-index: 1; pointer-events: none;
|
||||
border-radius: 4px; transition: $transitionFast; opacity: 0;
|
||||
}
|
||||
.inner:hover::before, .inner.hover::before { opacity: 1; }
|
||||
|
||||
.dropTarget { border-radius: 4px; }
|
||||
|
||||
.iconObject { flex-shrink: 0; flex-basis: 20px; }
|
||||
.icon { width: 20px; height: 20px; flex-shrink: 0; transition: none; }
|
||||
.icon.set { background-image: url('~img/icon/sidebar/set.svg'); }
|
||||
.icon.blank { background-image: url('~img/icon/sidebar/blank.svg'); }
|
||||
.icon.arrow { background-image: url('~img/arrow/select/dark.svg'); transform: rotate(-90deg); cursor: pointer; }
|
||||
|
||||
.clickable {
|
||||
flex-grow: 1; display: flex; flex-direction: row; gap: 0px 6px; width: calc(100% - 24px); align-items: center; justify-content: space-between;
|
||||
cursor: pointer;
|
||||
}
|
||||
.name { flex-grow: 1; @include text-overflow-nw; }
|
||||
.icon.preview { width: 20px; height: 20px; background-image: url('~img/icon/sidebar/preview.svg'); }
|
||||
|
||||
.buttons { flex-shrink: 0; flex-direction: row; align-items: center; gap: 0px 6px; display: none; }
|
||||
.buttons.active { display: flex; }
|
||||
.buttons {
|
||||
.icon { width: 24px; height: 24px; border-radius: 4px; cursor: pointer; flex-shrink: 0; background-size: 20px; }
|
||||
.icon:hover { background-color: $colorHover; }
|
||||
.icon.active { opacity: 1; background-color: $colorHover; }
|
||||
.icon.more { background-image: url('~img/icon/menu/action/more0.svg'); }
|
||||
}
|
||||
}
|
||||
|
||||
.item:hover {
|
||||
.clickable { width: calc(100% - 60px); }
|
||||
.buttons { display: flex; }
|
||||
}
|
||||
|
||||
.item.hover {
|
||||
.inner::before { background: $colorHover; }
|
||||
.icon.preview { display: block; }
|
||||
}
|
||||
.item.active {
|
||||
.icon.arrow { transform: rotate(0deg); }
|
||||
}
|
||||
}
|
||||
|
|
@ -15,14 +15,6 @@ html.debug {
|
|||
.block.blockLayout.layoutDiv { border-width: 2px; border-color: rgba(0,255,0,0.3); padding: 2px; }
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
.item {
|
||||
.icon { background-color: rgba(255,255,255,0.1); }
|
||||
.iconObject { background-color: rgba(255,255,255,0.1); }
|
||||
.name { background-color: rgba(255,255,255,0.1); }
|
||||
}
|
||||
}
|
||||
|
||||
.blockLast { background: rgba(0,0,255,0.1); }
|
||||
.isHidden { background-color: rgba(255,192,203,0.3) !important; }
|
||||
}
|
||||
|
|
@ -8,6 +8,7 @@ html.printMedia {
|
|||
#sidebar { display: none; }
|
||||
.sidebarDummy { display: none; }
|
||||
.progress { display: none; }
|
||||
.toast { display: none; }
|
||||
|
||||
#drag, #previewLink, .menu,
|
||||
.editorControls, .controlButtons,
|
||||
|
|
@ -54,19 +55,14 @@ html.printMedia {
|
|||
.wrapMenu .icon.dnd { display: none; }
|
||||
#button-block-add { display: none; }
|
||||
|
||||
.block.blockMedia { break-inside: avoid-page; }
|
||||
.block.blockMedia, .block.blockBookmark { break-inside: avoid-page; }
|
||||
|
||||
.block.blockMedia {
|
||||
.icon.play { display: none; }
|
||||
}
|
||||
|
||||
.block.blockText {
|
||||
.placeholder { display: none !important; }
|
||||
.value { -webkit-user-modify: unset !important; }
|
||||
}
|
||||
|
||||
.block.blockBookmark { break-inside: avoid-page; }
|
||||
|
||||
.block.blockText.code > .wrapContent > .selectable > .dropTarget > .flex .value { white-space: pre; }
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -37,6 +37,7 @@
|
|||
.icon.comment { background-image: url('~img/icon/menu/action/comment0.svg'); }
|
||||
.icon.copy { background-image: url('~img/icon/menu/action/copy0.svg'); }
|
||||
.icon.remove { background-image: url('~img/icon/menu/action/remove0.svg'); }
|
||||
.icon.removeWidget { background-image: url('~img/icon/menu/action/removeWidget0.svg'); }
|
||||
.icon.more { background-image: url('~img/icon/menu/action/more0.svg'); }
|
||||
.icon.download { background-image: url('~img/icon/menu/action/download0.svg'); }
|
||||
.icon.upload { background-image: url('~img/icon/menu/action/upload0.svg'); }
|
||||
|
|
@ -76,6 +77,8 @@
|
|||
.icon.hide { background-image: url('~img/icon/menu/relation/hide.svg'); }
|
||||
.icon.browse { background-image: url('~img/icon/menu/action/browse0.svg'); }
|
||||
.icon.install { background-image: url('~img/icon/menu/action/install0.svg'); }
|
||||
.icon.unlink { background-image: url('~img/icon/menu/action/unlink0.svg'); }
|
||||
.icon.store { background-image: url('~img/icon/menu/action/store0.svg'); }
|
||||
|
||||
.icon.coverChange { background-image: url('~img/icon/cover/change.svg'); }
|
||||
.icon.coverPosition { background-image: url('~img/icon/cover/position.svg'); }
|
||||
|
|
@ -110,6 +113,10 @@
|
|||
.icon.table-insert-top { background-image: url('~img/icon/menu/table/insert-v.svg'); }
|
||||
.icon.table-insert-bottom { background-image: url('~img/icon/menu/table/insert-v.svg'); transform: rotateZ(180deg); }
|
||||
|
||||
.icon.widget-0 { background-image: url('~img/icon/widget/link.svg'); }
|
||||
.icon.widget-1 { background-image: url('~img/icon/widget/tree.svg'); }
|
||||
.icon.widget-2 { background-image: url('~img/icon/widget/list.svg'); }
|
||||
|
||||
.icon.color { z-index: 1; }
|
||||
.icon.color {
|
||||
.inner {
|
||||
|
|
|
|||
|
|
@ -2,10 +2,14 @@
|
|||
|
||||
.menus {
|
||||
.menuWrap { position: absolute; left: 0px; top: 0px; width: 100%; z-index: 22; }
|
||||
.menuWrap.fromPopup { z-index: 103; }
|
||||
.menuWrap.fromHeader { z-index: 103; }
|
||||
.menuWrap.fromPopup,
|
||||
.menuWrap.fromHeader,
|
||||
.menuWrap.fromSidebar { z-index: 103; }
|
||||
|
||||
.menuWrap.fixed { position: fixed; }
|
||||
.menuWrap.fixed .menu { position: fixed; }
|
||||
.menuWrap.fixed {
|
||||
.menu { position: fixed; }
|
||||
}
|
||||
|
||||
.dimmer { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; background: rgba(0,0,0,0); }
|
||||
#menu-polygon { z-index: 1000; position: absolute; }
|
||||
|
|
@ -157,6 +161,10 @@
|
|||
.highlightMark { position: relative; top: auto; right: auto; margin: 0px 0px 0px 10px; }
|
||||
}
|
||||
|
||||
.item.withCaption.withCheckbox {
|
||||
.icon.chk { display: none; }
|
||||
}
|
||||
|
||||
.item.withSwitch, .item.withSelect { display: flex; align-items: center; justify-content: space-between; }
|
||||
.item.withSwitch, .item.withSelect {
|
||||
.clickable { display: flex; }
|
||||
|
|
|
|||
14
src/scss/menu/widget.scss
Normal file
14
src/scss/menu/widget.scss
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
@import "~scss/_vars";
|
||||
|
||||
.menus {
|
||||
.menu.menuWidget {
|
||||
.section:last-child::after { display: none; }
|
||||
|
||||
.item {
|
||||
.name { @include text-overflow-nw; width: calc(100% - 36px); }
|
||||
}
|
||||
|
||||
.buttons { padding: 8px 16px 0px 16px; }
|
||||
.button { width: 100%; }
|
||||
}
|
||||
}
|
||||
69
src/scss/page/main/archive.scss
Normal file
69
src/scss/page/main/archive.scss
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
@import "~scss/_vars";
|
||||
|
||||
.pageMainArchive {
|
||||
.wrapper { width: calc(100% - 96px); margin: 0px auto; padding: 150px 0px 80px 0px; user-select: none; }
|
||||
.wrapper {
|
||||
|
||||
.titleWrapper { display: flex; flex-direction: row; align-items: center; gap: 0px 10px; margin: 0px 0px 46px 0px; }
|
||||
.titleWrapper {
|
||||
.title { @include text-header1; font-weight: 700; }
|
||||
.icon.archive { width: 32px; height: 32px; background-image: url('~img/icon/archive/logo.svg'); }
|
||||
}
|
||||
|
||||
.controls {
|
||||
display: flex; flex-direction: row; padding: 0px 0px 16px 0px; border-bottom: 1px solid $colorBorderLight; margin: 0px 0px 16px 0px;
|
||||
}
|
||||
.controls {
|
||||
.side { width: 50%; display: flex; flex-direction: row; align-items: center; gap: 0px 12px; }
|
||||
.side.left {
|
||||
.element {
|
||||
display: flex; flex-direction: row; align-items: center; gap: 0px 6px; border-radius: 4px; padding: 0px 6px 0px 4px; line-height: 28px; cursor: pointer;
|
||||
transition: $transitionFast;
|
||||
}
|
||||
.element:first-child { margin-left: -4px; }
|
||||
.element:hover { background-color: $colorHover; }
|
||||
}
|
||||
.side.right { justify-content: flex-end; }
|
||||
|
||||
.icon { width: 20px; height: 20px; }
|
||||
.icon.checkbox { background-image: url('~img/icon/archive/controls/checkbox0.svg'); }
|
||||
.icon.checkbox.active { background-image: url('~img/icon/archive/controls/checkbox1.svg'); }
|
||||
.icon.restore { background-image: url('~img/icon/menu/action/restore0.svg'); }
|
||||
.icon.remove { background-image: url('~img/icon/menu/action/remove0.svg'); }
|
||||
.icon.search { cursor: pointer; background-image: url('~img/icon/menu/action/search0.svg'); }
|
||||
|
||||
.filterWrapper { width: 200px; overflow: hidden; width: 0px; transition: $transitionFast; }
|
||||
.filterWrapper.active { width: 200px; }
|
||||
|
||||
.filter { padding: 0px; }
|
||||
.filter {
|
||||
.line { display: none; }
|
||||
.inner { height: 20px; }
|
||||
}
|
||||
}
|
||||
|
||||
.body { height: 100%; display: flex; flex-direction: column; }
|
||||
.items { height: 100%; }
|
||||
.items {
|
||||
.row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-column-gap: 32px; }
|
||||
|
||||
.item { display: flex; flex-direction: row; align-items: center; gap: 0px 12px; cursor: pointer; margin: 0px 0px 16px 0px; }
|
||||
.item {
|
||||
.info { width: calc(100% - 100px); }
|
||||
|
||||
.icon.checkbox {
|
||||
flex-shrink: 0; margin-right: 4px; cursor: pointer !important; background-image: url('~img/icon/archive/checkbox0.svg');
|
||||
width: 18px; height: 18px; transition: none;
|
||||
}
|
||||
.icon.checkbox.active { background-image: url('~img/icon/archive/checkbox1.svg'); }
|
||||
.iconObject { flex-shrink: 0; }
|
||||
|
||||
.name { @include text-overflow-nw; width: 100%; }
|
||||
.descr { @include text-overflow-nw; @include text-small; width: 100%; color: $colorDarkGrey; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.pageMainSet > #loader { position: fixed; top: 0px; width: 100%; height: 100%; }
|
||||
10
src/scss/page/main/empty.scss
Normal file
10
src/scss/page/main/empty.scss
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
@import "~scss/_vars";
|
||||
|
||||
.pageMainEmpty {
|
||||
.mid {
|
||||
text-align: center; width: 600px; position: absolute; left: 50%; top: 50%; transform: translate3d(-50%,-50%,0px);
|
||||
display: flex; flex-direction: column; gap: 24px 0px; align-items: center;
|
||||
}
|
||||
|
||||
.icon.ghost { width: 64px; height: 64px; }
|
||||
}
|
||||
|
|
@ -66,7 +66,9 @@
|
|||
.buttons { flex-shrink: 0; }
|
||||
.buttons {
|
||||
.icon { width: 28px !important; height: 28px !important; background-size: 20px; border-radius: 4px; transition: $transitionFast; }
|
||||
.icon.lock { background-size: 16px; background-image: url('~img/icon/store/lock.svg'); }
|
||||
.icon.lock {
|
||||
margin-right: -2px; width: 16px !important; height: 16px !important; background-size: 16px; background-image: url('~img/icon/store/lock.svg');
|
||||
}
|
||||
.icon.check { background-size: 28px; background-image: url('~img/icon/store/check0.svg'); }
|
||||
.icon.check:hover { background-image: url('~img/icon/store/check1.svg'); }
|
||||
.icon.plus { background-size: 28px; background-image: url('~img/icon/store/plus0.svg'); opacity: 0; }
|
||||
|
|
|
|||
|
|
@ -1,14 +1,7 @@
|
|||
@import "~scss/_vars";
|
||||
|
||||
.pageMainType {
|
||||
.wrapper { width: 704px; margin: 0px auto; padding: 52px 0px 80px 0px; user-select: none; }
|
||||
|
||||
.wrapper.withIcon {
|
||||
.editorControls {
|
||||
#button-icon { display: none; }
|
||||
}
|
||||
}
|
||||
|
||||
.wrapper { width: 704px; margin: 0px auto; padding: 0px 0px 80px 0px; user-select: none; }
|
||||
.wrapper {
|
||||
|
||||
.editorControls { margin: 0px 0px 16px 0px; }
|
||||
|
|
|
|||
|
|
@ -17,20 +17,17 @@
|
|||
.ReactVirtualized__List { padding-top: 48px; }
|
||||
}
|
||||
|
||||
.pageMainType {
|
||||
.wrapper { padding-top: 52px; }
|
||||
}
|
||||
|
||||
.pageMainRelation, .pageMainBookmark {
|
||||
.wrapper { padding-top: 126px; }
|
||||
}
|
||||
|
||||
.pageMainType {
|
||||
.wrapper { padding-top: 54px; }
|
||||
}
|
||||
|
||||
#bodyWrapper { padding-top: 30px; }
|
||||
|
||||
.footer { display: block; }
|
||||
.footer {
|
||||
#button-expand { display: none !important; }
|
||||
}
|
||||
}
|
||||
|
||||
.deleteWrapper { position: absolute; }
|
||||
|
|
@ -39,6 +36,9 @@
|
|||
#wrap { height: 100%; }
|
||||
|
||||
.page { padding: 0px; }
|
||||
.header {
|
||||
.icon.toggleSidebar { display: none; }
|
||||
}
|
||||
.footer { display: none; }
|
||||
|
||||
.pageMainEdit {
|
||||
|
|
@ -59,10 +59,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.pageMainType {
|
||||
.wrapper { padding-top: 0px; }
|
||||
}
|
||||
|
||||
.pageMainRelation, .pageMainBookmark {
|
||||
.wrapper { padding-top: 74px; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -337,19 +337,13 @@
|
|||
}
|
||||
|
||||
.tabSpaceIndex {
|
||||
.spaceSettingsHeader { text-align: center; }
|
||||
.spaceSettingsHeader {
|
||||
.spaceIcon { margin: 0px auto 20px; }
|
||||
.spaceIcon.canEdit { cursor: pointer; }
|
||||
.spaceIcon.canEdit:after {
|
||||
content: ''; position: absolute; left: 50%; top: 50%; width: 40px; height: 30px; margin: -15px 0px 0px -20px;
|
||||
background: url('~img/icon/camera.svg') no-repeat center; background-size: 40px 30px;
|
||||
transition: $transitionFast; opacity: 0;
|
||||
}
|
||||
.spaceIcon.canEdit:hover:after { opacity: 1; }
|
||||
.spaceInfo { text-align: center; }
|
||||
.spaceInfo {
|
||||
.iconObject { margin: 0px auto 20px; }
|
||||
.iconObject.canEdit { cursor: pointer; }
|
||||
.iconObject.canEdit:hover:after { opacity: 1; }
|
||||
|
||||
.title { margin-bottom: 12px; padding: 8px 0px 16px; height: auto; }
|
||||
.input.title { border-bottom: 1px solid $colorBorderDark; width: 384px; }
|
||||
.input { margin-bottom: 12px; padding: 8px 0px 16px; height: auto; border-bottom: 1px solid $colorBorderDark; width: 384px; }
|
||||
}
|
||||
|
||||
.row .team .iconObject { margin-right: -4px; box-shadow: 0 0 0 2px $colorWhite; }
|
||||
|
|
|
|||
|
|
@ -175,7 +175,7 @@ html.themeDark {
|
|||
|
||||
/* Preview */
|
||||
|
||||
.preview {
|
||||
.previewWrapper {
|
||||
.content { background: $colorBgLight; }
|
||||
.head { border-color: $colorLineSecondary; color: $colorSecondary; }
|
||||
.head {
|
||||
|
|
@ -316,23 +316,71 @@ html.themeDark {
|
|||
}
|
||||
.sidebar.fixed { box-shadow: 0px 0px rgba(0,0,0,0); }
|
||||
.sidebar {
|
||||
.body {
|
||||
.icon.set { background-image: url('#{$themePath}/icon/sidebar/set.svg'); }
|
||||
.icon.blank { background-image: url('#{$themePath}/icon/sidebar/blank.svg'); }
|
||||
.icon.arrow { background-image: url('~img/arrow/select/light.svg'); }
|
||||
|
||||
.item.isSection {
|
||||
.icon.arrow { background-image: url('#{$themePath}/arrow/sidebar.svg'); }
|
||||
}
|
||||
|
||||
.item .inner:hover::before { background: $colorHover; }
|
||||
.item.hover .inner::before { background: $colorHover; }
|
||||
}
|
||||
.foot {
|
||||
.item:hover { background-color: $colorHover; }
|
||||
}
|
||||
}
|
||||
|
||||
/* Widgets */
|
||||
/* ---------------------------------------------------------------- */
|
||||
|
||||
.listWidget {
|
||||
.icon.remove { background-color: $colorBgIcon; }
|
||||
> .buttons {
|
||||
.button, .button.edit { background-color: $colorBgIcon; color: $colorPrimary; }
|
||||
}
|
||||
}
|
||||
|
||||
.widget { background-color: $colorHover; color: $colorPrimary; border-color: $colorLineSecondary !important; }
|
||||
.widget {
|
||||
.iconWrap:hover, .iconWrap.active { background-color: $colorHover; }
|
||||
.icon.back { background-image: url('#{$themePath}/icon/widget/back.svg'); }
|
||||
.icon.collapse { background-image: url('#{$themePath}/icon/widget/collapse.svg'); }
|
||||
.icon.options { background-image: url('#{$themePath}/icon/widget/options.svg'); }
|
||||
|
||||
.head::before { background-color: $colorHover; }
|
||||
}
|
||||
|
||||
.widget.isPreview {
|
||||
.head { border-color: $colorLineSecondary; }
|
||||
}
|
||||
|
||||
.widget.widgetTree {
|
||||
.icon.set { background-image: url('#{$themePath}/icon/sidebar/set.svg'); }
|
||||
.icon.blank { background-image: url('#{$themePath}/icon/sidebar/blank.svg'); }
|
||||
.icon.arrow { background-image: url('~img/arrow/select/light.svg'); }
|
||||
|
||||
.item .inner:hover::before { background: $colorHover; }
|
||||
.item.hover .inner::before { background: $colorHover; }
|
||||
}
|
||||
|
||||
.widget.widgetList {
|
||||
#viewSelect { border-color: $colorLineSecondary; }
|
||||
#viewSelect {
|
||||
.viewList {
|
||||
.viewItem { color: $colorSecondary; }
|
||||
.viewItem:hover, .viewItem.active { color: $colorPrimary; }
|
||||
}
|
||||
|
||||
.select {
|
||||
.icon.arrow { background-image: url('#{$themePath}/arrow/widget.svg') !important; }
|
||||
}
|
||||
}
|
||||
|
||||
.body {
|
||||
.item:hover { background: $colorHover; }
|
||||
.item {
|
||||
.iconObject { background: $colorBgIcon; }
|
||||
.iconObject.isTask, .iconObject.isBookmark { background: none; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button.widget {
|
||||
.icon.library { background-image: url('#{$themePath}/icon/sidebar/library.svg'); }
|
||||
.icon.bin { background-image: url('#{$themePath}/icon/sidebar/bin.svg'); }
|
||||
}
|
||||
|
||||
@import "./menu.scss";
|
||||
@import "./popup.scss";
|
||||
@import "./page.scss";
|
||||
|
|
|
|||
|
|
@ -19,6 +19,10 @@
|
|||
.icon.textNumbered { background-image: url('#{$themePath}/icon/menu/action/block/numbered0.svg'); }
|
||||
.icon.textToggle { background-image: url('#{$themePath}/icon/menu/action/block/toggle0.svg'); }
|
||||
|
||||
.icon.widget-0 { background-image: url('#{$themePath}/icon/widget/link.svg'); }
|
||||
.icon.widget-1 { background-image: url('#{$themePath}/icon/widget/tree.svg'); }
|
||||
.icon.widget-2 { background-image: url('#{$themePath}/icon/widget/list.svg'); }
|
||||
|
||||
.icon.color {
|
||||
.inner.textColor-default { background-color: $colorPrimary; }
|
||||
.inner.bgColor-default { background: transparent; }
|
||||
|
|
|
|||
|
|
@ -94,6 +94,12 @@
|
|||
.name { border-color: $colorLinePrimary; }
|
||||
}
|
||||
}
|
||||
|
||||
.tabSpaceIndex {
|
||||
.spaceInfo {
|
||||
.input { border-color: $colorLinePrimary; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* PopupShortcuts */
|
||||
|
|
|
|||
212
src/ts/app.tsx
212
src/ts/app.tsx
|
|
@ -1,60 +1,67 @@
|
|||
import * as React from 'react';
|
||||
import * as Sentry from '@sentry/browser';
|
||||
import * as hs from 'history';
|
||||
import $ from 'jquery';
|
||||
import raf from 'raf';
|
||||
import { RouteComponentProps } from 'react-router';
|
||||
import { Router, Route, Switch, Redirect } from 'react-router-dom';
|
||||
import { Provider } from 'mobx-react';
|
||||
import { configure, spy } from 'mobx';
|
||||
import { enableLogging } from 'mobx-logger';
|
||||
import $ from 'jquery';
|
||||
import raf from 'raf';
|
||||
import * as hs from 'history';
|
||||
import * as Sentry from '@sentry/browser';
|
||||
import { Page, SelectionProvider, DragProvider, Progress, Toast, Preview as PreviewIndex, Icon, ListPopup, ListMenu } from './component';
|
||||
import { commonStore, authStore, blockStore, detailStore, dbStore, menuStore, popupStore } from './store';
|
||||
import { I, C, Util, FileUtil, keyboard, Storage, analytics, dispatcher, translate, Action, Renderer, DataUtil, focus, Preview, Mark, Encode } from 'Lib';
|
||||
|
||||
configure({ enforceActions: 'never' });
|
||||
|
||||
import 'react-virtualized/styles.css';
|
||||
import 'katex/dist/katex.min.css';
|
||||
import 'prismjs/themes/prism.css';
|
||||
import 'react-virtualized/styles.css';
|
||||
import 'emoji-mart/css/emoji-mart.css';
|
||||
|
||||
import 'scss/font.scss';
|
||||
import 'scss/common.scss';
|
||||
import 'scss/debug.scss';
|
||||
import 'scss/font.scss';
|
||||
|
||||
import 'scss/component/button.scss';
|
||||
import 'scss/component/cover.scss';
|
||||
import 'scss/component/deleted.scss';
|
||||
import 'scss/component/drag.scss';
|
||||
import 'scss/component/dragbox.scss';
|
||||
import 'scss/component/dragLayer.scss';
|
||||
import 'scss/component/editor.scss';
|
||||
import 'scss/component/emptySearch.scss';
|
||||
import 'scss/component/error.scss';
|
||||
import 'scss/component/filter.scss';
|
||||
import 'scss/component/footer.scss';
|
||||
import 'scss/component/frame.scss';
|
||||
import 'scss/component/header.scss';
|
||||
import 'scss/component/headSimple.scss';
|
||||
import 'scss/component/footer.scss';
|
||||
import 'scss/component/cover.scss';
|
||||
import 'scss/component/input.scss';
|
||||
import 'scss/component/inputWithFile.scss';
|
||||
import 'scss/component/button.scss';
|
||||
import 'scss/component/icon.scss';
|
||||
import 'scss/component/iconObject.scss';
|
||||
import 'scss/component/textarea.scss';
|
||||
import 'scss/component/error.scss';
|
||||
import 'scss/component/frame.scss';
|
||||
import 'scss/component/switch.scss';
|
||||
import 'scss/component/title.scss';
|
||||
import 'scss/component/select.scss';
|
||||
import 'scss/component/emptySearch.scss';
|
||||
import 'scss/component/tag.scss';
|
||||
import 'scss/component/dragLayer.scss';
|
||||
import 'scss/component/dragbox.scss';
|
||||
import 'scss/component/selection.scss';
|
||||
import 'scss/component/input.scss';
|
||||
import 'scss/component/inputWithFile.scss';
|
||||
import 'scss/component/list/previewObject.scss';
|
||||
import 'scss/component/list/widget.scss';
|
||||
import 'scss/component/loader.scss';
|
||||
import 'scss/component/deleted.scss';
|
||||
import 'scss/component/progress.scss';
|
||||
import 'scss/component/editor.scss';
|
||||
import 'scss/component/toast.scss';
|
||||
import 'scss/component/tooltip.scss';
|
||||
import 'scss/component/drag.scss';
|
||||
import 'scss/component/pager.scss';
|
||||
import 'scss/component/pin.scss';
|
||||
import 'scss/component/sync.scss';
|
||||
import 'scss/component/filter.scss';
|
||||
import 'scss/component/progress.scss';
|
||||
import 'scss/component/select.scss';
|
||||
import 'scss/component/selection.scss';
|
||||
import 'scss/component/sidebar.scss';
|
||||
import 'scss/component/switch.scss';
|
||||
import 'scss/component/sync.scss';
|
||||
import 'scss/component/tag.scss';
|
||||
import 'scss/component/textarea.scss';
|
||||
import 'scss/component/title.scss';
|
||||
import 'scss/component/toast.scss';
|
||||
import 'scss/component/tooltip.scss';
|
||||
|
||||
import 'scss/component/widget/common.scss';
|
||||
import 'scss/component/widget/space.scss';
|
||||
import 'scss/component/widget/list.scss';
|
||||
import 'scss/component/widget/tree.scss';
|
||||
|
||||
import 'scss/component/list/object.scss';
|
||||
import 'scss/component/list/previewObject.scss';
|
||||
|
|
@ -70,95 +77,101 @@ import 'scss/component/media/video.scss';
|
|||
import 'scss/component/hightlight.scss';
|
||||
|
||||
import 'scss/page/auth.scss';
|
||||
import 'scss/page/main/index.scss';
|
||||
import 'scss/page/main/edit.scss';
|
||||
import 'scss/page/main/graph.scss';
|
||||
import 'scss/page/main/history.scss';
|
||||
import 'scss/page/main/index.scss';
|
||||
import 'scss/page/main/media.scss';
|
||||
import 'scss/page/main/navigation.scss';
|
||||
import 'scss/page/main/relation.scss';
|
||||
import 'scss/page/main/set.scss';
|
||||
import 'scss/page/main/space.scss';
|
||||
import 'scss/page/main/type.scss';
|
||||
import 'scss/page/main/relation.scss';
|
||||
import 'scss/page/main/media.scss';
|
||||
import 'scss/page/main/store.scss';
|
||||
import 'scss/page/main/type.scss';
|
||||
import 'scss/page/main/archive.scss';
|
||||
import 'scss/page/main/graph.scss';
|
||||
import 'scss/page/main/navigation.scss';
|
||||
import 'scss/page/main/block.scss';
|
||||
import 'scss/page/main/empty.scss';
|
||||
|
||||
import 'scss/block/common.scss';
|
||||
import 'scss/block/text.scss';
|
||||
import 'scss/block/media.scss';
|
||||
import 'scss/block/file.scss';
|
||||
import 'scss/block/link.scss';
|
||||
import 'scss/block/bookmark.scss';
|
||||
import 'scss/block/div.scss';
|
||||
import 'scss/block/layout.scss';
|
||||
import 'scss/block/iconPage.scss';
|
||||
import 'scss/block/iconUser.scss';
|
||||
import 'scss/block/common.scss';
|
||||
import 'scss/block/cover.scss';
|
||||
import 'scss/block/relation.scss';
|
||||
import 'scss/block/featured.scss';
|
||||
import 'scss/block/type.scss';
|
||||
import 'scss/block/latex.scss';
|
||||
import 'scss/block/table.scss';
|
||||
import 'scss/block/tableOfContents.scss';
|
||||
import 'scss/block/dataview.scss';
|
||||
import 'scss/block/dataview/cell.scss';
|
||||
import 'scss/block/dataview/view/common.scss';
|
||||
import 'scss/block/dataview/view/grid.scss';
|
||||
import 'scss/block/dataview/view/board.scss';
|
||||
import 'scss/block/dataview/view/list.scss';
|
||||
import 'scss/block/dataview/view/common.scss';
|
||||
import 'scss/block/dataview/view/gallery.scss';
|
||||
import 'scss/block/dataview/view/grid.scss';
|
||||
import 'scss/block/dataview/view/list.scss';
|
||||
import 'scss/block/div.scss';
|
||||
import 'scss/block/featured.scss';
|
||||
import 'scss/block/file.scss';
|
||||
import 'scss/block/iconPage.scss';
|
||||
import 'scss/block/iconUser.scss';
|
||||
import 'scss/block/latex.scss';
|
||||
import 'scss/block/layout.scss';
|
||||
import 'scss/block/link.scss';
|
||||
import 'scss/block/media.scss';
|
||||
import 'scss/block/relation.scss';
|
||||
import 'scss/block/table.scss';
|
||||
import 'scss/block/tableOfContents.scss';
|
||||
import 'scss/block/text.scss';
|
||||
import 'scss/block/type.scss';
|
||||
|
||||
import 'scss/popup/common.scss';
|
||||
import 'scss/popup/settings.scss';
|
||||
import 'scss/popup/search.scss';
|
||||
import 'scss/popup/prompt.scss';
|
||||
import 'scss/popup/preview.scss';
|
||||
import 'scss/popup/help.scss';
|
||||
import 'scss/popup/shortcut.scss';
|
||||
import 'scss/popup/confirm.scss';
|
||||
import 'scss/popup/page.scss';
|
||||
import 'scss/popup/template.scss';
|
||||
import 'scss/popup/export.scss';
|
||||
import 'scss/popup/help.scss';
|
||||
import 'scss/popup/page.scss';
|
||||
import 'scss/popup/preview.scss';
|
||||
import 'scss/popup/prompt.scss';
|
||||
import 'scss/popup/search.scss';
|
||||
import 'scss/popup/settings.scss';
|
||||
import 'scss/popup/shortcut.scss';
|
||||
import 'scss/popup/template.scss';
|
||||
|
||||
import 'scss/menu/common.scss';
|
||||
import 'scss/menu/account.scss';
|
||||
import 'scss/menu/smile.scss';
|
||||
import 'scss/menu/button.scss';
|
||||
import 'scss/menu/common.scss';
|
||||
import 'scss/menu/help.scss';
|
||||
import 'scss/menu/onboarding.scss';
|
||||
import 'scss/menu/relation.scss';
|
||||
import 'scss/menu/select.scss';
|
||||
import 'scss/menu/button.scss';
|
||||
import 'scss/menu/smile.scss';
|
||||
import 'scss/menu/thread.scss';
|
||||
import 'scss/menu/type.scss';
|
||||
import 'scss/menu/relation.scss';
|
||||
import 'scss/menu/widget.scss';
|
||||
|
||||
import 'scss/menu/search/text.scss';
|
||||
import 'scss/menu/search/object.scss';
|
||||
import 'scss/menu/search/text.scss';
|
||||
|
||||
import 'scss/menu/preview/object.scss';
|
||||
|
||||
import 'scss/menu/block/context.scss';
|
||||
import 'scss/menu/block/common.scss';
|
||||
import 'scss/menu/block/context.scss';
|
||||
import 'scss/menu/block/cover.scss';
|
||||
import 'scss/menu/block/icon.scss';
|
||||
import 'scss/menu/block/latex.scss';
|
||||
import 'scss/menu/block/link.scss';
|
||||
import 'scss/menu/block/linkSettings.scss';
|
||||
import 'scss/menu/block/icon.scss';
|
||||
import 'scss/menu/block/cover.scss';
|
||||
import 'scss/menu/block/mention.scss';
|
||||
import 'scss/menu/block/relation.scss';
|
||||
import 'scss/menu/block/latex.scss';
|
||||
|
||||
import 'scss/menu/dataview/calendar.scss';
|
||||
import 'scss/menu/dataview/common.scss';
|
||||
import 'scss/menu/dataview/sort.scss';
|
||||
import 'scss/menu/dataview/create/bookmark.scss';
|
||||
import 'scss/menu/dataview/file.scss';
|
||||
import 'scss/menu/dataview/filter.scss';
|
||||
import 'scss/menu/dataview/relation.scss';
|
||||
import 'scss/menu/dataview/group.scss';
|
||||
import 'scss/menu/dataview/object.scss';
|
||||
import 'scss/menu/dataview/calendar.scss';
|
||||
import 'scss/menu/dataview/option.scss';
|
||||
import 'scss/menu/dataview/file.scss';
|
||||
import 'scss/menu/dataview/relation.scss';
|
||||
import 'scss/menu/dataview/sort.scss';
|
||||
import 'scss/menu/dataview/source.scss';
|
||||
import 'scss/menu/dataview/text.scss';
|
||||
import 'scss/menu/dataview/view.scss';
|
||||
import 'scss/menu/dataview/source.scss';
|
||||
import 'scss/menu/dataview/create/bookmark.scss';
|
||||
|
||||
import 'scss/media/print.scss';
|
||||
|
||||
|
|
@ -170,17 +183,16 @@ import Routes from 'json/route.json';
|
|||
|
||||
const memoryHistory = hs.createMemoryHistory;
|
||||
const history = memoryHistory();
|
||||
|
||||
interface RouteElement { path: string; };
|
||||
|
||||
interface State {
|
||||
loading: boolean;
|
||||
};
|
||||
|
||||
|
||||
declare global {
|
||||
interface Window {
|
||||
interface Window {
|
||||
Electron: any;
|
||||
Store: any;
|
||||
Store: any;
|
||||
$: any;
|
||||
Lib: any;
|
||||
Graph: any;
|
||||
|
|
@ -219,9 +231,9 @@ window.Lib = {
|
|||
|
||||
/*
|
||||
spy(event => {
|
||||
if (event.type == 'action') {
|
||||
console.log('[Mobx].event', event.name, event.arguments);
|
||||
};
|
||||
if (event.type == 'action') {
|
||||
console.log('[Mobx].event', event.name, event.arguments);
|
||||
};
|
||||
});
|
||||
enableLogging({
|
||||
predicate: () => true,
|
||||
|
|
@ -234,7 +246,7 @@ enableLogging({
|
|||
|
||||
Sentry.init({
|
||||
release: window.Electron.version.app,
|
||||
environment: (window.Electron.isPackaged ? 'production' : 'development'),
|
||||
environment: window.Electron.isPackaged ? 'production' : 'development',
|
||||
dsn: Constant.sentry,
|
||||
maxBreadcrumbs: 0,
|
||||
beforeSend: (e: any) => {
|
||||
|
|
@ -244,19 +256,19 @@ Sentry.init({
|
|||
integrations: [
|
||||
new Sentry.Integrations.GlobalHandlers({
|
||||
onerror: true,
|
||||
onunhandledrejection: true
|
||||
})
|
||||
]
|
||||
onunhandledrejection: true,
|
||||
}),
|
||||
],
|
||||
});
|
||||
|
||||
class RoutePage extends React.Component<RouteComponentProps> {
|
||||
|
||||
render () {
|
||||
render() {
|
||||
return (
|
||||
<SelectionProvider>
|
||||
<DragProvider>
|
||||
<ListPopup key="listPopup" {...this.props} />
|
||||
<ListMenu key="listMenu" {...this.props} />
|
||||
<ListPopup key='listPopup' {...this.props} />
|
||||
<ListMenu key='listMenu' {...this.props} />
|
||||
|
||||
<Page {...this.props} />
|
||||
</DragProvider>
|
||||
|
|
@ -336,7 +348,6 @@ class App extends React.Component<object, State> {
|
|||
{Routes.map((item: RouteElement, i: number) => (
|
||||
<Route path={item.path} exact={true} key={i} component={RoutePage} />
|
||||
))}
|
||||
<Redirect to='/main/index' />
|
||||
</Switch>
|
||||
</div>
|
||||
</Provider>
|
||||
|
|
@ -349,7 +360,6 @@ class App extends React.Component<object, State> {
|
|||
};
|
||||
|
||||
componentDidUpdate () {
|
||||
this.initTheme(commonStore.theme);
|
||||
};
|
||||
|
||||
init () {
|
||||
|
|
@ -381,22 +391,6 @@ class App extends React.Component<object, State> {
|
|||
commonStore.coverSetDefault();
|
||||
};
|
||||
|
||||
initTheme (theme: string) {
|
||||
const head = $('head');
|
||||
|
||||
head.find('#link-prism').remove();
|
||||
|
||||
if (theme == 'system') {
|
||||
theme = commonStore.nativeTheme;
|
||||
};
|
||||
|
||||
if (theme) {
|
||||
head.append(`<link id="link-prism" rel="stylesheet" href="./css/theme/${theme}/prism.css" />`);
|
||||
};
|
||||
|
||||
Util.addBodyClass('theme', theme);
|
||||
};
|
||||
|
||||
checkMaximized () {
|
||||
const platform = Util.getPlatform();
|
||||
|
||||
|
|
@ -441,13 +435,12 @@ class App extends React.Component<object, State> {
|
|||
|
||||
Renderer.on('config', (e: any, config: any) => {
|
||||
commonStore.configSet(config, true);
|
||||
this.initTheme(config.theme);
|
||||
});
|
||||
|
||||
Renderer.on('native-theme', (e: any, isDark: boolean) => {
|
||||
commonStore.nativeThemeSet(isDark);
|
||||
commonStore.themeSet(commonStore.theme);
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
onInit (e: any, data: any) {
|
||||
|
|
@ -468,7 +461,6 @@ class App extends React.Component<object, State> {
|
|||
authStore.accountPathSet(dataPath);
|
||||
|
||||
this.initStorage();
|
||||
this.initTheme(config.theme);
|
||||
|
||||
if (redirect) {
|
||||
Storage.delete('redirect');
|
||||
|
|
@ -833,4 +825,4 @@ class App extends React.Component<object, State> {
|
|||
|
||||
};
|
||||
|
||||
export default App;
|
||||
export default App;
|
||||
|
|
|
|||
|
|
@ -107,7 +107,7 @@ const BlockCover = observer(class BlockCover extends React.Component<I.BlockComp
|
|||
|
||||
<div className="dragWrap">
|
||||
<Drag
|
||||
ref={(ref: any) => { this.refDrag = ref; }}
|
||||
ref={ref => { this.refDrag = ref; }}
|
||||
onStart={this.onScaleStart}
|
||||
onMove={this.onScaleMove}
|
||||
onEnd={this.onScaleEnd}
|
||||
|
|
|
|||
|
|
@ -113,7 +113,7 @@ const BlockDataview = observer(class BlockDataview extends React.Component<Props
|
|||
if (isInline) {
|
||||
head = (
|
||||
<Head
|
||||
ref={(ref: any) => { this.refHead = ref; }}
|
||||
ref={ref => this.refHead = ref}
|
||||
{...this.props}
|
||||
readonly={false}
|
||||
getData={this.getData}
|
||||
|
|
@ -133,7 +133,7 @@ const BlockDataview = observer(class BlockDataview extends React.Component<Props
|
|||
if (!isDragging) {
|
||||
controls = (
|
||||
<Controls
|
||||
ref={(ref: any) => { this.refControls = ref; }}
|
||||
ref={ref => this.refControls = ref}
|
||||
{...this.props}
|
||||
className={className}
|
||||
readonly={false}
|
||||
|
|
@ -155,7 +155,7 @@ const BlockDataview = observer(class BlockDataview extends React.Component<Props
|
|||
<Empty
|
||||
{...this.props}
|
||||
title="Type or relation has been deleted"
|
||||
description="Visit the Marketplace to re-install these entities or select another source."
|
||||
description="Visit the Anytype library to re-install these entities or select another source."
|
||||
button="Select source"
|
||||
className={isInline ? 'withHead' : ''}
|
||||
withButton={true}
|
||||
|
|
@ -397,6 +397,7 @@ const BlockDataview = observer(class BlockDataview extends React.Component<Props
|
|||
offset: 0,
|
||||
limit: offset + this.getLimit(view.type),
|
||||
clear,
|
||||
sources,
|
||||
}, (message: any) => {
|
||||
if (clear) {
|
||||
this.setState({ loading: false });
|
||||
|
|
|
|||
|
|
@ -113,14 +113,13 @@ class Cell extends React.Component<Props> {
|
|||
onMouseLeave={this.onMouseLeave}
|
||||
>
|
||||
<CellComponent
|
||||
ref={(ref: any) => { this.ref = ref; }}
|
||||
ref={ref => { this.ref = ref; }}
|
||||
{...this.props}
|
||||
id={id}
|
||||
key={id}
|
||||
canEdit={canEdit}
|
||||
relation={relation}
|
||||
onChange={this.onChange}
|
||||
onParentClick={this.onClick}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@ const CellText = observer(class CellText extends React.Component<I.Cell, State>
|
|||
|
||||
render () {
|
||||
const { isEditing } = this.state;
|
||||
const { index, relation, viewType, getView, getRecord, textLimit, isInline, iconSize, onParentClick, placeholder } = this.props;
|
||||
const { index, relation, viewType, getView, getRecord, textLimit, isInline, iconSize, placeholder } = this.props;
|
||||
const record = getRecord(index);
|
||||
|
||||
if (!record) {
|
||||
|
|
@ -99,7 +99,7 @@ const CellText = observer(class CellText extends React.Component<I.Cell, State>
|
|||
|
||||
EditorComponent = (item: any) => (
|
||||
<Input
|
||||
ref={(ref: any) => { this.ref = ref; }}
|
||||
ref={ref => { this.ref = ref; }}
|
||||
id="input"
|
||||
{...item}
|
||||
maskOptions={maskOptions}
|
||||
|
|
@ -111,7 +111,7 @@ const CellText = observer(class CellText extends React.Component<I.Cell, State>
|
|||
} else {
|
||||
EditorComponent = (item: any) => (
|
||||
<Input
|
||||
ref={(ref: any) => { this.ref = ref; }}
|
||||
ref={ref => { this.ref = ref; }}
|
||||
id="input"
|
||||
{...item}
|
||||
placeholder={placeholder || translate(`placeholderCell${relation.format}`)}
|
||||
|
|
@ -177,11 +177,8 @@ const CellText = observer(class CellText extends React.Component<I.Cell, State>
|
|||
};
|
||||
};
|
||||
|
||||
let content: any = null;
|
||||
|
||||
let icon = null;
|
||||
if (relation.relationKey == 'name') {
|
||||
let icon = null;
|
||||
|
||||
if (!view || (view && !view.hideIcon)) {
|
||||
icon = (
|
||||
<IconObject
|
||||
|
|
@ -202,25 +199,14 @@ const CellText = observer(class CellText extends React.Component<I.Cell, State>
|
|||
if (record.layout == I.ObjectLayout.Note) {
|
||||
value = record.snippet || `<span class="emptyText">${translate('commonEmpty')}</span>`;
|
||||
};
|
||||
|
||||
content = (
|
||||
<React.Fragment>
|
||||
{icon}
|
||||
<Name name={value} />
|
||||
<Icon
|
||||
className="edit"
|
||||
onMouseDown={(e: any) => {
|
||||
e.stopPropagation();
|
||||
onParentClick(e);
|
||||
}}
|
||||
/>
|
||||
</React.Fragment>
|
||||
);
|
||||
} else {
|
||||
content = <Name name={value} />;
|
||||
};
|
||||
|
||||
return content;
|
||||
return (
|
||||
<React.Fragment>
|
||||
{icon}
|
||||
<Name name={value} />
|
||||
</React.Fragment>
|
||||
);
|
||||
};
|
||||
|
||||
componentDidMount () {
|
||||
|
|
|
|||
|
|
@ -77,7 +77,7 @@ const ViewBoard = observer(class ViewBoard extends React.Component<I.ViewCompone
|
|||
{groups.map((group: any, i: number) => (
|
||||
<Column
|
||||
key={`board-column-${group.id}`}
|
||||
ref={(ref: any) => { this.columnRefs[group.id] = ref; }}
|
||||
ref={ref => { this.columnRefs[group.id] = ref; }}
|
||||
{...this.props}
|
||||
{...group}
|
||||
onRecordAdd={this.onRecordAdd}
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@ const Card = observer(class Card extends React.Component<Props> {
|
|||
{...this.props}
|
||||
getRecord={() => { return record; }}
|
||||
subId={subId}
|
||||
ref={(ref: any) => { onRef(ref, id); }}
|
||||
ref={ref => { onRef(ref, id); }}
|
||||
relationKey={relation.relationKey}
|
||||
index={0}
|
||||
viewType={view.type}
|
||||
|
|
|
|||
|
|
@ -108,7 +108,7 @@ const ViewGallery = observer(class ViewGallery extends React.Component<I.ViewCom
|
|||
return (
|
||||
<div ref={registerChild}>
|
||||
<Masonry
|
||||
ref={(ref: any) => { this.ref = ref; }}
|
||||
ref={ref => { this.ref = ref; }}
|
||||
autoHeight={true}
|
||||
height={Number(height) || 0}
|
||||
width={Number(width) || 0}
|
||||
|
|
|
|||
|
|
@ -73,7 +73,7 @@ const Card = observer(class Card extends React.Component<Props> {
|
|||
key={'list-cell-' + view.id + relation.relationKey}
|
||||
{...this.props}
|
||||
subId={subId}
|
||||
ref={(ref: any) => { onRef(ref, id); }}
|
||||
ref={ref => { onRef(ref, id); }}
|
||||
relationKey={relation.relationKey}
|
||||
viewType={view.type}
|
||||
idPrefix={idPrefix}
|
||||
|
|
|
|||
|
|
@ -87,39 +87,37 @@ const ViewGrid = observer(class ViewGrid extends React.Component<Props> {
|
|||
>
|
||||
{({ onRowsRendered, registerChild }) => (
|
||||
<WindowScroller scrollElement={isPopup ? $('#popupPage-innerWrap').get(0) : window}>
|
||||
{({ height, isScrolling, registerChild, scrollTop }) => {
|
||||
return (
|
||||
<AutoSizer disableHeight={true}>
|
||||
{({ width }) => {
|
||||
return (
|
||||
<div ref={registerChild}>
|
||||
<List
|
||||
autoHeight={true}
|
||||
height={Number(height) || 0}
|
||||
width={Number(width) || 0}
|
||||
isScrolling={isScrolling}
|
||||
rowCount={length}
|
||||
rowHeight={this.getRowHeight()}
|
||||
onRowsRendered={onRowsRendered}
|
||||
rowRenderer={({ key, index, style }) => (
|
||||
<BodyRow
|
||||
key={'grid-row-' + view.id + index}
|
||||
{...this.props}
|
||||
readonly={!isAllowedObject}
|
||||
index={index}
|
||||
style={{ ...style, top: style.top + 2 }}
|
||||
cellPosition={this.cellPosition}
|
||||
getColumnWidths={this.getColumnWidths}
|
||||
/>
|
||||
)}
|
||||
scrollTop={scrollTop}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</AutoSizer>
|
||||
);
|
||||
}}
|
||||
{({ height, isScrolling, registerChild, scrollTop }) => (
|
||||
<AutoSizer disableHeight={true}>
|
||||
{({ width }) => {
|
||||
return (
|
||||
<div ref={registerChild}>
|
||||
<List
|
||||
autoHeight={true}
|
||||
height={Number(height) || 0}
|
||||
width={Number(width) || 0}
|
||||
isScrolling={isScrolling}
|
||||
rowCount={length}
|
||||
rowHeight={this.getRowHeight()}
|
||||
onRowsRendered={onRowsRendered}
|
||||
rowRenderer={({ key, index, style }) => (
|
||||
<BodyRow
|
||||
key={'grid-row-' + view.id + index}
|
||||
{...this.props}
|
||||
readonly={!isAllowedObject}
|
||||
index={index}
|
||||
style={{ ...style, top: style.top + 2 }}
|
||||
cellPosition={this.cellPosition}
|
||||
getColumnWidths={this.getColumnWidths}
|
||||
/>
|
||||
)}
|
||||
scrollTop={scrollTop}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</AutoSizer>
|
||||
)}
|
||||
</WindowScroller>
|
||||
)}
|
||||
</InfiniteLoader>
|
||||
|
|
@ -200,8 +198,9 @@ const ViewGrid = observer(class ViewGrid extends React.Component<Props> {
|
|||
|
||||
onScroll () {
|
||||
const win = $(window);
|
||||
const menus = menuStore.list.filter(it => Constant.menuIds.cell.includes(it.id));
|
||||
|
||||
for (let menu of menuStore.list) {
|
||||
for (let menu of menus) {
|
||||
win.trigger('resize.' + Util.toCamelCase('menu-' + menu.id));
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +1,8 @@
|
|||
import * as React from 'react';
|
||||
import { I, DataUtil, Relation } from 'Lib';
|
||||
import { Cell } from 'Component';
|
||||
import { dbStore } from 'Store';
|
||||
import { observer } from 'mobx-react';
|
||||
|
||||
import { I, Relation } from 'Lib';
|
||||
import { Cell, Icon } from 'Component';
|
||||
import { dbStore } from 'Store';
|
||||
import Constant from 'json/constant.json';
|
||||
|
||||
interface Props {
|
||||
|
|
@ -23,6 +22,14 @@ interface Props {
|
|||
|
||||
const BodyCell = observer(class BodyCell extends React.Component<Props> {
|
||||
|
||||
ref = null;
|
||||
|
||||
constructor (props: Props) {
|
||||
super(props);
|
||||
|
||||
this.onEdit = this.onEdit.bind(this);
|
||||
};
|
||||
|
||||
render () {
|
||||
const { rootId, block, className, relationKey, index, readonly, onRef, onCellClick, onCellChange, getIdPrefix } = this.props;
|
||||
const relation: any = dbStore.getRelationByKey(relationKey) || {};
|
||||
|
|
@ -45,6 +52,11 @@ const BodyCell = observer(class BodyCell extends React.Component<Props> {
|
|||
cn.push(className);
|
||||
};
|
||||
|
||||
let iconEdit = null;
|
||||
if (relation.relationKey == 'name') {
|
||||
iconEdit = <Icon className="edit" onClick={this.onEdit} />;
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
key={id}
|
||||
|
|
@ -53,7 +65,10 @@ const BodyCell = observer(class BodyCell extends React.Component<Props> {
|
|||
onClick={(e: any) => { onCellClick(e, relation.relationKey, index); }}
|
||||
>
|
||||
<Cell
|
||||
ref={(ref: any) => { onRef(ref, id); }}
|
||||
ref={ref => {
|
||||
this.ref = ref;
|
||||
onRef(ref, id);
|
||||
}}
|
||||
{...this.props}
|
||||
subId={subId}
|
||||
relationKey={relation.relationKey}
|
||||
|
|
@ -62,10 +77,16 @@ const BodyCell = observer(class BodyCell extends React.Component<Props> {
|
|||
onCellChange={onCellChange}
|
||||
maxWidth={Constant.size.dataview.cell.edit}
|
||||
/>
|
||||
{iconEdit}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
onEdit (e: React.MouseEvent) {
|
||||
e.stopPropagation();
|
||||
this.ref.onClick(e);
|
||||
};
|
||||
|
||||
});
|
||||
|
||||
export default BodyCell;
|
||||
|
|
@ -32,7 +32,7 @@ const Row = observer(class Row extends React.Component<Props> {
|
|||
<Cell
|
||||
key={'list-cell-' + relation.relationKey}
|
||||
elementId={id}
|
||||
ref={(ref: any) => { onRef(ref, id); }}
|
||||
ref={ref => { onRef(ref, id); }}
|
||||
{...this.props}
|
||||
subId={subId}
|
||||
relationKey={relation.relationKey}
|
||||
|
|
|
|||
|
|
@ -142,7 +142,7 @@ const BlockFeatured = observer(class BlockFeatured extends React.Component<Props
|
|||
}}
|
||||
>
|
||||
<Cell
|
||||
ref={(ref: any) => { this.cellRefs.set(id, ref); }}
|
||||
ref={ref => this.cellRefs.set(id, ref)}
|
||||
elementId={id}
|
||||
rootId={rootId}
|
||||
subId={rootId}
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ const BlockIconPage = observer(class BlockIconPage extends React.Component<I.Blo
|
|||
<IconObject
|
||||
id={`block-icon-${rootId}`}
|
||||
canEdit={!readonly}
|
||||
getObject={() => { return detailStore.get(rootId, rootId, []); }}
|
||||
getObject={() => detailStore.get(rootId, rootId, [])}
|
||||
onSelect={this.onSelect}
|
||||
onUpload={this.onUpload}
|
||||
size={96}
|
||||
|
|
|
|||
|
|
@ -67,7 +67,7 @@ const BlockRelation = observer(class BlockRelation extends React.Component<I.Blo
|
|||
onClick={this.onCellClick}
|
||||
>
|
||||
<Cell
|
||||
ref={(ref: any) => { this.refCell = ref; }}
|
||||
ref={ref => { this.refCell = ref; }}
|
||||
rootId={rootId}
|
||||
subId={rootId}
|
||||
block={block}
|
||||
|
|
|
|||
|
|
@ -137,10 +137,11 @@ const BlockText = observer(class BlockText extends React.Component<Props> {
|
|||
id={'lang-' + id}
|
||||
arrowClassName="light"
|
||||
value={fields.lang}
|
||||
ref={(ref: any) => { this.refLang = ref; }}
|
||||
ref={ref => { this.refLang = ref; }}
|
||||
options={options}
|
||||
onChange={this.onLang}
|
||||
noFilter={false}
|
||||
readonly={readonly}
|
||||
/>
|
||||
<div className="buttons">
|
||||
<div className="btn" onClick={this.onToggleWrap}>
|
||||
|
|
@ -282,9 +283,10 @@ const BlockText = observer(class BlockText extends React.Component<Props> {
|
|||
} else {
|
||||
html = Mark.fromUnicode(html);
|
||||
html = Mark.toHtml(html, this.marks);
|
||||
html = html.replace(/\n/g, '<br/>');
|
||||
};
|
||||
|
||||
html = html.replace(/\n/g, '<br/>');
|
||||
|
||||
if (this.refEditable) {
|
||||
this.refEditable.setValue(html);
|
||||
};
|
||||
|
|
@ -846,7 +848,7 @@ const BlockText = observer(class BlockText extends React.Component<Props> {
|
|||
ret = true;
|
||||
});
|
||||
|
||||
if (!ret) {
|
||||
if (!ret && range) {
|
||||
const d = range.from - filter.from;
|
||||
if (d >= 0) {
|
||||
const part = value.substr(filter.from, d).replace(/^\//, '');
|
||||
|
|
|
|||
|
|
@ -52,7 +52,7 @@ const DragProvider = observer(class DragProvider extends React.Component<Props>
|
|||
onDragOver={this.onDragOver}
|
||||
onDrop={this.onDropCommon}
|
||||
>
|
||||
<DragLayer {...this.props} ref={(ref: any) => { this.refLayer = ref; }} />
|
||||
<DragLayer {...this.props} ref={ref => { this.refLayer = ref; }} />
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
|
|
@ -71,7 +71,16 @@ const DragProvider = observer(class DragProvider extends React.Component<Props>
|
|||
|
||||
this.objects.each((i: number, el: any) => {
|
||||
const item = $(el);
|
||||
const data = item.data();
|
||||
const data = {
|
||||
id: item.attr('data-id'),
|
||||
rootId: item.attr('data-root-id'),
|
||||
cacheKey: item.attr('data-cache-key'),
|
||||
dropType: item.attr('data-drop-type'),
|
||||
type: item.attr('data-type'),
|
||||
style: item.attr('data-style'),
|
||||
targetContextId: item.attr('data-target-context-id'),
|
||||
dropMiddle: item.attr('data-drop-middle'),
|
||||
};
|
||||
const offset = item.offset();
|
||||
const rect = el.getBoundingClientRect() as DOMRect;
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import { observer } from 'mobx-react';
|
|||
import { throttle } from 'lodash';
|
||||
import { Block, Icon, Loader, Deleted, DropTarget } from 'Component';
|
||||
import { commonStore, blockStore, detailStore, menuStore, popupStore } from 'Store';
|
||||
import { I, C, Key, Util, DataUtil, ObjectUtil, Preview, Mark, focus, keyboard, crumbs, Storage, Mapper, Action, translate, analytics, Renderer } from 'Lib';
|
||||
import { I, C, Key, Util, DataUtil, ObjectUtil, Preview, Mark, focus, keyboard, Storage, Mapper, Action, translate, analytics, Renderer } from 'Lib';
|
||||
import Controls from 'Component/page/head/controls';
|
||||
import PageHeadEdit from 'Component/page/head/edit';
|
||||
import Constant from 'json/constant.json';
|
||||
|
|
@ -96,7 +96,7 @@ const EditorPage = observer(class EditorPage extends React.Component<Props> {
|
|||
|
||||
<PageHeadEdit
|
||||
{...this.props}
|
||||
ref={(ref: any) => { this.refHeader = ref; }}
|
||||
ref={ref => { this.refHeader = ref; }}
|
||||
onKeyDown={this.onKeyDownBlock}
|
||||
onKeyUp={this.onKeyUpBlock}
|
||||
onMenuAdd={this.onMenuAdd}
|
||||
|
|
@ -225,19 +225,17 @@ const EditorPage = observer(class EditorPage extends React.Component<Props> {
|
|||
C.ObjectOpen(this.id, '', (message: any) => {
|
||||
if (message.error.code) {
|
||||
if (message.error.code == Errors.Code.ANYTYPE_NEEDS_UPGRADE) {
|
||||
Util.onErrorUpdate(() => { Util.route('/main/index'); });
|
||||
Util.onErrorUpdate(() => { ObjectUtil.openHome('route'); });
|
||||
} else
|
||||
if (message.error.code == Errors.Code.NOT_FOUND) {
|
||||
this.isDeleted = true;
|
||||
this.forceUpdate();
|
||||
} else {
|
||||
Util.route('/main/index');
|
||||
ObjectUtil.openHome('route');
|
||||
};
|
||||
return;
|
||||
};
|
||||
|
||||
crumbs.addRecent(rootId);
|
||||
|
||||
this.scrollTop = Storage.getScroll('editor' + (isPopup ? 'Popup' : ''), rootId);
|
||||
this.loading = false;
|
||||
this.focusTitle();
|
||||
|
|
@ -1709,8 +1707,6 @@ const EditorPage = observer(class EditorPage extends React.Component<Props> {
|
|||
const currentTo = range.to;
|
||||
const block = blockStore.getLeaf(rootId, focused);
|
||||
|
||||
|
||||
|
||||
if (!block) {
|
||||
return;
|
||||
};
|
||||
|
|
@ -1721,80 +1717,89 @@ const EditorPage = observer(class EditorPage extends React.Component<Props> {
|
|||
|
||||
const options: any[] = [
|
||||
{ id: 'link', name: 'Paste as link' },
|
||||
(isEmpty && !isInsideTable) ? { id: 'object', name: 'Create bookmark object' } : null,
|
||||
isEmpty && !isInsideTable ? { id: 'object', name: 'Create bookmark object' } : null,
|
||||
!isInsideTable ? { id: 'block', name: 'Create bookmark' } : null,
|
||||
{ id: 'cancel', name: 'Paste as text' },
|
||||
//{ id: 'embed', name: 'Paste as embed' },
|
||||
].filter(it => it);
|
||||
|
||||
menuStore.closeAll();
|
||||
|
||||
window.setTimeout(() => {
|
||||
menuStore.open('select', {
|
||||
element: `#block-${focused}`,
|
||||
offsetX: Constant.size.blockMenu,
|
||||
onOpen: () => {
|
||||
menuStore.open('select', {
|
||||
element: `#block-${focused}`,
|
||||
offsetX: Constant.size.blockMenu,
|
||||
onOpen: () => {
|
||||
if (block) {
|
||||
window.setTimeout(() => {
|
||||
focus.set(block.id, { from: currentFrom, to: currentTo });
|
||||
focus.apply();
|
||||
});
|
||||
};
|
||||
},
|
||||
data: {
|
||||
value: '',
|
||||
options,
|
||||
onSelect: (event: any, item: any) => {
|
||||
let value = block.content.text;
|
||||
let to = 0;
|
||||
let marks = Util.objectCopy(block.content.marks || []);
|
||||
|
||||
switch (item.id) {
|
||||
case 'link':
|
||||
if (currentFrom == currentTo) {
|
||||
value = Util.stringInsert(value, url + ' ', currentFrom, currentFrom);
|
||||
to = currentFrom + url.length;
|
||||
} else {
|
||||
to = currentTo;
|
||||
};
|
||||
|
||||
marks.push({
|
||||
type: I.MarkType.Link,
|
||||
range: { from: currentFrom, to },
|
||||
param: url,
|
||||
});
|
||||
|
||||
DataUtil.blockSetText(rootId, block.id, value, marks, true, () => {
|
||||
focus.set(block.id, { from: to + 1, to: to + 1 });
|
||||
focus.apply();
|
||||
});
|
||||
break;
|
||||
|
||||
case 'object':
|
||||
C.ObjectToBookmark(rootId, url, (message: any) => {
|
||||
if (message.error.code) {
|
||||
return;
|
||||
};
|
||||
|
||||
ObjectUtil.openRoute({ id: message.objectId, layout: I.ObjectLayout.Bookmark });
|
||||
|
||||
analytics.event('CreateObject', {
|
||||
objectType: Constant.typeId.bookmark,
|
||||
layout: I.ObjectLayout.Bookmark,
|
||||
template: '',
|
||||
});
|
||||
});
|
||||
break;
|
||||
|
||||
case 'block':
|
||||
C.BlockBookmarkCreateAndFetch(rootId, focused, length ? I.BlockPosition.Bottom : I.BlockPosition.Replace, url, (message: any) => {
|
||||
if (!message.error.code) {
|
||||
analytics.event('CreateBlock', { middleTime: message.middleTime, type: I.BlockType.Bookmark });
|
||||
};
|
||||
});
|
||||
break;
|
||||
|
||||
case 'cancel':
|
||||
value = Util.stringInsert(block.content.text, url + ' ', currentFrom, currentFrom);
|
||||
to = currentFrom + url.length;
|
||||
|
||||
DataUtil.blockSetText(rootId, block.id, value, marks, true, () => {
|
||||
focus.set(block.id, { from: to + 1, to: to + 1 });
|
||||
focus.apply();
|
||||
});
|
||||
break;
|
||||
};
|
||||
},
|
||||
data: {
|
||||
value: '',
|
||||
options,
|
||||
onSelect: (event: any, item: any) => {
|
||||
let value = block.content.text;
|
||||
let to = range.from + url.length;
|
||||
let marks = Util.objectCopy(block.content.marks || []);
|
||||
|
||||
switch (item.id) {
|
||||
case 'link':
|
||||
value = Util.stringInsert(value, url + ' ', range.from, range.from);
|
||||
marks.push({ type: I.MarkType.Link, range: { from: range.from, to }, param: url });
|
||||
|
||||
DataUtil.blockSetText(rootId, block.id, value, marks, true, () => {
|
||||
focus.set(block.id, { from: to + 1, to: to + 1 });
|
||||
focus.apply();
|
||||
});
|
||||
break;
|
||||
|
||||
case 'object':
|
||||
C.ObjectToBookmark(rootId, url, (message: any) => {
|
||||
if (message.error.code) {
|
||||
return;
|
||||
};
|
||||
|
||||
ObjectUtil.openRoute({ id: message.objectId, layout: I.ObjectLayout.Bookmark });
|
||||
|
||||
analytics.event('CreateObject', {
|
||||
objectType: Constant.typeId.bookmark,
|
||||
layout: I.ObjectLayout.Bookmark,
|
||||
template: '',
|
||||
});
|
||||
});
|
||||
break;
|
||||
|
||||
case 'block':
|
||||
C.BlockBookmarkCreateAndFetch(rootId, focused, length ? I.BlockPosition.Bottom : I.BlockPosition.Replace, url, (message: any) => {
|
||||
if (!message.error.code) {
|
||||
analytics.event('CreateBlock', { middleTime: message.middleTime, type: I.BlockType.Bookmark });
|
||||
};
|
||||
});
|
||||
break;
|
||||
|
||||
case 'cancel':
|
||||
value = Util.stringInsert(block.content.text, url + ' ', range.from, range.from);
|
||||
|
||||
DataUtil.blockSetText(rootId, block.id, value, marks, true, () => {
|
||||
focus.set(block.id, { from: to + 1, to: to + 1 });
|
||||
focus.apply();
|
||||
});
|
||||
break;
|
||||
};
|
||||
},
|
||||
}
|
||||
});
|
||||
}, Constant.delay.menu);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
getClipboardData (e: any) {
|
||||
|
|
|
|||
|
|
@ -1,10 +1,12 @@
|
|||
import * as React from 'react';
|
||||
import { I, sidebar } from 'Lib';
|
||||
import { ObjectUtil, I, sidebar } from 'Lib';
|
||||
import { menuStore } from 'Store';
|
||||
|
||||
import FooterAuthIndex from './auth';
|
||||
import FooterMainIndex from './main/index';
|
||||
import FooterMainIndex from './main';
|
||||
import FooterMainEdit from './main/edit';
|
||||
import FooterMainGraph from './main/graph';
|
||||
import FooterMainNavigation from './main/navigation';
|
||||
|
||||
interface Props extends I.FooterComponent {
|
||||
component: string;
|
||||
|
|
@ -14,6 +16,8 @@ const Components = {
|
|||
authIndex: FooterAuthIndex,
|
||||
mainIndex: FooterMainIndex,
|
||||
mainEdit: FooterMainEdit,
|
||||
mainGraph: FooterMainGraph,
|
||||
mainNavigation: FooterMainNavigation,
|
||||
};
|
||||
|
||||
class Footer extends React.Component<Props> {
|
||||
|
|
@ -23,6 +27,7 @@ class Footer extends React.Component<Props> {
|
|||
constructor (props: Props) {
|
||||
super(props);
|
||||
|
||||
this.onAdd = this.onAdd.bind(this);
|
||||
this.onHelp = this.onHelp.bind(this);
|
||||
};
|
||||
|
||||
|
|
@ -34,9 +39,10 @@ class Footer extends React.Component<Props> {
|
|||
return (
|
||||
<div id="footer" className={cn.join(' ')}>
|
||||
<Component
|
||||
ref={(ref: any) => this.refChild = ref}
|
||||
ref={ref => this.refChild = ref}
|
||||
{...this.props}
|
||||
onHelp={this.onHelp}
|
||||
onAdd={this.onAdd}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -51,6 +57,12 @@ class Footer extends React.Component<Props> {
|
|||
this.refChild.forceUpdate();
|
||||
};
|
||||
|
||||
onAdd () {
|
||||
ObjectUtil.create('', '', {}, I.BlockPosition.Bottom, '', {}, [ I.ObjectFlag.DeleteEmpty, I.ObjectFlag.SelectType ], (message: any) => {
|
||||
ObjectUtil.openPopup({ id: message.targetId });
|
||||
});
|
||||
};
|
||||
|
||||
onHelp () {
|
||||
menuStore.open('help', {
|
||||
element: '#button-help',
|
||||
|
|
|
|||
|
|
@ -1,23 +1,21 @@
|
|||
import * as React from 'react';
|
||||
import { Icon } from 'Component';
|
||||
import { I, sidebar } from 'Lib';
|
||||
import { observer } from 'mobx-react';
|
||||
import { I } from 'Lib';
|
||||
|
||||
const FooterMainEdit = observer(class FooterMainEdit extends React.Component<I.FooterComponent> {
|
||||
const FooterMainEdit = class FooterMainEdit extends React.Component<I.FooterComponent> {
|
||||
|
||||
render () {
|
||||
const { onHelp } = this.props;
|
||||
const { onHelp, onAdd } = this.props;
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<Icon
|
||||
id="button-expand"
|
||||
className="big expand"
|
||||
tooltip="Show sidebar"
|
||||
<Icon
|
||||
id="button-add"
|
||||
className="big"
|
||||
tooltip="Add new object"
|
||||
tooltipY={I.MenuDirection.Top}
|
||||
onClick={() => { sidebar.expand(); }}
|
||||
onClick={onAdd}
|
||||
/>
|
||||
|
||||
<Icon
|
||||
id="button-help"
|
||||
className="big help"
|
||||
|
|
@ -29,6 +27,6 @@ const FooterMainEdit = observer(class FooterMainEdit extends React.Component<I.F
|
|||
);
|
||||
};
|
||||
|
||||
});
|
||||
};
|
||||
|
||||
export default FooterMainEdit;
|
||||
25
src/ts/component/footer/main/graph.tsx
Normal file
25
src/ts/component/footer/main/graph.tsx
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
import * as React from 'react';
|
||||
import { Icon } from 'Component';
|
||||
import { I } from 'Lib';
|
||||
|
||||
class FooterMainGraph extends React.Component<I.FooterComponent> {
|
||||
|
||||
render () {
|
||||
const { onAdd } = this.props;
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<Icon
|
||||
id="button-add"
|
||||
className="big"
|
||||
tooltip="Add new object"
|
||||
tooltipY={I.MenuDirection.Top}
|
||||
onClick={onAdd}
|
||||
/>
|
||||
</React.Fragment>
|
||||
);
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
export default FooterMainGraph;
|
||||
|
|
@ -8,7 +8,13 @@ class FooterMainIndex extends React.Component<I.FooterComponent> {
|
|||
const { onHelp } = this.props;
|
||||
|
||||
return (
|
||||
<Icon id="button-help" className="help big" tooltip="Help" tooltipY={I.MenuDirection.Top} onClick={onHelp} />
|
||||
<Icon
|
||||
id="button-help"
|
||||
className="help big light"
|
||||
tooltip="Help"
|
||||
tooltipY={I.MenuDirection.Top}
|
||||
onClick={onHelp}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
27
src/ts/component/footer/main/navigation.tsx
Normal file
27
src/ts/component/footer/main/navigation.tsx
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
import * as React from 'react';
|
||||
import { Icon } from 'Component';
|
||||
import { I } from 'Lib';
|
||||
|
||||
interface Props extends I.FooterComponent {};
|
||||
|
||||
class FooterMainNavigation extends React.Component<Props, {}> {
|
||||
|
||||
render () {
|
||||
const { onAdd } = this.props;
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<Icon
|
||||
id="button-add"
|
||||
className="big"
|
||||
tooltip="Add new object"
|
||||
tooltipY={I.MenuDirection.Top}
|
||||
onClick={onAdd}
|
||||
/>
|
||||
</React.Fragment>
|
||||
);
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
export default FooterMainNavigation;
|
||||
|
|
@ -9,6 +9,7 @@ import HeaderMainHistory from './main/history';
|
|||
import HeaderMainGraph from './main/graph';
|
||||
import HeaderMainNavigation from './main/navigation';
|
||||
import HeaderMainStore from './main/store';
|
||||
import HeaderMainEmpty from './main/empty';
|
||||
|
||||
interface Props extends I.HeaderComponent {
|
||||
component: string;
|
||||
|
|
@ -22,6 +23,7 @@ const Components = {
|
|||
mainGraph: HeaderMainGraph,
|
||||
mainNavigation: HeaderMainNavigation,
|
||||
mainStore: HeaderMainStore,
|
||||
mainEmpty: HeaderMainEmpty,
|
||||
};
|
||||
|
||||
class Header extends React.Component<Props> {
|
||||
|
|
@ -31,7 +33,6 @@ class Header extends React.Component<Props> {
|
|||
constructor (props: Props) {
|
||||
super(props);
|
||||
|
||||
this.onHome = this.onHome.bind(this);
|
||||
this.onSearch = this.onSearch.bind(this);
|
||||
this.onNavigation = this.onNavigation.bind(this);
|
||||
this.onGraph = this.onGraph.bind(this);
|
||||
|
|
@ -46,16 +47,15 @@ class Header extends React.Component<Props> {
|
|||
const Component = Components[component] || null;
|
||||
const cn = [ 'header', component ];
|
||||
|
||||
if ([ 'mainEdit', 'mainNavigation', 'mainGraph', 'mainStore', 'mainHistory' ].includes(component)) {
|
||||
if (![ 'authIndex', 'mainIndex' ].includes(component)) {
|
||||
cn.push('isCommon');
|
||||
};
|
||||
|
||||
return (
|
||||
<div id="header" className={cn.join(' ')}>
|
||||
<Component
|
||||
ref={(ref: any) => this.refChild = ref}
|
||||
ref={ref => this.refChild = ref}
|
||||
{...this.props}
|
||||
onHome={this.onHome}
|
||||
onBack={() => { keyboard.onBack(); }}
|
||||
onForward={() => { keyboard.onForward(); }}
|
||||
onSearch={this.onSearch}
|
||||
|
|
@ -79,10 +79,6 @@ class Header extends React.Component<Props> {
|
|||
this.refChild.forceUpdate();
|
||||
};
|
||||
|
||||
onHome () {
|
||||
Util.route('/main/index');
|
||||
};
|
||||
|
||||
onSearch () {
|
||||
keyboard.onSearchPopup();
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
import * as React from 'react';
|
||||
import { observer } from 'mobx-react';
|
||||
import { Icon, IconObject, Sync, ObjectName } from 'Component';
|
||||
import { I, DataUtil, ObjectUtil, keyboard } from 'Lib';
|
||||
import { blockStore, detailStore, popupStore } from 'Store';
|
||||
import { I, DataUtil, ObjectUtil, keyboard, sidebar } from 'Lib';
|
||||
import { blockStore, detailStore, popupStore, commonStore } from 'Store';
|
||||
import Constant from 'json/constant.json';
|
||||
|
||||
const HeaderMainEdit = observer(class HeaderMainEdit extends React.Component<I.HeaderComponent> {
|
||||
|
|
@ -16,7 +16,7 @@ const HeaderMainEdit = observer(class HeaderMainEdit extends React.Component<I.H
|
|||
};
|
||||
|
||||
render () {
|
||||
const { rootId, onHome, onForward, onBack, onGraph, onSearch, onTooltipShow, onTooltipHide } = this.props;
|
||||
const { rootId, onForward, onBack, onGraph, onSearch, onTooltipShow, onTooltipHide } = this.props;
|
||||
const root = blockStore.getLeaf(rootId, rootId);
|
||||
|
||||
if (!root) {
|
||||
|
|
@ -32,7 +32,7 @@ const HeaderMainEdit = observer(class HeaderMainEdit extends React.Component<I.H
|
|||
<React.Fragment>
|
||||
<div className="side left">
|
||||
<Icon className="expand big" tooltip="Open as object" onClick={this.onOpen} />
|
||||
<Icon className="home big" tooltip="Home" onClick={onHome} />
|
||||
<Icon className="toggleSidebar big" tooltip="Sidebar" onClick={() => sidebar.expand()} />
|
||||
<Icon className={[ 'back', 'big', (!keyboard.checkBack() ? 'disabled' : '') ].join(' ')} tooltip="Back" onClick={onBack} />
|
||||
<Icon className={[ 'forward', 'big', (!keyboard.checkForward() ? 'disabled' : '') ].join(' ')} tooltip="Forward" onClick={onForward} />
|
||||
|
||||
|
|
@ -110,7 +110,7 @@ const HeaderMainEdit = observer(class HeaderMainEdit extends React.Component<I.H
|
|||
const { rootId, isPopup } = this.props;
|
||||
|
||||
if (!isPopup) {
|
||||
DataUtil.setWindowTitle(rootId);
|
||||
DataUtil.setWindowTitle(rootId, rootId);
|
||||
};
|
||||
};
|
||||
|
||||
|
|
|
|||
59
src/ts/component/header/main/empty.tsx
Normal file
59
src/ts/component/header/main/empty.tsx
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
import * as React from 'react';
|
||||
import { observer } from 'mobx-react';
|
||||
import { Icon } from 'Component';
|
||||
import { I, ObjectUtil, keyboard, sidebar } from 'Lib';
|
||||
import { popupStore } from 'Store';
|
||||
|
||||
interface Props extends I.HeaderComponent {
|
||||
text: string;
|
||||
layout: I.ObjectLayout;
|
||||
};
|
||||
|
||||
const HeaderMainEmpty = observer(class HeaderMainEmpty extends React.Component<Props, {}> {
|
||||
|
||||
constructor (props: Props) {
|
||||
super(props);
|
||||
|
||||
this.onOpen = this.onOpen.bind(this);
|
||||
};
|
||||
|
||||
render () {
|
||||
const { text, onSearch, onForward, onBack, onTooltipShow, onTooltipHide } = this.props;
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<div className="side left">
|
||||
<Icon className="expand big" tooltip="Open as object" onClick={this.onOpen} />
|
||||
<Icon className="toggleSidebar big" tooltip="Sidebar" onClick={() => sidebar.expand()} />
|
||||
<Icon className={[ 'back', 'big', (!keyboard.checkBack() ? 'disabled' : '') ].join(' ')} tooltip="Back" onClick={onBack} />
|
||||
<Icon className={[ 'forward', 'big', (!keyboard.checkForward() ? 'disabled' : '') ].join(' ')} tooltip="Forward" onClick={onForward} />
|
||||
</div>
|
||||
|
||||
<div className="side center">
|
||||
<div
|
||||
id="path"
|
||||
className="path"
|
||||
onClick={onSearch}
|
||||
onMouseOver={e => onTooltipShow(e, 'Click to search')}
|
||||
onMouseOut={onTooltipHide}
|
||||
>
|
||||
<div className="inner">
|
||||
<div className="name">{text}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="side right" />
|
||||
</React.Fragment>
|
||||
);
|
||||
};
|
||||
|
||||
onOpen () {
|
||||
popupStore.closeAll(null, () => {
|
||||
ObjectUtil.openRoute({ layout: this.props.layout });
|
||||
});
|
||||
};
|
||||
|
||||
});
|
||||
|
||||
export default HeaderMainEmpty;
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
import * as React from 'react';
|
||||
import { Icon } from 'Component';
|
||||
import { I, keyboard, DataUtil, ObjectUtil } from 'Lib';
|
||||
import { commonStore, menuStore } from 'Store';
|
||||
import { I, ObjectUtil, DataUtil, keyboard, sidebar } from 'Lib';
|
||||
import { detailStore, commonStore, menuStore } from 'Store';
|
||||
|
||||
class HeaderMainGraph extends React.Component<I.HeaderComponent> {
|
||||
|
||||
|
|
@ -18,13 +18,13 @@ class HeaderMainGraph extends React.Component<I.HeaderComponent> {
|
|||
};
|
||||
|
||||
render () {
|
||||
const { onHome, onForward, onBack, tab, tabs, onTab, onTooltipShow, onTooltipHide } = this.props;
|
||||
const { onForward, onBack, tab, tabs, onTab, onTooltipShow, onTooltipHide } = this.props;
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<div className="side left">
|
||||
<Icon className="expand big" tooltip="Open as object" onClick={this.onOpen} />
|
||||
<Icon className="home big" tooltip="Home" onClick={onHome} />
|
||||
<Icon className="toggleSidebar big" tooltip="Sidebar" onClick={() => sidebar.expand()} />
|
||||
<Icon className={[ 'back', 'big', (!keyboard.checkBack() ? 'disabled' : '') ].join(' ')} tooltip="Back" onClick={onBack} />
|
||||
<Icon className={[ 'forward', 'big', (!keyboard.checkForward() ? 'disabled' : '') ].join(' ')} tooltip="Forward" onClick={onForward} />
|
||||
</div>
|
||||
|
|
@ -55,13 +55,7 @@ class HeaderMainGraph extends React.Component<I.HeaderComponent> {
|
|||
};
|
||||
|
||||
componentDidMount(): void {
|
||||
const { isPopup, rootId } = this.props;
|
||||
|
||||
if (!isPopup) {
|
||||
DataUtil.setWindowTitleText('Graph');
|
||||
};
|
||||
|
||||
this.rootId = rootId;
|
||||
this.rootId = this.props.rootId;
|
||||
};
|
||||
|
||||
onOpen () {
|
||||
|
|
|
|||
|
|
@ -34,10 +34,6 @@ const HeaderMainIndex = observer(class HeaderMainIndex extends React.Component<I
|
|||
popupStore.open('settings', {});
|
||||
};
|
||||
|
||||
componentDidMount () {
|
||||
DataUtil.setWindowTitleText('Dashboard');
|
||||
};
|
||||
|
||||
});
|
||||
|
||||
export default HeaderMainIndex;
|
||||
|
|
@ -1,9 +1,9 @@
|
|||
import * as React from 'react';
|
||||
import { Icon } from 'Component';
|
||||
import { I, keyboard, DataUtil, ObjectUtil } from 'Lib';
|
||||
import { observer } from 'mobx-react';
|
||||
import { Icon } from 'Component';
|
||||
import { I, keyboard, ObjectUtil, sidebar } from 'Lib';
|
||||
|
||||
const HeaderMainNavigation = observer(class HeaderMainNavigation extends React.Component<I.HeaderComponent> {
|
||||
const HeaderMainNavigation = observer(class HeaderMainNavigation extends React.Component<I.HeaderComponent, object> {
|
||||
|
||||
constructor (props: I.HeaderComponent) {
|
||||
super(props);
|
||||
|
|
@ -12,13 +12,13 @@ const HeaderMainNavigation = observer(class HeaderMainNavigation extends React.C
|
|||
};
|
||||
|
||||
render () {
|
||||
const { onHome, onForward, onBack, tabs, tab, onTab, onTooltipShow, onTooltipHide } = this.props;
|
||||
const { onForward, onBack, tabs, tab, onTab, onTooltipShow, onTooltipHide } = this.props;
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<div className="side left">
|
||||
<Icon className="expand big" tooltip="Open as object" onClick={this.onOpen} />
|
||||
<Icon className="home big" tooltip="Home" onClick={onHome} />
|
||||
<Icon className="toggleSidebar big" tooltip="Sidebar" onClick={() => sidebar.expand()} />
|
||||
<Icon className={[ 'back', 'big', (!keyboard.checkBack() ? 'disabled' : '') ].join(' ')} tooltip="Back" onClick={onBack} />
|
||||
<Icon className={[ 'forward', 'big', (!keyboard.checkForward() ? 'disabled' : '') ].join(' ')} tooltip="Forward" onClick={onForward} />
|
||||
</div>
|
||||
|
|
@ -44,12 +44,6 @@ const HeaderMainNavigation = observer(class HeaderMainNavigation extends React.C
|
|||
);
|
||||
};
|
||||
|
||||
componentDidMount(): void {
|
||||
if (!this.props.isPopup) {
|
||||
DataUtil.setWindowTitleText('Navigation');
|
||||
};
|
||||
};
|
||||
|
||||
onOpen () {
|
||||
ObjectUtil.openRoute({ rootId: this.props.rootId, layout: I.ObjectLayout.Navigation });
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
import * as React from 'react';
|
||||
import { Icon } from 'Component';
|
||||
import { I, keyboard, DataUtil, ObjectUtil } from 'Lib';
|
||||
import { observer } from 'mobx-react';
|
||||
import { Icon } from 'Component';
|
||||
import { I, keyboard, sidebar, ObjectUtil } from 'Lib';
|
||||
|
||||
const HeaderMainStore = observer(class HeaderMainStore extends React.Component<I.HeaderComponent> {
|
||||
const HeaderMainStore = observer(class HeaderMainStore extends React.Component<I.HeaderComponent, object> {
|
||||
|
||||
constructor (props: I.HeaderComponent) {
|
||||
super(props);
|
||||
|
|
@ -12,13 +12,13 @@ const HeaderMainStore = observer(class HeaderMainStore extends React.Component<I
|
|||
};
|
||||
|
||||
render () {
|
||||
const { tabs, tab, onTab, onHome, onForward, onBack } = this.props;
|
||||
const { tabs, tab, onTab, onForward, onBack, onTooltipShow, onTooltipHide } = this.props;
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<div className="side left">
|
||||
<Icon className="expand big" tooltip="Open as object" onClick={this.onOpen} />
|
||||
<Icon className="home big" tooltip="Home" onClick={onHome} />
|
||||
<Icon className="toggleSidebar big" tooltip="Sidebar" onClick={() => sidebar.expand()} />
|
||||
<Icon className={[ 'back', 'big', (!keyboard.checkBack() ? 'disabled' : '') ].join(' ')} tooltip="Back" onClick={onBack} />
|
||||
<Icon className={[ 'forward', 'big', (!keyboard.checkForward() ? 'disabled' : '') ].join(' ')} tooltip="Forward" onClick={onForward} />
|
||||
</div>
|
||||
|
|
@ -26,7 +26,13 @@ const HeaderMainStore = observer(class HeaderMainStore extends React.Component<I
|
|||
<div className="side center">
|
||||
<div id="tabs" className="tabs">
|
||||
{tabs.map((item: any) => (
|
||||
<div key={`tab-store-${item.id}`} className={[ 'tab', (item.id == tab ? 'active' : '') ].join(' ')} onClick={() => { onTab(item.id); }}>
|
||||
<div
|
||||
key={`tab-store-${item.id}`}
|
||||
className={[ 'tab', (item.id == tab ? 'active' : '') ].join(' ')}
|
||||
onClick={() => { onTab(item.id); }}
|
||||
onMouseOver={e => onTooltipShow(e, item.tooltip)}
|
||||
onMouseOut={onTooltipHide}
|
||||
>
|
||||
{item.name}
|
||||
</div>
|
||||
))}
|
||||
|
|
@ -38,12 +44,6 @@ const HeaderMainStore = observer(class HeaderMainStore extends React.Component<I
|
|||
);
|
||||
};
|
||||
|
||||
componentDidMount(): void {
|
||||
if (!this.props.isPopup) {
|
||||
DataUtil.setWindowTitleText('Library');
|
||||
};
|
||||
};
|
||||
|
||||
onOpen () {
|
||||
ObjectUtil.openRoute({ layout: I.ObjectLayout.Store });
|
||||
};
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue