mirror of
https://github.com/anyproto/anytype-ts.git
synced 2025-06-10 18:10:54 +09:00
Feature/JS-1513: Settings (#1509)
* patch * JS-510: add to collection menu item * JS-510: objectOrderUpdate and applyObjectOrder methods at dataview level * JS-510: cleanup * JS-510: isCollection method at dataview level * JS-510: styles cleanup * JS-510: stash * JS-510: dnd sorting refactoring * JS-510: cleanup * JS-510: state * fix middle position dnd * dragndrop different cases refactoring * JS-510: dnd icon in collection grid row * JS-1457: DragLayer refactoring * do not parse markdown if style is the same * JS-510: onDrop refactoring * JS-510: basic row sorting in collection grid * JS-510: stash * JS-510: getData method renamed to loadData * JS-510: getRecords method * JS-510: cleanup * JS-510: dnd sorting in list view * JS-510: dnd sorting in gallery view * JS-510: case Record in drag layer * JS-510: onRecordDrop arguments types * JS-510: grid column size fix * JS-1482: dragProvider refactoring * JS-1482: dragProvider refactoring * fix drop positions for datatransfer drag * JS-1509: fix * JS-1509: fix * styles refactoringg * refactoring * small refactoringg * body and controls removed on drag of inline set * new settings design * new settings design * new settings design * isCollection classname selector * dragLayer clone style fix * revert auth pages * revert auth pages * JS-1512: ScreenCollection, AddView, SwitchView events * revert auth pages * JS-1512: analytics * remove type from AddSort event * collections widget title * refactoring * getSources fix * JS-1525: Update buttons design * JS-1525: Update buttons design * fix cellId * new settings design * settings update * new colors * graph as home object * import pages * customize pages * new settings design * fix dark mode * JS-1558: add Text import * JS-1513: design review * fonts * fonts * font fixes --------- Co-authored-by: Mike Mhlv <mhlv@anytype.io>
This commit is contained in:
Razor
parent
44e5612ba4
commit
c3dc2c6207
GPG key ID:
4AEE18F83AFDEB23
85 changed files with 751 additions and 1062 deletions
BIN
dist/font/inter/bold.ttf
vendored
BIN
dist/font/inter/bold.ttf
vendored
Binary file not shown.
BIN
dist/font/inter/bold.woff
vendored
Normal file
BIN
dist/font/inter/bold.woff
vendored
Normal file
Binary file not shown.
BIN
dist/font/inter/boldItalic.woff
vendored
Normal file
BIN
dist/font/inter/boldItalic.woff
vendored
Normal file
Binary file not shown.
BIN
dist/font/inter/bolditalic.ttf
vendored
BIN
dist/font/inter/bolditalic.ttf
vendored
Binary file not shown.
BIN
dist/font/inter/extrabold.ttf
vendored
BIN
dist/font/inter/extrabold.ttf
vendored
Binary file not shown.
BIN
dist/font/inter/italic.ttf
vendored
BIN
dist/font/inter/italic.ttf
vendored
Binary file not shown.
BIN
dist/font/inter/italic.woff
vendored
Normal file
BIN
dist/font/inter/italic.woff
vendored
Normal file
Binary file not shown.
BIN
dist/font/inter/medium.ttf
vendored
BIN
dist/font/inter/medium.ttf
vendored
Binary file not shown.
BIN
dist/font/inter/medium.woff
vendored
Normal file
BIN
dist/font/inter/medium.woff
vendored
Normal file
Binary file not shown.
BIN
dist/font/inter/mediumitalic.ttf
vendored
BIN
dist/font/inter/mediumitalic.ttf
vendored
Binary file not shown.
BIN
dist/font/inter/mediumitalic.woff
vendored
Normal file
BIN
dist/font/inter/mediumitalic.woff
vendored
Normal file
Binary file not shown.
BIN
dist/font/inter/regular.ttf
vendored
BIN
dist/font/inter/regular.ttf
vendored
Binary file not shown.
BIN
dist/font/inter/regular.woff
vendored
Normal file
BIN
dist/font/inter/regular.woff
vendored
Normal file
Binary file not shown.
BIN
dist/font/inter/semibold.woff
vendored
Normal file
BIN
dist/font/inter/semibold.woff
vendored
Normal file
Binary file not shown.
BIN
dist/font/inter/semibolditalic.woff
vendored
Normal file
BIN
dist/font/inter/semibolditalic.woff
vendored
Normal file
Binary file not shown.
|
|
@ -1,5 +0,0 @@
|
|||
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="28" height="28" rx="6" fill="#2AA7EE"/>
|
||||
<ellipse cx="13.9707" cy="9.5" rx="3.5" ry="4" fill="white"/>
|
||||
<path d="M6.9707 20C6.9707 17.2386 9.20928 15 11.9707 15H15.9707C18.7321 15 20.9707 17.2386 20.9707 20V21C20.9707 21.5523 20.523 22 19.9707 22H7.9707C7.41842 22 6.9707 21.5523 6.9707 21V20Z" fill="white"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 424 B |
|
|
@ -1,6 +1,6 @@
|
|||
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="28" height="28" rx="6" fill="#F55522"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M19 11.5C19 10.1193 17.8807 9 16.5 9H11.5C10.2905 9 9.28162 9.85888 9.04999 11H13.5C15.433 11 17 12.567 17 14.5V18.95C18.1411 18.7184 19 17.7095 19 16.5V11.5Z" fill="white"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M21.9998 8.5C21.9998 7.11929 20.8805 6 19.4998 6H14.4998C13.2903 6 12.2814 6.85888 12.0498 8H16.4998C18.4328 8 19.9998 9.567 19.9998 11.5V15.95C21.1409 15.7184 21.9998 14.7095 21.9998 13.5V8.5Z" fill="white"/>
|
||||
<rect x="16.5" y="11.5" width="11" height="11" rx="3" transform="rotate(90 16.5 11.5)" fill="white" stroke="#F55522"/>
|
||||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="22" height="22" rx="4" fill="#F55522"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.9288 9.57056C14.9288 8.18984 13.8095 7.07056 12.4288 7.07056H9.57163C8.51729 7.07056 7.6154 7.72322 7.24792 8.64658C7.30782 8.64353 7.36812 8.64199 7.42877 8.64199H9.85734C11.7903 8.64199 13.3573 10.209 13.3573 12.142V14.5706C13.3573 14.6312 13.3558 14.6915 13.3527 14.7514C14.2761 14.3839 14.9288 13.482 14.9288 12.4277V9.57056Z" fill="white"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.2856 7.21375C17.2856 5.83303 16.1664 4.71375 14.7856 4.71375H11.9285C10.8742 4.71375 9.97227 5.36641 9.6048 6.28977C9.66469 6.28672 9.72499 6.28517 9.78564 6.28517H12.2142C14.1472 6.28517 15.7142 7.85218 15.7142 9.78517V12.2137C15.7142 12.2744 15.7127 12.3347 15.7096 12.3946C16.633 12.0271 17.2856 11.1252 17.2856 10.0709V7.21375Z" fill="white"/>
|
||||
<rect x="13.0714" y="8.92859" width="8.85714" height="8.85714" rx="3" transform="rotate(90 13.0714 8.92859)" fill="white" stroke="#F55522"/>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 758 B After Width: | Height: | Size: 1.1 KiB |
3
src/img/icon/popup/settings/back.svg
Normal file
3
src/img/icon/popup/settings/back.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5 1L2 4L5 7" stroke="#949494" stroke-width="1.1" stroke-linecap="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 182 B |
|
|
@ -1,3 +0,0 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.7071 4.29289C14.3166 3.90237 13.6834 3.90237 13.2929 4.29289L5.58579 12L13.2929 19.7071C13.6834 20.0976 14.3166 20.0976 14.7071 19.7071C15.0976 19.3166 15.0976 18.6834 14.7071 18.2929L8.41421 12L14.7071 5.70711C15.0976 5.31658 15.0976 4.68342 14.7071 4.29289Z" fill="#ACA996"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 434 B |
|
|
@ -1,3 +0,0 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.7071 4.29289C14.3166 3.90237 13.6834 3.90237 13.2929 4.29289L5.58579 12L13.2929 19.7071C13.6834 20.0976 14.3166 20.0976 14.7071 19.7071C15.0976 19.3166 15.0976 18.6834 14.7071 18.2929L8.41421 12L14.7071 5.70711C15.0976 5.31658 15.0976 4.68342 14.7071 4.29289Z" fill="#2c2b27"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 435 B |
4
src/img/icon/popup/settings/cloud.svg
Normal file
4
src/img/icon/popup/settings/cloud.svg
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="22" height="22" rx="4" fill="#3E58EB"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.66665 15H15.6666C16.9553 15 18 13.9554 18 12.6666C18 11.378 16.9554 10.3334 15.6666 10.3334C15.4827 10.3334 15.3334 10.184 15.3334 9.99999C15.3334 8.34431 13.989 7 12.3334 7C11.0527 7 9.95805 7.80434 9.52802 8.93505C9.46362 9.10403 9.27668 9.19097 9.10602 9.13104C8.86428 9.04599 8.60402 9.00001 8.33336 9.00001C7.04565 9.00001 6 10.0457 6 11.3334C6 11.5173 5.85066 11.6666 5.66663 11.6666C4.74631 11.6666 4 12.4129 4 13.3334C4 14.2537 4.74631 15 5.66663 15L5.66665 15Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 694 B |
|
|
@ -1,5 +1,5 @@
|
|||
<svg width="29" height="28" viewBox="0 0 29 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="28" height="28" rx="6" transform="matrix(1 0 0 -1 0.887695 28)" fill="#ECD91B"/>
|
||||
<circle r="9" transform="matrix(1 0 0 -1 14.8877 14)" fill="white"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.6377 19C15.6377 19.4142 15.3019 19.75 14.8877 19.75C14.4735 19.75 14.1377 19.4142 14.1377 19V10.8107L10.418 14.5303C10.1251 14.8232 9.65025 14.8232 9.35736 14.5303C9.06446 14.2374 9.06446 13.7626 9.35736 13.4697L14.8877 7.93934L20.418 13.4697C20.7109 13.7626 20.7109 14.2374 20.418 14.5303C20.1251 14.8232 19.6503 14.8232 19.3574 14.5303L15.6377 10.8107V19Z" fill="#ECD91B"/>
|
||||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="22" height="22" rx="4" transform="matrix(1 0 0 -1 0 22)" fill="#ECD91B"/>
|
||||
<circle cx="7.07143" cy="7.07143" r="7.07143" transform="matrix(1 0 0 -1 3.92856 18.0714)" fill="white"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.5893 14.9285C11.5893 15.254 11.3255 15.5178 11 15.5178C10.6746 15.5178 10.4107 15.254 10.4107 14.9285V8.49406L7.48812 11.4167C7.25799 11.6468 6.88488 11.6468 6.65475 11.4167C6.42461 11.1865 6.42461 10.8134 6.65475 10.5833L10.5829 6.6551C10.5832 6.65484 10.5834 6.65458 10.5837 6.65431L11 6.23802L11.4159 6.65394C11.4164 6.65445 11.4169 6.65496 11.4175 6.65547L15.3453 10.5833C15.5754 10.8134 15.5754 11.1865 15.3453 11.4167C15.1151 11.6468 14.742 11.6468 14.5119 11.4167L11.5893 8.49406V14.9285Z" fill="#ECD91B"/>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 695 B After Width: | Height: | Size: 863 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 width="28" height="28" rx="6" fill="#FFB522"/>
|
||||
<circle cx="14" cy="14" r="9" fill="white"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.75 9C14.75 8.58579 14.4142 8.25 14 8.25C13.5858 8.25 13.25 8.58579 13.25 9V17.1893L9.53033 13.4697C9.23744 13.1768 8.76256 13.1768 8.46967 13.4697C8.17678 13.7626 8.17678 14.2374 8.46967 14.5303L14 20.0607L19.5303 14.5303C19.8232 14.2374 19.8232 13.7626 19.5303 13.4697C19.2374 13.1768 18.7626 13.1768 18.4697 13.4697L14.75 17.1893V9Z" fill="#FFB522"/>
|
||||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="22" height="22" rx="4" fill="#FFB522"/>
|
||||
<circle cx="11" cy="11" r="7.07143" fill="white"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.5893 7.07146C11.5893 6.74601 11.3255 6.48218 11 6.48218C10.6746 6.48218 10.4107 6.74601 10.4107 7.07146V13.5059L7.48812 10.5833C7.25799 10.3532 6.88488 10.3532 6.65475 10.5833C6.42461 10.8135 6.42461 11.1866 6.65475 11.4167L10.5829 15.3449C10.5832 15.3452 10.5834 15.3454 10.5837 15.3457L11 15.762L11.4159 15.3461C11.4164 15.3455 11.4169 15.345 11.4175 15.3445L15.3453 11.4167C15.5754 11.1866 15.5754 10.8135 15.3453 10.5833C15.1151 10.3532 14.742 10.3532 14.5119 10.5833L11.5893 13.5059V7.07146Z" fill="#FFB522"/>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 607 B After Width: | Height: | Size: 775 B |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 10 KiB |
|
|
@ -1,9 +1,9 @@
|
|||
<svg width="29" height="28" viewBox="0 0 29 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="0.970703" width="28" height="28" rx="6" fill="#AB50CC"/>
|
||||
<rect x="6.94141" y="20.75" width="1.5" height="16" rx="0.75" transform="rotate(-90 6.94141 20.75)" fill="white"/>
|
||||
<rect x="16.4414" y="22" width="4" height="4" rx="2" transform="rotate(-90 16.4414 22)" fill="#9F43C1" stroke="white"/>
|
||||
<rect x="6.94141" y="14.75" width="1.5" height="16" rx="0.75" transform="rotate(-90 6.94141 14.75)" fill="white"/>
|
||||
<rect x="6.94141" y="8.75" width="1.5" height="16" rx="0.75" transform="rotate(-90 6.94141 8.75)" fill="white"/>
|
||||
<rect x="9.44141" y="16" width="4" height="4" rx="2" transform="rotate(-90 9.44141 16)" fill="#9F43C1" stroke="white"/>
|
||||
<rect x="16.4414" y="10" width="4" height="4" rx="2" transform="rotate(-90 16.4414 10)" fill="#9F43C1" stroke="white"/>
|
||||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="22" height="22" rx="4" fill="#0FC8BA"/>
|
||||
<rect x="4.69125" y="16.3036" width="1.17857" height="12.5714" rx="0.589286" transform="rotate(-90 4.69125 16.3036)" fill="white"/>
|
||||
<rect x="12.0484" y="17.3928" width="3.35714" height="3.35714" rx="1.67857" transform="rotate(-90 12.0484 17.3928)" fill="#0FC8BA" stroke="white"/>
|
||||
<rect x="4.69125" y="11.5892" width="1.17857" height="12.5714" rx="0.589286" transform="rotate(-90 4.69125 11.5892)" fill="white"/>
|
||||
<rect x="4.69125" y="6.875" width="1.17857" height="12.5714" rx="0.589286" transform="rotate(-90 4.69125 6.875)" fill="white"/>
|
||||
<rect x="6.5484" y="12.6786" width="3.35714" height="3.35714" rx="1.67857" transform="rotate(-90 6.5484 12.6786)" fill="#0FC8BA" stroke="white"/>
|
||||
<rect x="12.0484" y="7.96423" width="3.35714" height="3.35714" rx="1.67857" transform="rotate(-90 12.0484 7.96423)" fill="#0FC8BA" stroke="white"/>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 872 B After Width: | Height: | Size: 990 B |
|
|
@ -1,6 +1,6 @@
|
|||
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="28" height="28" rx="6" fill="#2AA7EE"/>
|
||||
<circle cx="17" cy="11" r="5" fill="white"/>
|
||||
<path d="M13 12.5001L15.5 15.0001L13 17.5001H11V19.5001H9V21.5001L8.5 22.0001H6V19.5001L13 12.5001Z" fill="white"/>
|
||||
<path d="M20 9.47119C20 10.2996 19.3284 10.9712 18.5 10.9712C17.6716 10.9712 17 10.2996 17 9.47119C17 8.64276 17.6716 7.97119 18.5 7.97119C19.3284 7.97119 20 8.64276 20 9.47119Z" fill="#2AA7EE"/>
|
||||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="22" height="22" rx="4" fill="#2AA7EE"/>
|
||||
<path d="M9.43011 10.2142H12.573V12.5714L11.3944 13.7499L12.573 14.9285L11.3944 16.1071L12.573 17.2857V18.0714L11.0015 19.6674L9.43011 18.0714V10.2142Z" fill="white"/>
|
||||
<circle cx="11" cy="7.07139" r="3.92857" fill="white"/>
|
||||
<circle cx="11" cy="5.89281" r="1.17857" fill="#2AA7EE"/>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 513 B After Width: | Height: | Size: 438 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 width="28" height="28" rx="6" fill="#5DD400"/>
|
||||
<rect x="7" y="12" width="14" height="10" rx="1" fill="white"/>
|
||||
<rect x="10.25" y="5.75" width="7.5" height="13.5" rx="3.75" stroke="white" stroke-width="1.5"/>
|
||||
</svg>
|
||||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="22" height="22" rx="4" fill="#5DD400"/>
|
||||
<rect x="5.5" y="9.42969" width="11" height="7.85714" rx="1" fill="white"/>
|
||||
<rect x="8.21387" y="4.67969" width="5.57143" height="10.2857" rx="2.78571" stroke="white" stroke-width="1.5"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 317 B After Width: | Height: | Size: 343 B |
|
|
@ -1,4 +1,3 @@
|
|||
<svg width="120" height="60" viewBox="0 0 120 60" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="120" height="60" rx="12" fill="black"/>
|
||||
<path d="M46.6937 39H42.7562L49.9252 18.6364H54.4792L61.6581 39H57.7206L52.2817 22.8125H52.1226L46.6937 39ZM46.8229 31.0156H57.5616V33.9787H46.8229V31.0156ZM68.0961 39.3082C67.1283 39.3082 66.2566 39.1359 65.4811 38.7912C64.7121 38.4399 64.1023 37.9228 63.6515 37.2401C63.2074 36.5573 62.9853 35.7154 62.9853 34.7145C62.9853 33.8527 63.1444 33.1402 63.4626 32.5767C63.7808 32.0133 64.215 31.5625 64.7651 31.2244C65.3153 30.8864 65.9351 30.6312 66.6245 30.4588C67.3205 30.2798 68.0398 30.1506 68.7822 30.071C69.6771 29.9782 70.4029 29.8954 70.9598 29.8224C71.5166 29.7429 71.9209 29.6236 72.1728 29.4645C72.4313 29.2988 72.5606 29.0436 72.5606 28.6989V28.6392C72.5606 27.8902 72.3385 27.3101 71.8944 26.8991C71.4503 26.4882 70.8106 26.2827 69.9754 26.2827C69.0937 26.2827 68.3944 26.4749 67.8774 26.8594C67.3669 27.2438 67.0223 27.6979 66.8433 28.2216L63.4825 27.7443C63.7476 26.8163 64.1851 26.0407 64.795 25.4176C65.4048 24.7879 66.1506 24.3172 67.0322 24.0057C67.9138 23.6875 68.8883 23.5284 69.9555 23.5284C70.6913 23.5284 71.4238 23.6146 72.1529 23.7869C72.8821 23.9593 73.5483 24.2443 74.1515 24.642C74.7547 25.0331 75.2386 25.5668 75.6032 26.2429C75.9744 26.919 76.16 27.7642 76.16 28.7784V39H72.6998V36.902H72.5805C72.3617 37.3262 72.0535 37.724 71.6558 38.0952C71.2647 38.4598 70.7708 38.7547 70.1742 38.9801C69.5843 39.1989 68.8916 39.3082 68.0961 39.3082ZM69.0308 36.6634C69.7533 36.6634 70.3797 36.5208 70.91 36.2358C71.4403 35.9441 71.848 35.5597 72.133 35.0824C72.4247 34.6051 72.5705 34.0848 72.5705 33.5213V31.7216C72.4579 31.8144 72.2656 31.9006 71.9938 31.9801C71.7287 32.0597 71.4304 32.1293 71.099 32.1889C70.7675 32.2486 70.4394 32.3016 70.1146 32.348C69.7898 32.3944 69.508 32.4342 69.2694 32.4673C68.7325 32.5402 68.2519 32.6596 67.8276 32.8253C67.4034 32.991 67.0687 33.223 66.8234 33.5213C66.5781 33.813 66.4555 34.1908 66.4555 34.6548C66.4555 35.3177 66.6974 35.8182 67.1813 36.1562C67.6652 36.4943 68.2817 36.6634 69.0308 36.6634Z" fill="white"/>
|
||||
</svg>
|
||||
<svg width="35" height="22" viewBox="0 0 35 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M4.69366 21H0.756157L7.92519 0.636363H12.4792L19.6581 21H15.7206L10.2817 4.8125H10.1226L4.69366 21ZM4.82292 13.0156H15.5616V15.9787H4.82292V13.0156ZM26.0961 21.3082C25.1283 21.3082 24.2566 21.1359 23.4811 20.7912C22.7121 20.4399 22.1023 19.9228 21.6515 19.2401C21.2074 18.5573 20.9853 17.7154 20.9853 16.7145C20.9853 15.8527 21.1444 15.1402 21.4626 14.5767C21.7808 14.0133 22.215 13.5625 22.7651 13.2244C23.3153 12.8864 23.9351 12.6312 24.6245 12.4588C25.3205 12.2798 26.0398 12.1506 26.7822 12.071C27.6771 11.9782 28.4029 11.8954 28.9598 11.8224C29.5166 11.7429 29.9209 11.6236 30.1728 11.4645C30.4313 11.2988 30.5606 11.0436 30.5606 10.6989V10.6392C30.5606 9.89015 30.3385 9.31013 29.8944 8.89915C29.4503 8.48816 28.8106 8.28267 27.9754 8.28267C27.0937 8.28267 26.3944 8.47491 25.8774 8.85938C25.3669 9.24384 25.0223 9.69792 24.8433 10.2216L21.4825 9.74432C21.7476 8.81629 22.1851 8.04072 22.795 7.41761C23.4048 6.78788 24.1506 6.31723 25.0322 6.00568C25.9138 5.6875 26.8883 5.52841 27.9555 5.52841C28.6913 5.52841 29.4238 5.61458 30.1529 5.78693C30.8821 5.95928 31.5483 6.24432 32.1515 6.64204C32.7547 7.03314 33.2386 7.56676 33.6032 8.2429C33.9744 8.91903 34.16 9.7642 34.16 10.7784V21H30.6998V18.902H30.5805C30.3617 19.3262 30.0535 19.724 29.6558 20.0952C29.2647 20.4598 28.7708 20.7547 28.1742 20.9801C27.5843 21.1989 26.8916 21.3082 26.0961 21.3082ZM27.0308 18.6634C27.7533 18.6634 28.3797 18.5208 28.91 18.2358C29.4403 17.9441 29.848 17.5597 30.133 17.0824C30.4247 16.6051 30.5705 16.0848 30.5705 15.5213V13.7216C30.4579 13.8144 30.2656 13.9006 29.9938 13.9801C29.7287 14.0597 29.4304 14.1293 29.099 14.1889C28.7675 14.2486 28.4394 14.3016 28.1146 14.348C27.7898 14.3944 27.508 14.4342 27.2694 14.4673C26.7325 14.5402 26.2519 14.6596 25.8276 14.8253C25.4034 14.991 25.0687 15.223 24.8234 15.5213C24.5781 15.813 24.4555 16.1908 24.4555 16.6548C24.4555 17.3177 24.6974 17.8182 25.1813 18.1562C25.6652 18.4943 26.2817 18.6634 27.0308 18.6634Z" fill="white"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 2 KiB |
|
|
@ -1,4 +1,3 @@
|
|||
<svg width="121" height="60" viewBox="0 0 121 60" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="1.49652" y="0.5" width="119" height="59" rx="11.5" fill="white" stroke="#DFDDD0"/>
|
||||
<path d="M47.6902 39H43.7527L50.9217 18.6364H55.4757L62.6547 39H58.7172L53.2782 22.8125H53.1192L47.6902 39ZM47.8194 31.0156H58.5581V33.9787H47.8194V31.0156ZM69.0926 39.3082C68.1248 39.3082 67.2531 39.1359 66.4776 38.7912C65.7086 38.4399 65.0988 37.9228 64.648 37.2401C64.2039 36.5573 63.9818 35.7154 63.9818 34.7145C63.9818 33.8527 64.1409 33.1402 64.4591 32.5767C64.7773 32.0133 65.2115 31.5625 65.7617 31.2244C66.3119 30.8864 66.9317 30.6312 67.621 30.4588C68.3171 30.2798 69.0363 30.1506 69.7787 30.071C70.6736 29.9782 71.3995 29.8954 71.9563 29.8224C72.5131 29.7429 72.9174 29.6236 73.1693 29.4645C73.4279 29.2988 73.5571 29.0436 73.5571 28.6989V28.6392C73.5571 27.8902 73.3351 27.3101 72.8909 26.8991C72.4468 26.4882 71.8071 26.2827 70.9719 26.2827C70.0903 26.2827 69.3909 26.4749 68.8739 26.8594C68.3635 27.2438 68.0188 27.6979 67.8398 28.2216L64.479 27.7443C64.7442 26.8163 65.1817 26.0407 65.7915 25.4176C66.4013 24.7879 67.1471 24.3172 68.0287 24.0057C68.9103 23.6875 69.8848 23.5284 70.952 23.5284C71.6878 23.5284 72.4203 23.6146 73.1495 23.7869C73.8786 23.9593 74.5448 24.2443 75.148 24.642C75.7513 25.0331 76.2352 25.5668 76.5997 26.2429C76.971 26.919 77.1566 27.7642 77.1566 28.7784V39H73.6963V36.902H73.577C73.3583 37.3262 73.05 37.724 72.6523 38.0952C72.2612 38.4598 71.7674 38.7547 71.1708 38.9801C70.5808 39.1989 69.8881 39.3082 69.0926 39.3082ZM70.0273 36.6634C70.7498 36.6634 71.3763 36.5208 71.9066 36.2358C72.4369 35.9441 72.8445 35.5597 73.1296 35.0824C73.4212 34.6051 73.5671 34.0848 73.5671 33.5213V31.7216C73.4544 31.8144 73.2621 31.9006 72.9904 31.9801C72.7252 32.0597 72.4269 32.1293 72.0955 32.1889C71.764 32.2486 71.4359 32.3016 71.1111 32.348C70.7863 32.3944 70.5046 32.4342 70.2659 32.4673C69.729 32.5402 69.2484 32.6596 68.8242 32.8253C68.3999 32.991 68.0652 33.223 67.8199 33.5213C67.5746 33.813 67.452 34.1908 67.452 34.6548C67.452 35.3177 67.694 35.8182 68.1779 36.1562C68.6618 36.4943 69.2782 36.6634 70.0273 36.6634Z" fill="black"/>
|
||||
</svg>
|
||||
<svg width="35" height="21" viewBox="0 0 35 21" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M4.69366 20.5039H0.756157L7.92519 0.140269H12.4792L19.6581 20.5039H15.7206L10.2817 4.31641H10.1226L4.69366 20.5039ZM4.82292 12.5195H15.5616V15.4826H4.82292V12.5195ZM26.0961 20.8121C25.1283 20.8121 24.2566 20.6398 23.4811 20.2951C22.7121 19.9438 22.1023 19.4267 21.6515 18.744C21.2074 18.0612 20.9853 17.2193 20.9853 16.2184C20.9853 15.3567 21.1444 14.6441 21.4626 14.0806C21.7808 13.5172 22.215 13.0664 22.7651 12.7283C23.3153 12.3903 23.9351 12.1351 24.6245 11.9627C25.3205 11.7837 26.0398 11.6545 26.7822 11.5749C27.6771 11.4821 28.4029 11.3993 28.9598 11.3263C29.5166 11.2468 29.9209 11.1275 30.1728 10.9684C30.4313 10.8027 30.5606 10.5475 30.5606 10.2028V10.1431C30.5606 9.39406 30.3385 8.81404 29.8944 8.40305C29.4503 7.99207 28.8106 7.78658 27.9754 7.78658C27.0937 7.78658 26.3944 7.97881 25.8774 8.36328C25.3669 8.74775 25.0223 9.20182 24.8433 9.7255L21.4825 9.24822C21.7476 8.32019 22.1851 7.54463 22.795 6.92152C23.4048 6.29178 24.1506 5.82114 25.0322 5.50959C25.9138 5.19141 26.8883 5.03232 27.9555 5.03232C28.6913 5.03232 29.4238 5.11849 30.1529 5.29084C30.8821 5.46319 31.5483 5.74822 32.1515 6.14595C32.7547 6.53705 33.2386 7.07067 33.6032 7.7468C33.9744 8.42294 34.16 9.26811 34.16 10.2823V20.5039H30.6998V18.4059H30.5805C30.3617 18.8301 30.0535 19.2279 29.6558 19.5991C29.2647 19.9637 28.7708 20.2586 28.1742 20.484C27.5843 20.7028 26.8916 20.8121 26.0961 20.8121ZM27.0308 18.1673C27.7533 18.1673 28.3797 18.0247 28.91 17.7397C29.4403 17.448 29.848 17.0636 30.133 16.5863C30.4247 16.109 30.5705 15.5887 30.5705 15.0252V13.2255C30.4579 13.3183 30.2656 13.4045 29.9938 13.484C29.7287 13.5636 29.4304 13.6332 29.099 13.6928C28.7675 13.7525 28.4394 13.8055 28.1146 13.8519C27.7898 13.8983 27.508 13.9381 27.2694 13.9712C26.7325 14.0442 26.2519 14.1635 25.8276 14.3292C25.4034 14.4949 25.0687 14.7269 24.8234 15.0252C24.5781 15.3169 24.4555 15.6947 24.4555 16.1587C24.4555 16.8216 24.6974 17.3221 25.1813 17.6602C25.6652 17.9982 26.2817 18.1673 27.0308 18.1673Z" fill="black"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 2 KiB |
|
|
@ -1,6 +1,4 @@
|
|||
<svg width="120" height="60" viewBox="0 0 120 60" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="0.5" y="0.5" width="119" height="58.9913" rx="11.5" fill="white" stroke="#DFDDD0"/>
|
||||
<path d="M60 0H108C114.627 0 120 5.37258 120 12V48C120 54.6274 114.627 60 108 60H60V0Z" fill="black"/>
|
||||
<path d="M67.2618 39.3082C66.294 39.3082 65.4223 39.1359 64.6467 38.7912C63.8778 38.4399 63.2679 37.9228 62.8172 37.2401C62.373 36.5573 62.151 35.7154 62.151 34.7145C62.151 33.8527 62.3101 33.1402 62.6283 32.5767C62.9464 32.0133 63.3806 31.5625 63.9308 31.2244C64.481 30.8864 65.1008 30.6312 65.7902 30.4588C66.4862 30.2798 67.2054 30.1506 67.9479 30.071C68.8427 29.9782 69.5686 29.8954 70.1254 29.8224C70.6822 29.7429 71.0866 29.6236 71.3385 29.4645C71.597 29.2988 71.7263 29.0436 71.7263 28.6989V28.6392C71.7263 27.8902 71.5042 27.3101 71.0601 26.8991C70.6159 26.4882 69.9763 26.2827 69.141 26.2827C68.2594 26.2827 67.5601 26.4749 67.043 26.8594C66.5326 27.2438 66.1879 27.6979 66.0089 28.2216L62.6481 27.7443C62.9133 26.8163 63.3508 26.0407 63.9606 25.4176C64.5705 24.7879 65.3162 24.3172 66.1979 24.0057C67.0795 23.6875 68.0539 23.5284 69.1211 23.5284C69.8569 23.5284 70.5894 23.6146 71.3186 23.7869C72.0478 23.9593 72.714 24.2443 73.3172 24.642C73.9204 25.0331 74.4043 25.5668 74.7689 26.2429C75.1401 26.919 75.3257 27.7642 75.3257 28.7784V39H71.8655V36.902H71.7461C71.5274 37.3262 71.2192 37.724 70.8214 38.0952C70.4303 38.4598 69.9365 38.7547 69.3399 38.9801C68.7499 39.1989 68.0572 39.3082 67.2618 39.3082ZM68.1964 36.6634C68.919 36.6634 69.5454 36.5208 70.0757 36.2358C70.606 35.9441 71.0137 35.5597 71.2987 35.0824C71.5904 34.6051 71.7362 34.0848 71.7362 33.5213V31.7216C71.6235 31.8144 71.4313 31.9006 71.1595 31.9801C70.8944 32.0597 70.5961 32.1293 70.2646 32.1889C69.9332 32.2486 69.6051 32.3016 69.2802 32.348C68.9554 32.3944 68.6737 32.4342 68.4351 32.4673C67.8981 32.5402 67.4176 32.6596 66.9933 32.8253C66.5691 32.991 66.2343 33.223 65.989 33.5213C65.7438 33.813 65.6211 34.1908 65.6211 34.6548C65.6211 35.3177 65.8631 35.8182 66.347 36.1562C66.8309 36.4943 67.4474 36.6634 68.1964 36.6634Z" fill="white"/>
|
||||
<path d="M44.641 39H40.7035L47.8726 18.6364H52.4265L59.6055 39H55.668L50.2291 22.8125H50.07L44.641 39ZM44.7703 31.0156H55.5089V33.9787H44.7703V31.0156Z" fill="black"/>
|
||||
</svg>
|
||||
<svg width="36" height="22" viewBox="0 0 36 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M27.2443 21.3082C26.2765 21.3082 25.4048 21.1359 24.6293 20.7912C23.8603 20.4399 23.2505 19.9228 22.7997 19.2401C22.3556 18.5573 22.1335 17.7154 22.1335 16.7145C22.1335 15.8527 22.2926 15.1402 22.6108 14.5767C22.929 14.0133 23.3632 13.5625 23.9134 13.2244C24.4635 12.8864 25.0833 12.6312 25.7727 12.4588C26.4688 12.2798 27.188 12.1506 27.9304 12.071C28.8253 11.9782 29.5511 11.8954 30.108 11.8224C30.6648 11.7429 31.0691 11.6236 31.321 11.4645C31.5795 11.2988 31.7088 11.0436 31.7088 10.6989V10.6392C31.7088 9.89015 31.4867 9.31013 31.0426 8.89915C30.5985 8.48816 29.9588 8.28267 29.1236 8.28267C28.242 8.28267 27.5426 8.47491 27.0256 8.85938C26.5152 9.24384 26.1705 9.69792 25.9915 10.2216L22.6307 9.74432C22.8958 8.81629 23.3333 8.04072 23.9432 7.41761C24.553 6.78788 25.2988 6.31723 26.1804 6.00568C27.062 5.6875 28.0365 5.52841 29.1037 5.52841C29.8395 5.52841 30.572 5.61458 31.3011 5.78693C32.0303 5.95928 32.6965 6.24432 33.2997 6.64204C33.9029 7.03314 34.3868 7.56676 34.7514 8.2429C35.1226 8.91903 35.3082 9.7642 35.3082 10.7784V21H31.848V18.902H31.7287C31.5099 19.3262 31.2017 19.724 30.804 20.0952C30.4129 20.4598 29.919 20.7547 29.3224 20.9801C28.7325 21.1989 28.0398 21.3082 27.2443 21.3082ZM28.179 18.6634C28.9015 18.6634 29.5279 18.5208 30.0582 18.2358C30.5885 17.9441 30.9962 17.5597 31.2812 17.0824C31.5729 16.6051 31.7188 16.0848 31.7188 15.5213V13.7216C31.6061 13.8144 31.4138 13.9006 31.142 13.9801C30.8769 14.0597 30.5786 14.1293 30.2472 14.1889C29.9157 14.2486 29.5876 14.3016 29.2628 14.348C28.938 14.3944 28.6563 14.4342 28.4176 14.4673C27.8807 14.5402 27.4001 14.6596 26.9759 14.8253C26.5516 14.991 26.2169 15.223 25.9716 15.5213C25.7263 15.813 25.6037 16.1908 25.6037 16.6548C25.6037 17.3177 25.8456 17.8182 26.3295 18.1562C26.8134 18.4943 27.4299 18.6634 28.179 18.6634Z" fill="white"/>
|
||||
<path d="M4.62358 20.5039H0.68608L7.85511 0.140269H12.4091L19.5881 20.5039H15.6506L10.2116 4.31641H10.0526L4.62358 20.5039ZM4.75284 12.5195H15.4915V15.4826H4.75284V12.5195Z" fill="black"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 2.2 KiB After Width: | Height: | Size: 2.1 KiB |
|
|
@ -242,7 +242,7 @@
|
|||
"blockBookmarkError": { "en": "There was an error fetching the url" },
|
||||
|
||||
"popupSettingsTitle": { "en": "Settings" },
|
||||
"popupSettingsAccountTitle": { "en": "Account & data" },
|
||||
"popupSettingsAccountTitle": { "en": "Profile" },
|
||||
"popupSettingsAccountDeleteTitle": { "en": "Delete account" },
|
||||
"popupSettingsAccountMoveTitle": { "en": "Account data location" },
|
||||
"popupSettingsSpaceTitle": { "en": "Space" },
|
||||
|
|
@ -254,8 +254,8 @@
|
|||
"popupSettingsColor": { "en": "Colors" },
|
||||
"popupSettingsGradient": { "en": "Gradients" },
|
||||
"popupSettingsCodeStub": { "en": "Follow the white rabbit" },
|
||||
"popupSettingsMobileQRSubTitle": { "en": "To use Anytype on Android & iOS:" },
|
||||
"popupSettingsMobileQRText": { "en": "1. Launch Anytype<br/>2. Press \"Login\"<br/>3. Press \"Scan QR code\"<br/>4. Click on the QR code (at the right) to display it clearly<br/>5. Point your phone to this screen" },
|
||||
"popupSettingsMobileQRSubTitle": { "en": "Log in your account on Android and iOS" },
|
||||
"popupSettingsMobileQRText": { "en": "Launch Anytype app, tap “Login” and then “Scan QR code”. Reveal and scan the code below to login to your account." },
|
||||
"popupSettingsPhraseTitle": { "en": "Recovery phrase" },
|
||||
"popupSettingsPhraseStub": { "en": "You take the red pill, you stay in Wonderland, and I show you how deep the rabbit hole goes." },
|
||||
"popupSettingsPhraseShowPhrase": { "en": "Show and copy phrase" },
|
||||
|
|
@ -282,7 +282,9 @@
|
|||
"popupSettingsImportWarning": { "en": "Please don't add entire Notion workspace content if it's too big. Anytype has different data structure and can't parse Notion databases at the moment." },
|
||||
"popupSettingsExportTitle": { "en": "Export" },
|
||||
"popupSettingsExportMarkdownTitle": { "en": "Export to markdown" },
|
||||
"popupSettingsExportMarkdownText": { "en": "All your workspace data except columns and text color styling will be exported to markdown. It's a free and readable format that can be opened and edited with many free and beautiful applications.<br/><br/>If you want to add all your data back in Anytype, use the <b>Import</b> section." },
|
||||
"popupSettingsExportMarkdownText1": { "en": "All your workspace data except columns and text color styling will be exported to markdown. It's a free and readable format that can be opened and edited with many free and beautiful applications." },
|
||||
"popupSettingsExportMarkdownText2": { "en": "If you want to add all your data back in Anytype, use the <b>Import</b> section." },
|
||||
|
||||
"popupSettingsExportOk": { "en": "Export data" },
|
||||
"popupSettingsOtherTitle": { "en": "Other settings" },
|
||||
"popupSettingsLogout": { "en": "Log out" },
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
$colorVeryLightGrey: #f3f2ec;
|
||||
$colorVeryLightGrey: #f2f2f2;
|
||||
$colorMediumGrey: #aca996;
|
||||
$colorDarkGrey: #929082;
|
||||
$colorDarkGrey: #949494;
|
||||
$colorVeryDarkGrey: #6c6a5f;
|
||||
$colorWhite: #fff;
|
||||
$colorBlack: #2c2b27;
|
||||
|
|
@ -16,7 +16,7 @@ $colorLime: #5dd400;
|
|||
$colorGreen: #57c600;
|
||||
|
||||
$colorBorderLight: #eae9e0;
|
||||
$colorBorderDark: #dfddd0;
|
||||
$colorBorderDark: #e0e0e0;
|
||||
$colorSecondary: #cbc9bd;
|
||||
$colorHover: rgba(80,73,28,0.08);
|
||||
|
||||
|
|
@ -31,10 +31,10 @@ $transitionFast: all 0.2s ease-in-out;
|
|||
@mixin text-small { font-size: 12px; line-height: 18px; letter-spacing: 0px; }
|
||||
@mixin text-common { font-size: 14px; line-height: 22px; letter-spacing: -0.12px; }
|
||||
@mixin text-paragraph { font-size: 16px; line-height: 24px; letter-spacing: -0.2px; }
|
||||
@mixin text-title { font-size: 36px; line-height: 44px; letter-spacing: -0.64px; font-weight: 600; }
|
||||
@mixin text-header1 { font-family: 'Inter'; font-size: 28px; line-height: 32px; letter-spacing: -0.56px; font-weight: 600; }
|
||||
@mixin text-header2 { font-family: 'Inter'; font-size: 22px; line-height: 28px; letter-spacing: -0.48px; font-weight: 600; }
|
||||
@mixin text-header3 { font-size: 18px; line-height: 26px; letter-spacing: -0.28px; font-weight: 600; }
|
||||
@mixin text-title { font-size: 36px; line-height: 44px; letter-spacing: -0.64px; font-weight: 700; }
|
||||
@mixin text-header1 { font-family: 'Inter'; font-size: 28px; line-height: 32px; letter-spacing: -0.56px; font-weight: 700; }
|
||||
@mixin text-header2 { font-family: 'Inter'; font-size: 22px; line-height: 28px; letter-spacing: -0.48px; font-weight: 700; }
|
||||
@mixin text-header3 { font-size: 18px; line-height: 26px; letter-spacing: -0.28px; font-weight: 700; }
|
||||
@mixin text-description { font-size: 18px; line-height: 26px; letter-spacing: -0.28px; }
|
||||
@mixin text-quote { font-size: 18px; line-height: 26px; letter-spacing: -0.28px; }
|
||||
|
||||
|
|
|
|||
|
|
@ -106,7 +106,7 @@
|
|||
.views {
|
||||
.viewItem {
|
||||
display: inline-block; vertical-align: top; transition: color 0.2s ease-in-out; cursor: pointer; white-space: nowrap;
|
||||
@include text-paragraph; font-weight: 600; @include text-overflow-nw; max-width: 300px; color: $colorMediumGrey;
|
||||
@include text-paragraph; font-weight: 700; @include text-overflow-nw; max-width: 300px; color: $colorMediumGrey;
|
||||
line-height: 28px;
|
||||
}
|
||||
.viewItem {
|
||||
|
|
|
|||
|
|
@ -58,7 +58,7 @@
|
|||
name::before { border-color: $colorBlack; }
|
||||
}
|
||||
|
||||
bold { font-weight: 600; }
|
||||
bold { font-weight: 700; }
|
||||
italic { font-style: italic; }
|
||||
strike { text-decoration: line-through; }
|
||||
underline { border-bottom: 0.05em solid; }
|
||||
|
|
|
|||
|
|
@ -17,12 +17,11 @@
|
|||
}
|
||||
|
||||
.button.red { color: $colorRed; border: solid 1px $colorBorderDark; }
|
||||
.button.red:hover { background: #fee7e0; }
|
||||
|
||||
.button.dark { background: rgba(0,0,0,0.3); color: $colorWhite; }
|
||||
.button.dark:hover { background: rgba(0,0,0,0.4); }
|
||||
|
||||
.button.blank { background: none; border: solid 1px $colorBorderDark; }
|
||||
.button.blank { background: none; border: solid 1px $colorBorderDark; font-weight: 400; }
|
||||
.button.blank:hover { background: $colorHover; }
|
||||
|
||||
.button.c36 { @include text-common; height: 36px; border-radius: 6px; }
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
|
||||
.line { height: 1px; margin: 0px !important; background: $colorBorderLight; display: block; }
|
||||
}
|
||||
.filter.isName .input { font-weight: 600; }
|
||||
.filter.isName .input { font-weight: 700; }
|
||||
.filter.active {
|
||||
.icon.clear { opacity: 1; }
|
||||
}
|
||||
|
|
@ -16,7 +16,7 @@
|
|||
|
||||
.side.right { flex-shrink: 0; margin-left: 32px; text-align: right; }
|
||||
.side.right {
|
||||
.button { height: 36px; line-height: 34px; white-space: nowrap; }
|
||||
.button { white-space: nowrap; }
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@
|
|||
.tabs { @include text-paragraph; display: inline-flex; flex-direction: row; align-items: center; height: 100%; }
|
||||
.tabs {
|
||||
.tab {
|
||||
font-weight: 600; cursor: pointer; color: $colorMediumGrey; transition: $transitionFast; text-align: center;
|
||||
font-weight: 700; cursor: pointer; color: $colorMediumGrey; transition: $transitionFast; text-align: center;
|
||||
vertical-align: top; padding: 0px 16px; display: flex; align-items: center; height: 100%; border-bottom: 1px solid rgba(0,0,0,0);
|
||||
}
|
||||
.tab:hover { color: $colorBlack; }
|
||||
|
|
|
|||
|
|
@ -29,6 +29,7 @@
|
|||
}
|
||||
.iconObject.c16 { width: 16px; height: 16px; }
|
||||
.iconObject.c18 { width: 18px; height: 18px; }
|
||||
.iconObject.c22 { width: 22px; height: 22px; }
|
||||
.iconObject.c24 { width: 24px; height: 24px; }
|
||||
.iconObject.c26 { width: 26px; height: 26px; }
|
||||
.iconObject.c28 { width: 28px; height: 28px; }
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.previewGraph {
|
||||
.name { @include text-paragraph; text-overflow: unset; @include clamp2; white-space: normal; font-weight: 600; }
|
||||
.name { @include text-paragraph; text-overflow: unset; @include clamp2; white-space: normal; font-weight: 700; }
|
||||
.descr { @include text-small; text-overflow: unset; @include clamp2; white-space: normal; }
|
||||
.featured { @include text-very-small; color: $colorMediumGrey; }
|
||||
}
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
.heading {
|
||||
.iconObject { display: inline-block; background-color: $colorVeryLightGrey; border-radius: 8px; margin-bottom: 10px; box-shadow: 0px 0px 0px 1px $colorWhite inset; }
|
||||
.iconObject.isTask, .iconObject.isBookmark { background: none; position: absolute; top: 2px; left: -24px; }
|
||||
.name { display: block; @include text-paragraph; @include text-overflow-nw; font-weight: 600; position: relative; }
|
||||
.name { display: block; @include text-paragraph; @include text-overflow-nw; font-weight: 700; position: relative; }
|
||||
.description { @include text-small; @include text-overflow-nw; }
|
||||
.featured { @include text-very-small; color: $colorMediumGrey; }
|
||||
.featured {
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
.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; }
|
||||
.name { @include text-paragraph; @include text-overflow-nw; line-height: 24px; font-weight: 700; flex-grow: 1; }
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -71,7 +71,7 @@
|
|||
}
|
||||
|
||||
.button.widget {
|
||||
height: unset; text-align: left; @include text-paragraph; @include text-overflow-nw; line-height: 24px; font-weight: 600; padding: 12px 16px;
|
||||
height: unset; text-align: left; @include text-paragraph; @include text-overflow-nw; line-height: 24px; font-weight: 700; padding: 12px 16px;
|
||||
display: flex; position: relative; gap: 0px 12px; flex-direction: row; align-items: center;
|
||||
}
|
||||
.button.widget {
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
.side.left {
|
||||
.iconObject { flex-shrink: 0; }
|
||||
.txt { width: calc(100% - 64px); }
|
||||
.name { @include text-paragraph; @include text-overflow-nw; font-weight: 600; }
|
||||
.name { @include text-paragraph; @include text-overflow-nw; font-weight: 700; }
|
||||
.type { @include text-small; color: $colorDarkGrey; @include text-overflow-nw; }
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -17,78 +17,34 @@
|
|||
|
||||
@font-face {
|
||||
font-family: 'Inter'; font-style: normal; font-weight: 400;
|
||||
src: url('~font/inter/regular.ttf') format('truetype');
|
||||
src: url('~font/inter/regular.woff') format('woff');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Inter'; font-style: italic; font-weight: 400;
|
||||
src: url('~font/inter/italic.ttf') format('truetype');
|
||||
src: url('~font/inter/italic.woff') format('woff');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Inter'; font-style: normal; font-weight: 500;
|
||||
src: url('~font/inter/medium.ttf') format('truetype');
|
||||
src: url('~font/inter/medium.woff') format('woff');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Inter'; font-style: italic; font-weight: 500;
|
||||
src: url('~font/inter/mediumitalic.ttf') format('truetype');
|
||||
src: url('~font/inter/mediumitalic.woff') format('woff');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Inter'; font-style: normal; font-weight: 600;
|
||||
src: url('~font/inter/bold.ttf') format('truetype');
|
||||
src: url('~font/inter/semibold.woff') format('woff');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Inter'; font-style: italic; font-weight: 600;
|
||||
src: url('~font/inter/bolditalic.ttf') format('truetype');
|
||||
src: url('~font/inter/semibolditalic.woff') format('woff');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Inter'; font-style: normal; font-weight: 700;
|
||||
src: url('~font/inter/extrabold.ttf') format('truetype');
|
||||
src: url('~font/inter/bold.woff') format('woff');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Riccione'; font-style: normal; font-weight: 500;
|
||||
src: url('~font/riccione/regular.ttf') format('truetype');
|
||||
}
|
||||
|
||||
/*
|
||||
@font-face {
|
||||
font-family: 'Mono'; font-style: normal; font-weight: 400;
|
||||
src: url('~font/mono/regular.ttf') format('truetype');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Mono'; font-style: bold; font-weight: 600;
|
||||
src: url('~font/mono/bold.ttf') format('truetype');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Mono'; font-style: italic; font-weight: 400;
|
||||
src: url('~font/mono/italic.ttf') format('truetype');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Mono'; font-style: italic; font-weight: 600;
|
||||
src: url('~font/mono/bolditalic.ttf') format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Lcg'; font-style: normal; font-weight: 400;
|
||||
src: url('~font/lcg/regular.otf') format('opentype');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Lcg'; font-style: italic; font-weight: 400;
|
||||
src: url('~font/lcg/italic.otf') format('opentype');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Lcg'; font-style: normal; font-weight: 500;
|
||||
src: url('~font/lcg/medium.otf') format('opentype');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Lcg'; font-style: italic; font-weight: 500;
|
||||
src: url('~font/lcg/mediumitalic.ttf') format('truetype');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Lcg'; font-style: bold; font-weight: 600;
|
||||
src: url('~font/lcg/bold.otf') format('opentype');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Lcg'; font-style: italic; font-weight: 600;
|
||||
src: url('~font/lcg/bolditalic.ttf') format('truetype');
|
||||
}
|
||||
*/
|
||||
}
|
||||
|
|
@ -30,7 +30,7 @@
|
|||
.menu.menuAccountPath {
|
||||
.content { padding: 0; overflow: visible; }
|
||||
.content {
|
||||
.label.bold { margin-bottom: 6px; font-weight: 600; }
|
||||
.label.bold { margin-bottom: 6px; font-weight: 700; }
|
||||
.label { margin-bottom: 11px; word-break: break-word; }
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -80,6 +80,7 @@
|
|||
.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.graph { background-image: url('~img/icon/header/graph.svg'); }
|
||||
|
||||
.icon.coverChange { background-image: url('~img/icon/cover/change.svg'); }
|
||||
.icon.coverPosition { background-image: url('~img/icon/cover/position.svg'); }
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@
|
|||
background: rgba(255,255,255, 0.7);
|
||||
}
|
||||
|
||||
.tabs { padding: 10px 14px; border-bottom: 1px solid $colorBorderLight; white-space: nowrap; font-weight: 600; color: $colorMediumGrey; }
|
||||
.tabs { padding: 10px 14px; border-bottom: 1px solid $colorBorderLight; white-space: nowrap; font-weight: 700; color: $colorMediumGrey; }
|
||||
.tabs {
|
||||
.tab { display: inline-block; vertical-align: top; transition: $transitionFast; cursor: pointer; margin-right: 16px; position: relative; }
|
||||
.tab:hover, .tab.active { color: $colorBlack; }
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
.content { padding: 12px 16px; }
|
||||
.wrap { display: flex; flex-direction: column; }
|
||||
|
||||
.name { @include text-paragraph; letter-spacing: -0.2px; font-weight: 600; margin-bottom: 2px; width: calc(100% - 20px); }
|
||||
.name { @include text-paragraph; letter-spacing: -0.2px; font-weight: 700; margin-bottom: 2px; width: calc(100% - 20px); }
|
||||
.descr { line-height: 18px; }
|
||||
.descr {
|
||||
.icon { width: 16px; height: 16px; margin: -2px 0px 0px 0px; }
|
||||
|
|
|
|||
|
|
@ -11,12 +11,7 @@
|
|||
|
||||
.authBackWrap { position: absolute; top: 8px; left: 8px; display: flex; align-items: center; flex-wrap: nowrap; cursor: pointer; color: $colorDarkGrey; }
|
||||
.authBackWrap {
|
||||
.icon.back { width: 24px; height: 24px; background-image: url('~img/icon/popup/settings/back0.svg'); transition: none; }
|
||||
}
|
||||
|
||||
.authBackWrap:hover { color: $colorBlack; }
|
||||
.authBackWrap:hover {
|
||||
.icon.back { background-image: url('~img/icon/popup/settings/back1.svg'); }
|
||||
.icon.back { width: 24px; height: 24px; background-image: url('~img/icon/popup/settings/back.svg'); transition: none; }
|
||||
}
|
||||
|
||||
.textareaWrap { margin: 0px 0px 32px 0px; }
|
||||
|
|
@ -69,7 +64,7 @@
|
|||
.icon.user { width: 48px; height: 48px; line-height: 50px; font-size: 21px; letter-spacing: -0.16px; margin-right: 12px; }
|
||||
.name {
|
||||
font-size: 18px; line-height: 26px; display: inline-block; vertical-align: middle; width: calc(100% - 60px); height: 26px;
|
||||
font-weight: 600; margin-top: 2px; @include text-overflow-nw;
|
||||
font-weight: 700; margin-top: 2px; @include text-overflow-nw;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@
|
|||
.emptySearch { padding: 56px 0px; border: 1px solid $colorBorderDark; border-radius: 12px; height: auto; @include text-paragraph; }
|
||||
.emptySearch {
|
||||
.txt { width: 512px; }
|
||||
b { font-weight: 600; }
|
||||
b { font-weight: 700; }
|
||||
}
|
||||
|
||||
.items { height: 100%; }
|
||||
|
|
@ -55,7 +55,7 @@
|
|||
.item { height: 48px; line-height: 48px; display: flex; position: relative; cursor: pointer; justify-content: space-between; }
|
||||
.item {
|
||||
.flex {
|
||||
flex-direction: row; align-items: center; padding: 14px 16px 14px 14px; border: 1px solid $colorBorderDark; border-radius: 10px; font-weight: 600;
|
||||
flex-direction: row; align-items: center; padding: 14px 16px 14px 14px; border: 1px solid $colorBorderDark; border-radius: 10px; font-weight: 700;
|
||||
gap: 0px 8px; transition: $transitionFast; max-width: calc(100% - 70px);
|
||||
}
|
||||
.flex:hover { background: $colorHover; }
|
||||
|
|
|
|||
|
|
@ -2,281 +2,208 @@
|
|||
|
||||
.popups {
|
||||
.popupSettings {
|
||||
.innerWrap { width: 672px; }
|
||||
.innerWrap.scroll { overflow-x: hidden; overflow-y: overlay; }
|
||||
.innerWrap { width: 958px; height: 650px; }
|
||||
.innerWrap.scroll {
|
||||
.sides > .side.left { display: none; }
|
||||
.sides > .side.right { width: 100%; overflow-x: hidden; overflow-y: overlay; }
|
||||
}
|
||||
.content { height: 100%; }
|
||||
|
||||
.icon { transition: none; }
|
||||
.title { font-size: 28px; line-height: 32px; letter-spacing: -0.36px; font-weight: 600; padding: 20px 0px; text-align: center; }
|
||||
.description { margin-bottom: 26px; }
|
||||
.inputs { margin-bottom: 32px; }
|
||||
.textareaWrap { color: $colorIce; }
|
||||
.pin { text-align: center; }
|
||||
.sides { display: flex; height: 100%; }
|
||||
.sides {
|
||||
> .side { position: relative; }
|
||||
> .side.left { width: 274px; background: $colorVeryLightGrey; padding: 16px 8px; overflow: auto; }
|
||||
> .side.left {
|
||||
.iconObject.withLetter { background-color: $colorBorderDark; }
|
||||
|
||||
.label.center { text-align: center; }
|
||||
.label.grey { color: $colorMediumGrey; }
|
||||
|
||||
.head {
|
||||
position: absolute; left: 0px; top: 0px; width: 100%; height: 40px; padding: 8px 12px; background: $colorWhite; z-index: 1;
|
||||
border-radius: 12px 12px 0px 0px; text-align: left;
|
||||
}
|
||||
.head {
|
||||
.icon.back { width: 24px; height: 24px; cursor: pointer; background-image: url('~img/icon/popup/settings/back0.svg'); margin-top: -2px; }
|
||||
|
||||
.element { color: $colorDarkGrey; cursor: pointer; display: inline-block; height: 24px; line-height: 24px; }
|
||||
.element:hover { color: $colorBlack; }
|
||||
.element:hover {
|
||||
.icon.back { background-image: url('~img/icon/popup/settings/back1.svg'); }
|
||||
}
|
||||
}
|
||||
|
||||
.message { padding: 16px; background: #ffebe5; border-radius: 8px; color: $colorBlack; }
|
||||
.message {
|
||||
.button { flex-shrink: 0; background: none; padding: 0px; height: auto; @include text-common; color: #ee420b; }
|
||||
.label { font-weight: 600; }
|
||||
.flex { gap: 0px 16px; align-items: center; justify-content: space-between; }
|
||||
b { display: block; }
|
||||
}
|
||||
|
||||
.tab { padding: 44px 48px 48px 48px; }
|
||||
|
||||
.label.small, .label.sectionName { @include text-small; color: $colorDarkGrey; }
|
||||
.label.sectionName { padding: 30px 0px 4px 0px; }
|
||||
.label.sectionName.center { text-align: center; }
|
||||
|
||||
.tabIndex { padding: 24px 48px 48px 48px; }
|
||||
.tabIndex, .tabAccount, .tabAppearance, .tabPersonal, .tabPinIndex, .tabDelete, .tabExportMarkdown, .tabSpaceIndex, .tabSpaceInvite, .tabSpaceTeam, .tabSpaceLeave, .tabSpaceRemove {
|
||||
.row {
|
||||
padding: 18px 0px 17px 0px; border-bottom: 1px solid $colorBorderLight; cursor: pointer; position: relative;
|
||||
@include text-paragraph; line-height: 28px; display: flex; align-items: center; flex-direction: row;
|
||||
}
|
||||
.row.red { color: $colorRed; }
|
||||
|
||||
.row {
|
||||
.icon, .iconObject { width: 28px; height: 28px; margin: 0px 12px 0px 0px; vertical-align: top; }
|
||||
.icon.account { background-image: url('~img/icon/popup/settings/account.svg'); }
|
||||
.icon.personal { background-image: url('~img/icon/popup/settings/personal.svg'); }
|
||||
.icon.appearance { background-image: url('~img/icon/popup/settings/appearance.svg'); }
|
||||
.icon.wallpaper { background-image: url('~img/icon/popup/settings/wallpaper.svg'); }
|
||||
.icon.phrase { background-image: url('~img/icon/popup/settings/phrase.svg'); }
|
||||
.icon.pin { background-image: url('~img/icon/popup/settings/pin.svg'); }
|
||||
.icon.import { background-image: url('~img/icon/popup/settings/import.svg'); }
|
||||
.icon.export { background-image: url('~img/icon/popup/settings/export.svg'); }
|
||||
.icon.other { background-image: url('~img/icon/popup/settings/other.svg'); }
|
||||
|
||||
.icon.arrow {
|
||||
width: 24px; height: 24px; background-image: url('~img/icon/popup/settings/arrow.svg'); position: absolute; right: 0px;
|
||||
top: 50%; margin: -12px 0px 0px 0px;
|
||||
.section { margin: 0px 0px 25px 0px; }
|
||||
.section:last-child { margin: 0px; }
|
||||
.section {
|
||||
> .name { @include text-small; color: $colorDarkGrey; margin: 0px 0px 4px 0px; padding: 0px 8px; }
|
||||
}
|
||||
.icon.dot {
|
||||
width: 12px; height: 12px; border-radius: 100%; background: #ee420b; position: absolute; right: 24px;
|
||||
top: 50%; margin: -6px 0px 0px 0px;
|
||||
}
|
||||
|
||||
.side { width: 50%; line-height: 28px; }
|
||||
.side.right { text-align: right; }
|
||||
|
||||
.side.c25 { width: 25%; }
|
||||
.side.c75 { width: 75%; }
|
||||
.space {
|
||||
display: flex; flex-direction: row; padding: 8px; gap: 0px 12px; align-items: center; margin: 0px 0px 12px 0px;
|
||||
border-radius: 8px; transition: $transitionFast; cursor: pointer;
|
||||
}
|
||||
.space:hover, .space.active { background: $colorBorderDark; }
|
||||
.space {
|
||||
.iconObject { flex-shrink: 0; }
|
||||
.txt { width: calc(100% - 40px); }
|
||||
.name { @include text-common; font-weight: 500; }
|
||||
.type { @include text-small; color: $colorDarkGrey; }
|
||||
}
|
||||
|
||||
.item {
|
||||
display: flex; flex-direction: row; gap: 0px 10px; margin: 0px 0px 2px 0px; padding: 5px 8px;
|
||||
cursor: pointer; border-radius: 8px; transition: $transitionFast;
|
||||
}
|
||||
.item:hover, .item.active { background: $colorBorderDark; }
|
||||
.item {
|
||||
.icon { width: 22px; height: 22px; }
|
||||
.icon.personal { background-image: url('~img/icon/popup/settings/personal.svg'); }
|
||||
.icon.cloud { background-image: url('~img/icon/popup/settings/cloud.svg'); }
|
||||
.icon.appearance { background-image: url('~img/icon/popup/settings/appearance.svg'); }
|
||||
.icon.wallpaper { background-image: url('~img/icon/popup/settings/wallpaper.svg'); }
|
||||
.icon.phrase { background-image: url('~img/icon/popup/settings/phrase.svg'); }
|
||||
.icon.pin { background-image: url('~img/icon/popup/settings/pin.svg'); }
|
||||
.icon.import { background-image: url('~img/icon/popup/settings/import.svg'); }
|
||||
.icon.export { background-image: url('~img/icon/popup/settings/export.svg'); }
|
||||
}
|
||||
|
||||
.select { transition: none; border: 0px; color: $colorMediumGrey; max-width: 100%; }
|
||||
.select {
|
||||
.icon.arrow { top: 3px; margin: 0px !important; }
|
||||
}
|
||||
.status { position: absolute; text-align: right; right: 24px; top: 50%; margin-top: -14px; height: 28px; color: $colorMediumGrey; }
|
||||
}
|
||||
|
||||
.row.location { align-items: center; }
|
||||
.row.location {
|
||||
.side.right { @include text-small; }
|
||||
.label { @include text-overflow-nw; width: 100%; }
|
||||
}
|
||||
|
||||
.logout { color: $colorMediumGrey; cursor: pointer; text-align: center; @include text-paragraph; line-height: 28px; padding: 18px 0px; }
|
||||
.logout:hover { color: $colorBlack; }
|
||||
}
|
||||
|
||||
.tabAccount {
|
||||
.userInfo { display: flex; align-items: flex-end; gap: 0px 24px; }
|
||||
.userInfo {
|
||||
.iconWrapper { position: relative; }
|
||||
.loaderWrapper { position: absolute; width: 100%; height: 100%; border-radius: 50%; z-index: 1; background: rgba(255,255,255,0.3); }
|
||||
|
||||
.iconObject { flex-shrink: 0; width: 80px; cursor: pointer; }
|
||||
.iconObject: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;
|
||||
> .side.right { width: calc(100% - 274px); padding: 44px 54px; }
|
||||
> .side.right {
|
||||
.head { width: 100%; margin: 0px 0px 36px 0px; }
|
||||
.head {
|
||||
.icon.back { width: 8px; height: 8px; cursor: pointer; background-image: url('~img/icon/popup/settings/back.svg'); }
|
||||
|
||||
.element {
|
||||
color: $colorDarkGrey; cursor: pointer; display: inline-flex; gap: 0px 6px; align-items: center; padding: 2px 4px;
|
||||
border-radius: 6px; margin-left: -5px;
|
||||
}
|
||||
.element:hover { background: $colorHover; }
|
||||
}
|
||||
.iconObject:hover:after { opacity: 1; }
|
||||
|
||||
.name { width: 100%; padding-bottom: 12px; border-bottom: 1px solid $colorBorderLight; }
|
||||
.title { @include text-header1; font-weight: 700; margin: 0px 0px 12px 0px; }
|
||||
.description { margin: 0px 0px 24px 0px; }
|
||||
b { font-weight: 500; }
|
||||
|
||||
.row {
|
||||
padding: 14px 0px 13px 0px; display: flex; justify-content: space-between; border-bottom: 1px solid $colorBorderLight;
|
||||
align-items: center; @include text-paragraph;
|
||||
}
|
||||
.row.red { color: $colorRed; }
|
||||
|
||||
.error { margin: 8px 0px 0px 0px; }
|
||||
|
||||
.label.small, .label.section, .label.grey { color: $colorDarkGrey; }
|
||||
.label.small, .label.section { @include text-small; }
|
||||
.label.section { margin: 30px 0px 4px 0px; }
|
||||
|
||||
.select { border: 0px; color: $colorDarkGrey; }
|
||||
|
||||
.name { width: 100%; }
|
||||
.name {
|
||||
.input { padding: 0; @include text-header2; }
|
||||
.label { margin: 0px 0px 6px 0px; }
|
||||
.input { @include text-header2; padding: 0px; }
|
||||
}
|
||||
|
||||
.iconWrapper { position: relative; margin: 0px 0px 12px 0px; }
|
||||
.iconWrapper {
|
||||
.loaderWrapper { position: absolute; width: 100%; height: 100%; border-radius: 50%; z-index: 1; background: rgba(255,255,255,0.3); }
|
||||
|
||||
.iconObject { flex-shrink: 0; cursor: pointer; }
|
||||
.iconObject: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;
|
||||
}
|
||||
.iconObject:hover:after { opacity: 1; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabDelete {
|
||||
.text { margin-bottom: 10px; }
|
||||
.text {
|
||||
b { display: block; margin-bottom: 10px; }
|
||||
p { margin-bottom: 10px; }
|
||||
.check { display: flex; align-items: center; gap: 0px 6px; cursor: pointer; }
|
||||
}
|
||||
.tabSpaceIndex {
|
||||
> .iconObject { margin: 0px 0px 12px 0px; }
|
||||
}
|
||||
|
||||
.tabAppearance {
|
||||
.buttons { display: flex; justify-content: space-evenly; }
|
||||
.side.right.tabPhrase {
|
||||
.inputs { margin: 0px 0px 54px 0px; }
|
||||
.title.sub { @include text-header3; margin: 0px 0px 4px 0px; font-weight: 700; }
|
||||
|
||||
.btn { text-align: center; @include text-small; cursor: pointer; }
|
||||
.btn {
|
||||
.icon { width: 128px; height: 68px; margin-bottom: 4px; border-radius: 14px; padding: 4px; }
|
||||
.icon {
|
||||
.inner { width: 120px; height: 60px; border-radius: 12px; background-size: cover; background-position: center; background-repeat: no-repeat; }
|
||||
}
|
||||
|
||||
.icon.light .inner { background-image: url('~img/icon/popup/settings/theme/light.svg'); }
|
||||
.icon.dark .inner { background-image: url('~img/icon/popup/settings/theme/dark.svg'); }
|
||||
.icon.system .inner { background-image: url('~img/icon/popup/settings/theme/system.svg'); }
|
||||
}
|
||||
|
||||
.btn.active {
|
||||
.icon { box-shadow: 0px 0px 0px 2px #ffee94 inset; }
|
||||
}
|
||||
}
|
||||
|
||||
.tabWallpaper { overflow-y: overlay; height: 520px; }
|
||||
.tabWallpaper {
|
||||
.title { text-align: left; }
|
||||
.covers { margin-left: -2px; width: 596px; display: flex; flex-wrap: wrap; gap: 16px 10px; }
|
||||
|
||||
.row { margin-bottom: 24px; }
|
||||
.row:last-child { margin: 0px; }
|
||||
|
||||
.label { margin-bottom: 8px; }
|
||||
.label.name { margin-bottom: 11px; @include text-very-small; color: $colorMediumGrey; text-transform: uppercase; }
|
||||
|
||||
.item {
|
||||
width: 108px; height: 70px; display: inline-block; vertical-align: top; cursor: pointer;
|
||||
position: relative; border: 1px solid rgba(0,0,0,0); border-radius: 4px;
|
||||
}
|
||||
.item:hover, .item.active:hover { border: 2px solid $colorOrange; }
|
||||
.item.active { border: 1px solid $colorBorderLight; }
|
||||
|
||||
.item.fileWrap { margin: 0px 0px 0px -2px; }
|
||||
|
||||
.item {
|
||||
.cover.upload {
|
||||
background-image: url('~img/icon/popup/settings/upload.svg'); background-size: 24px 24px;
|
||||
border: 1px solid $colorBorderLight; background-position: center;
|
||||
}
|
||||
}
|
||||
|
||||
.cover { position: absolute; left: 2px; top: 2px; width: calc(100% - 4px); height: calc(100% - 4px); border-radius: 1px; }
|
||||
}
|
||||
|
||||
.tabPhrase {
|
||||
.label { margin-bottom: 25px; }
|
||||
.inputs { margin-bottom: 40px; }
|
||||
.textareaWrap { margin-bottom: 20px; }
|
||||
|
||||
.sides { margin-bottom: 20px; display: flex; }
|
||||
.sides {
|
||||
b { margin-bottom: 5px; display: block; }
|
||||
.label { margin: 0px; }
|
||||
.side { width: 100%; }
|
||||
.side.right { text-align: right; font-size: 0px; width: 50%; padding: 6px;}
|
||||
canvas { display: inline-block; }
|
||||
}
|
||||
|
||||
.qrWrap {
|
||||
padding: 16px; border-radius: 12px; display: inline-block; width: 132px; height: 132px;
|
||||
background: $colorVeryLightGrey;
|
||||
}
|
||||
.qrWrap { padding: 8px; border-radius: 4px; width: 132px; height: 132px; background: $colorVeryLightGrey; overflow: hidden; }
|
||||
.qrWrap {
|
||||
canvas { width: 100%; height: 100%; }
|
||||
}
|
||||
|
||||
.button { font-size: 16px; }
|
||||
}
|
||||
|
||||
.tabLogout {
|
||||
.label { margin-bottom: 25px; }
|
||||
.inputs { margin-bottom: 20px; }
|
||||
.buttons { margin-top: 32px; display: flex; gap: 0px 16px; }
|
||||
.side.right.tabLogout { padding-top: 22px; }
|
||||
.side.right.tabLogout {
|
||||
.inputs { margin: 0px 0px 24px 0px; }
|
||||
.buttons { display: flex; gap: 0px 16px; }
|
||||
}
|
||||
|
||||
.tabPinConfirm { text-align: center; }
|
||||
|
||||
.tabPinSelect, .tabPinConfirm {
|
||||
.label { margin-bottom: 23px; }
|
||||
.input {
|
||||
width: 40px; height: 40px; margin-right: 8px; padding: 0px; text-align: center; vertical-align: top; font-size: 18px;
|
||||
border: 1px solid #e0ded2;
|
||||
.side.right.tabDelete { padding-top: 22px; }
|
||||
.side.right.tabDelete {
|
||||
.text { margin: 0px 0px 32px 0px; }
|
||||
.text {
|
||||
b { margin: 0px 0px 8px 0px; display: block; }
|
||||
}
|
||||
.input.active { box-shadow: 0px 0px 0px 1px $colorOrange inset; border-color: $colorOrange; }
|
||||
.input-password { font-size: 14px; line-height: 1; }
|
||||
.input:last-child { margin: 0px; }
|
||||
|
||||
.button.blank {
|
||||
padding: 20px 0px; width: 100%; display: block; height: auto; line-height: 24px; background: none; color: #e89d00;
|
||||
border: 0px; border-radius: 0px; border-bottom: 1px solid $colorBorderLight; @include text-paragraph; font-weight: 400;
|
||||
}
|
||||
.button.blank:hover { color: $colorBlack; }
|
||||
|
||||
.button.blank {
|
||||
.txt { line-height: inherit; }
|
||||
.check { border-top: 1px solid $colorBorderLight; padding: 16px 0px 12px 0px; display: flex; align-items: center; gap: 0px 8px; }
|
||||
}
|
||||
|
||||
.side.right.tabAppearance {
|
||||
.buttons { display: flex; gap: 0px 34px; margin: 0px 0px 32px 0px; }
|
||||
|
||||
.btn { text-align: center; @include text-small; cursor: pointer; }
|
||||
.btn {
|
||||
.bg {
|
||||
width: 120px; height: 60px; border-radius: 14px; display: flex; align-items: center; justify-content: center; margin-bottom: 8px;
|
||||
position: relative;
|
||||
}
|
||||
.icon { width: 40px; height: 40px; display: block; z-index: 1; position: relative; }
|
||||
}
|
||||
|
||||
.btn.light {
|
||||
.bg { box-shadow: 0px 0px 0px 1px $colorBorderDark; }
|
||||
.icon { background-image: url('~img/icon/popup/settings/theme/light.svg'); }
|
||||
}
|
||||
|
||||
.btn.dark {
|
||||
.bg { background: $colorBlack; }
|
||||
.icon { background-image: url('~img/icon/popup/settings/theme/dark.svg'); }
|
||||
}
|
||||
.btn.system {
|
||||
.bg::before, .bg::after {
|
||||
content: ''; position: absolute; top: 0px; width: 50%; height: 100%;
|
||||
}
|
||||
.bg::before { left: 0px; box-shadow: 0px 0px 0px 1px $colorBorderDark; border-radius: 14px 0px 0px 14px; }
|
||||
.bg::after { right: 0px; background: $colorBlack; border-radius: 0px 14px 14px 0px; }
|
||||
.icon { background-image: url('~img/icon/popup/settings/theme/system.svg'); }
|
||||
}
|
||||
|
||||
.btn.active {
|
||||
.bg { box-shadow: 0px 0px 0px 2px #ffee94; }
|
||||
}
|
||||
.btn.system.active {
|
||||
.bg::before { box-shadow: 0px 0px; }
|
||||
}
|
||||
}
|
||||
|
||||
.tabImportIndex {
|
||||
.label { margin-bottom: 26px; }
|
||||
|
||||
.items {
|
||||
/*display: grid; grid-template-columns: repeat(4, 132px); grid-column-gap: 16px; grid-row-gap: 16px;*/
|
||||
display: flex; justify-content: center; gap: 16px;
|
||||
}
|
||||
.side.right.tabImportIndex {
|
||||
.items { display: flex; gap: 16px; }
|
||||
.item {
|
||||
width: 132px; height: 84px; border: 1px solid $colorBorderLight; border-radius: 8px;
|
||||
text-align: center; transition: $transitionFast; line-height: 82px; display: inline-block; cursor: pointer;
|
||||
vertical-align: top; position: relative;
|
||||
width: 132px; height: 94px; border: 1px solid $colorBorderLight; border-radius: 8px; transition: $transitionFast; cursor: pointer;
|
||||
position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
|
||||
}
|
||||
.item:nth-child(4n + 4) { margin-right: 0px; }
|
||||
.item:hover { border-color: $colorBlack; }
|
||||
|
||||
.item {
|
||||
.icon {
|
||||
width: 28px; margin-bottom: 6px; height: 32px; background-size: contain;
|
||||
background-position: top center;
|
||||
}
|
||||
.icon { width: 28px; margin: 0px 0px 8px 0px; height: 28px; background-size: contain; background-position: top center; }
|
||||
.name { @include text-small; }
|
||||
}
|
||||
|
||||
.item.notion .icon { background-image: url('~img/icon/popup/settings/import/notion.svg'); }
|
||||
.item.notion .icon { background-image: url('~img/icon/popup/settings/import/notion.svg'); }
|
||||
.item.markdown .icon { background-image: url('~img/icon/popup/settings/import/markdown.svg'); }
|
||||
.item.html .icon { background-image: url('~img/icon/popup/settings/import/html.svg'); }
|
||||
}
|
||||
|
||||
.tabImportNotion, .tabImportMarkdown {
|
||||
.label, .path { margin-bottom: 10px; }
|
||||
.label.last { margin: 0px; }
|
||||
.button { margin: 25px 0px; }
|
||||
}
|
||||
|
||||
.tabImportNotion, .tabImportNotionHelp, .tabImportNotionWarning {
|
||||
.list { margin-left: 1em; }
|
||||
}
|
||||
|
||||
.tabImportNotion {
|
||||
.inputWrapper { flex-direction: row; align-items: flex-start; gap: 0px 8px; margin: 32px 0px; }
|
||||
.side.right.tabImportNotion { padding-top: 22px; }
|
||||
.side.right.tabImportNotion {
|
||||
.inputWrapper { flex-direction: row; align-items: flex-start; gap: 0px 8px; margin: 0px 0px 58px 0px; }
|
||||
.inputWrapper {
|
||||
.input { height: 40px; border: 1px solid $colorBorderDark; border-radius: 6px; }
|
||||
.input { height: 36px; border: 1px solid $colorBorderDark; border-radius: 6px; }
|
||||
.button { margin: 0px; flex-shrink: 0; }
|
||||
.errorWrapper { flex-grow: 1; }
|
||||
.error { @include text-small; margin: 2px 0px 0px 0px; }
|
||||
}
|
||||
.line { height: 1px; background: $colorBorderLight; margin: 0px 0px 24px 0px; }
|
||||
|
||||
.helpWrapper { flex-direction: row; align-items: center; gap: 0px 8px; margin: 0px 0px 16px 0px; justify-content: space-between; }
|
||||
.helpWrapper {
|
||||
|
|
@ -295,7 +222,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.list { @include text-small; }
|
||||
.list { @include text-small; margin-left: 1.35em; }
|
||||
.list {
|
||||
li { margin: 0px 0px 12px 0px; }
|
||||
.label { margin: 0px 0px 4px 0px; }
|
||||
|
|
@ -303,10 +230,10 @@
|
|||
}
|
||||
}
|
||||
|
||||
.tabImportNotionHelp { overflow-x: hidden; overflow-y: overlay; padding-top: 76px; }
|
||||
.tabImportNotionHelp {
|
||||
.icon.notion { width: 28px; height: 28px; background-image: url('~img/icon/popup/settings/import/notion.svg'); }
|
||||
.title { text-align: left; }
|
||||
.side.right.tabImportNotionHelp { overflow-x: hidden; overflow-y: overlay; padding-top: 22px; }
|
||||
.side.right.tabImportNotionHelp {
|
||||
.icon.notion { width: 28px; height: 28px; background-image: url('~img/icon/popup/settings/import/notion.svg'); margin: 0px 0px 16px 0px; }
|
||||
.title { margin: 0px 0px 44px 0px !important; }
|
||||
.label.step { @include text-paragraph; font-weight: 700; margin: 0px 0px 16px 0px; }
|
||||
|
||||
.list { margin: 0px 0px 64px 1em; }
|
||||
|
|
@ -318,64 +245,13 @@
|
|||
}
|
||||
}
|
||||
|
||||
.tabImportNotionWarning {
|
||||
.title { text-align: left; }
|
||||
.listWrapper { padding: 16px; border: 1px solid $colorVeryLightGrey; border-radius: 8px; margin: 32px 0px 24px 0px; }
|
||||
|
||||
.list { @include text-small; }
|
||||
.list {
|
||||
li { margin: 0px 0px 12px 0px; }
|
||||
.label { margin: 0px 0px 4px 0px; }
|
||||
.side.right.tabExportMarkdown {
|
||||
.labels {
|
||||
.label { margin: 0px 0px 12px 0px; }
|
||||
.label:last-child { margin: 0px; }
|
||||
}
|
||||
}
|
||||
|
||||
.tabExportMarkdown {
|
||||
.label.last { margin: 0px; }
|
||||
.button { margin-top: 25px; }
|
||||
}
|
||||
|
||||
.tabSpaceIndex {
|
||||
.spaceInfo { text-align: center; }
|
||||
.spaceInfo {
|
||||
.iconObject { margin: 0px auto 12px auto; }
|
||||
.iconObject.canEdit { cursor: pointer; }
|
||||
.iconObject.canEdit:hover:after { opacity: 1; }
|
||||
|
||||
.input { margin-bottom: 12px; padding: 8px 0px 16px; height: auto; border-bottom: 1px solid $colorBorderDark; width: 384px; }
|
||||
}
|
||||
|
||||
.name {
|
||||
.input { padding: 0; @include text-header2; }
|
||||
}
|
||||
}
|
||||
|
||||
.tabSpaceInvite, .tabSpaceLeave, .tabSpaceRemove {
|
||||
.title { text-align: left; }
|
||||
}
|
||||
|
||||
.tabSpaceInvite {
|
||||
.label.description { margin: 20px 0px 28px; }
|
||||
}
|
||||
|
||||
.tabSpaceLeave, .tabSpaceRemove {
|
||||
.label { margin-bottom: 28px; }
|
||||
}
|
||||
|
||||
.tabSpaceTeam {
|
||||
.title { padding-bottom: 4px; }
|
||||
.label.counter { text-align: center; margin-bottom: 20px; color: $colorDarkGrey; }
|
||||
|
||||
.filter { margin-bottom: 8px; padding: 0px; }
|
||||
|
||||
.rows { height: 100%; margin-bottom: 12px; }
|
||||
.row { height: 44px; border: 0px; padding: 8px 0px; }
|
||||
.row {
|
||||
.left { display: flex; }
|
||||
.right { font-size: 14px; }
|
||||
}
|
||||
|
||||
.buttons { text-align: center; }
|
||||
.rows { margin: 24px 0px; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
.section { margin-bottom: 25px; }
|
||||
.section:last-child { margin-bottom: 0px; }
|
||||
.section {
|
||||
.name { @include text-paragraph; font-weight: 600; padding-bottom: 12px; border-bottom: 1px solid $colorBorderLight; }
|
||||
.name { @include text-paragraph; font-weight: 700; padding-bottom: 12px; border-bottom: 1px solid $colorBorderLight; }
|
||||
|
||||
.items {
|
||||
.item { display: flex; flex-direction: row; padding: 12px 0px; border-bottom: 1px solid $colorBorderLight; }
|
||||
|
|
|
|||
|
|
@ -23,53 +23,40 @@
|
|||
/* PopupSettings */
|
||||
|
||||
.popup.popupSettings {
|
||||
.head { background: $colorBlack; }
|
||||
.head {
|
||||
.element { color: $colorSecondary; }
|
||||
.element {
|
||||
.icon.back { background-image: url('#{$themePath}/icon/popup/settings/back0.svg'); }
|
||||
}
|
||||
|
||||
.element:hover { color: $colorPrimary; }
|
||||
.element:hover {
|
||||
.icon.back { background-image: url('#{$themePath}/icon/popup/settings/back1.svg'); }
|
||||
}
|
||||
}
|
||||
|
||||
.sectionName { color: $colorSecondary; }
|
||||
.select { color: $colorSecondary; }
|
||||
|
||||
.label.grey { color: $colorSecondary; }
|
||||
|
||||
.tab .row { border-color: $colorLineSecondary; }
|
||||
|
||||
.tabWallpaper .item.active { border-color: $colorLinePrimary; }
|
||||
.tabWallpaper .item .cover.upload { background-color: $colorBlack !important; border-color: $colorLinePrimary; }
|
||||
.sides {
|
||||
> .side.right {
|
||||
.head { background: $colorBlack; }
|
||||
.head {
|
||||
.element:hover { background-color: $colorHover; }
|
||||
}
|
||||
|
||||
.tabPinIndex, .tabPinSelect, .tabPinConfirm {
|
||||
.button.blank { border-color: $colorLineSecondary; }
|
||||
.button.blank:hover { color: $colorPrimary; }
|
||||
.label.section, .label.small { color: $colorSecondary; }
|
||||
.row { border-color: $colorLineSecondary; }
|
||||
|
||||
.input { border-color: $colorLinePrimary; }
|
||||
}
|
||||
.input { border-color: $colorLinePrimary; }
|
||||
|
||||
.tabPhrase {
|
||||
.select { color: $colorSecondary; }
|
||||
.select:hover { background-color: $colorHover; }
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.side.right.tabPhrase {
|
||||
.qrWrap { background: $colorMediumGrey; }
|
||||
.textareaWrap { background-color: $colorBgLight; }
|
||||
}
|
||||
|
||||
.tabImportIndex {
|
||||
.side.right.tabImportIndex {
|
||||
.item { border-color: $colorLineSecondary; }
|
||||
.item:hover, .item.active { border-color: $colorLinePrimary; }
|
||||
.item.notion .icon { background-image: url('#{$themePath}/icon/popup/settings/import/notion.svg'); }
|
||||
.item.roam .icon { background-image: url('#{$themePath}/icon/popup/settings/import/roam.svg'); }
|
||||
}
|
||||
|
||||
.tabImportNotion {
|
||||
.inputWrapper {
|
||||
.input { border-color: $colorLinePrimary; }
|
||||
}
|
||||
|
||||
.line { background-color: $colorLinePrimary; }
|
||||
.side.right.tabImportNotion {
|
||||
.btn { color: $colorSecondary; }
|
||||
.btn {
|
||||
.icon.help { background-image: url('#{$themePath}/icon/popup/settings/help0.svg'); }
|
||||
|
|
@ -80,24 +67,34 @@
|
|||
}
|
||||
}
|
||||
|
||||
.tabImportNotionHelp {
|
||||
.side.right.tabImportNotionHelp {
|
||||
.icon.notion { background-image: url('#{$themePath}/icon/popup/settings/import/notion.svg'); }
|
||||
.list img { border-color: $colorLinePrimary; }
|
||||
}
|
||||
|
||||
.tabImportNotionWarning {
|
||||
.listWrapper { border-color: $colorLineSecondary; }
|
||||
}
|
||||
|
||||
.tabAccount {
|
||||
.userInfo {
|
||||
.name { border-color: $colorLinePrimary; }
|
||||
.side.right.tabAppearance {
|
||||
.btn.light {
|
||||
.bg { background-color: $colorWhite; }
|
||||
}
|
||||
}
|
||||
|
||||
.tabSpaceIndex {
|
||||
.spaceInfo {
|
||||
.input { border-color: $colorLinePrimary; }
|
||||
.btn.dark {
|
||||
.bg { box-shadow: 0px 0px 0px 1px $colorLinePrimary; }
|
||||
.icon { background-image: url('~img/icon/popup/settings/theme/dark.svg'); }
|
||||
}
|
||||
.btn.system {
|
||||
.bg::before, .bg::after {
|
||||
content: ''; position: absolute; top: 0px; width: 50%; height: 100%;
|
||||
}
|
||||
.bg::before { left: 0px; background: $colorWhite; border-radius: 14px 0px 0px 14px; }
|
||||
.bg::after { right: 0px; box-shadow: 0px 0px 0px 1px $colorLinePrimary; border-radius: 0px 14px 14px 0px; }
|
||||
.icon { background-image: url('~img/icon/popup/settings/theme/system.svg'); }
|
||||
}
|
||||
|
||||
.btn.active {
|
||||
.bg { box-shadow: 0px 0px 0px 2px #ffee94; }
|
||||
}
|
||||
.btn.system.active {
|
||||
.bg::before { box-shadow: 0px 0px; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -808,7 +808,10 @@ const BlockDataview = observer(class BlockDataview extends React.Component<Props
|
|||
const view = this.getView();
|
||||
|
||||
let records = this.getRecords();
|
||||
let orders = [];
|
||||
let oldIndex = records.indexOf(ids[0]);
|
||||
let targetIndex = records.indexOf(targetId);
|
||||
|
||||
records = arrayMove(records, oldIndex, targetIndex);
|
||||
|
||||
if (selection) {
|
||||
selection.clear();
|
||||
|
|
@ -821,12 +824,11 @@ const BlockDataview = observer(class BlockDataview extends React.Component<Props
|
|||
ids.forEach((id, index) => {
|
||||
const oldIndex = records.indexOf(id);
|
||||
const targetIndex = records.indexOf(targetId);
|
||||
|
||||
records = arrayMove(records, oldIndex, targetIndex);
|
||||
});
|
||||
|
||||
orders = [ { viewId: view.id, groupId: '', objectIds: records } ];
|
||||
|
||||
this.objectOrderUpdate(orders, records, (message) => {
|
||||
this.objectOrderUpdate([ { viewId: view.id, groupId: '', objectIds: records } ], records, (message) => {
|
||||
dbStore.recordsSet(subId, '', records);
|
||||
});
|
||||
};
|
||||
|
|
|
|||
|
|
@ -134,15 +134,13 @@ class DragLayer extends React.Component<object, State> {
|
|||
dataview.append(view);
|
||||
wrap.addClass('blocks').append(dataview);
|
||||
|
||||
ids.forEach((id, idx) => {
|
||||
ids.forEach((id: string, idx: number) => {
|
||||
const el = $(`.drop-target-${id}`).parent();
|
||||
const style = {
|
||||
marginLeft: idx * 10,
|
||||
marginTop: idx * 10,
|
||||
zIndex: ids.length - idx
|
||||
};
|
||||
const margin = idx * 10;
|
||||
const clone = el.clone().addClass('record');
|
||||
|
||||
view.append(el.clone().addClass('record').css(style));
|
||||
view.append(clone);
|
||||
clone.css({ marginLeft: margin, marginTop: margin, zIndex: (ids.length - idx) });
|
||||
});
|
||||
break;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -23,17 +23,15 @@ class MenuContext extends React.Component<I.Menu> {
|
|||
<div id={'section-' + item.id} className="section">
|
||||
{item.name ? <div className="name">{item.name}</div> : ''}
|
||||
<div className="items">
|
||||
{item.children.map((action: any, i: number) => {
|
||||
return (
|
||||
<MenuItemVertical
|
||||
key={i}
|
||||
{...action}
|
||||
icon={action.icon || action.id}
|
||||
onMouseEnter={(e: any) => { this.onMouseEnter(e, action); }}
|
||||
onClick={(e: any) => { this.onClick(e, action); }}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
{item.children.map((action: any, i: number) => (
|
||||
<MenuItemVertical
|
||||
key={i}
|
||||
{...action}
|
||||
icon={action.icon || action.id}
|
||||
onMouseEnter={(e: any) => { this.onMouseEnter(e, action); }}
|
||||
onClick={(e: any) => { this.onClick(e, action); }}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -104,20 +104,20 @@ const HeadSimple = observer(class Controls extends React.Component<Props> {
|
|||
arrow = true;
|
||||
};
|
||||
|
||||
button = <Button id="button-create" text={text} arrow={arrow} onClick={onCreate} />;
|
||||
button = <Button id="button-create" className="c36" text={text} arrow={arrow} onClick={onCreate} />;
|
||||
};
|
||||
|
||||
if ([ Constant.storeTypeId.type, Constant.storeTypeId.relation ].includes(object.type)) {
|
||||
let onClick = null;
|
||||
let className = '';
|
||||
const cn = [ 'c36' ];
|
||||
|
||||
let onClick = null;
|
||||
if (this.isInstalled()) {
|
||||
className = 'blank disabled';
|
||||
cn.push('blank disabled');
|
||||
} else {
|
||||
onClick = this.onInstall;
|
||||
};
|
||||
|
||||
button = <Button id="button-install" text="Install" className={className} onClick={onClick} />;
|
||||
button = <Button id="button-install" text="Install" className={cn.join(' ')} onClick={onClick} />;
|
||||
};
|
||||
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -31,8 +31,8 @@ const PopupConfirm = observer(class PopupConfirm extends React.Component<I.Popup
|
|||
<Label text={text} />
|
||||
|
||||
<div className="buttons">
|
||||
{canConfirm ? <Button text={textConfirm} color={colorConfirm} onClick={this.onConfirm} /> : ''}
|
||||
{canCancel ? <Button text={textCancel} color={colorCancel} onClick={this.onCancel} /> : ''}
|
||||
{canConfirm ? <Button text={textConfirm} color={colorConfirm} className="c36" onClick={this.onConfirm} /> : ''}
|
||||
{canCancel ? <Button text={textCancel} color={colorCancel} className="c36" onClick={this.onCancel} /> : ''}
|
||||
</div>
|
||||
</React.Fragment>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
import * as React from 'react';
|
||||
import { Icon, Title, Label } from 'Component';
|
||||
import { I, C, Storage, translate, Util, analytics } from 'Lib';
|
||||
import { authStore, commonStore, popupStore } from 'Store';
|
||||
import { Icon, Title, Label, IconObject, Input, Loader } from 'Component';
|
||||
import { I, C, Storage, translate, Util, analytics, Action, DataUtil, ObjectUtil } from 'Lib';
|
||||
import { authStore, commonStore, popupStore, detailStore, blockStore, menuStore } from 'Store';
|
||||
import { observer } from 'mobx-react';
|
||||
import Constant from 'json/constant.json';
|
||||
import Head from './head';
|
||||
import UserInfo from '../../settings/userinfo';
|
||||
|
||||
interface Props extends I.Popup {
|
||||
prevPage: string;
|
||||
|
|
@ -15,21 +15,26 @@ interface Props extends I.Popup {
|
|||
|
||||
interface State {
|
||||
error: string;
|
||||
loading: boolean;
|
||||
};
|
||||
|
||||
const PopupSettingsPageAccount = observer(class PopupSettingsPageAccount extends React.Component<Props, State> {
|
||||
|
||||
refPhrase: any = null;
|
||||
refName: any = null;
|
||||
pinConfirmed = false;
|
||||
format = '';
|
||||
refCheckbox: any = null;
|
||||
state = {
|
||||
error: '',
|
||||
loading: false,
|
||||
};
|
||||
|
||||
constructor (props: Props) {
|
||||
super(props);
|
||||
|
||||
this.onMenu = this.onMenu.bind(this);
|
||||
this.onUpload = this.onUpload.bind(this);
|
||||
this.onName = this.onName.bind(this);
|
||||
this.onLogout = this.onLogout.bind(this);
|
||||
this.onFileOffload = this.onFileOffload.bind(this);
|
||||
this.onLocationMove = this.onLocationMove.bind(this);
|
||||
|
|
@ -37,66 +42,69 @@ const PopupSettingsPageAccount = observer(class PopupSettingsPageAccount extends
|
|||
|
||||
render () {
|
||||
const { onPage } = this.props;
|
||||
const { error } = this.state;
|
||||
const { error, loading } = this.state;
|
||||
const { account } = authStore;
|
||||
const { config } = commonStore;
|
||||
const pin = Storage.get('pin');
|
||||
const profile = detailStore.get(Constant.subId.profile, blockStore.profile);
|
||||
const canDelete = account.status.type == I.AccountStatusType.Active;
|
||||
const canMove = config.experimental;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Head {...this.props} returnTo="index" name={translate('popupSettingsTitle')} />
|
||||
<React.Fragment>
|
||||
<Title text={translate('popupSettingsAccountTitle')} />
|
||||
|
||||
{error ? <div className="message">{error}</div> : ''}
|
||||
|
||||
<UserInfo {...this.props} />
|
||||
<div className="iconWrapper">
|
||||
{loading ? <Loader /> : ''}
|
||||
<IconObject
|
||||
id="userpic"
|
||||
object={profile}
|
||||
size={112}
|
||||
onClick={this.onMenu}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="rows">
|
||||
<Label className="sectionName" text="Access" />
|
||||
|
||||
<div className="row" onClick={() => { onPage('phrase'); }}>
|
||||
<Icon className="phrase" />
|
||||
<Label text={translate('popupSettingsPhraseTitle')} />
|
||||
<Icon className="arrow" />
|
||||
</div>
|
||||
|
||||
<div className="row" onClick={() => { onPage('pinIndex'); }}>
|
||||
<Icon className="pin" />
|
||||
<Label text={translate('popupSettingsPinTitle')} />
|
||||
<div className="status">
|
||||
{pin ? 'on' : 'off'}
|
||||
<div className="row">
|
||||
<div className="name">
|
||||
<Label className="small" text="Name" />
|
||||
<Input
|
||||
ref={ref => this.refName = ref}
|
||||
value={profile.name}
|
||||
onKeyUp={this.onName}
|
||||
placeholder={DataUtil.defaultName('page')}
|
||||
/>
|
||||
</div>
|
||||
<Icon className="arrow" />
|
||||
</div>
|
||||
|
||||
<Label className="sectionName" text="Data" />
|
||||
<Label className="section" text="Data" />
|
||||
|
||||
<div className="row" onClick={this.onFileOffload}>
|
||||
<div className="row cp" onClick={this.onFileOffload}>
|
||||
<Label text="Clear file cache" />
|
||||
</div>
|
||||
|
||||
<Label className="sectionName" text="Account" />
|
||||
<Label className="section" text="Account" />
|
||||
|
||||
{canMove ? (
|
||||
<div id="row-location" className="row location" onClick={this.onLocationMove}>
|
||||
<div id="row-location" className="row cp" onClick={this.onLocationMove}>
|
||||
<Label text={translate('popupSettingsAccountMoveTitle')} />
|
||||
<Icon className="arrow" />
|
||||
</div>
|
||||
) : ''}
|
||||
|
||||
{canDelete ? (
|
||||
<div className="row" onClick={() => { onPage('delete'); }}>
|
||||
<div className="row cp" onClick={() => { onPage('delete'); }}>
|
||||
<Label text={translate('popupSettingsAccountDeleteTitle')} />
|
||||
</div>
|
||||
) : ''}
|
||||
|
||||
<div className="row red" onClick={this.onLogout}>
|
||||
<div className="row red cp" onClick={this.onLogout}>
|
||||
<Label text={translate('popupSettingsLogout')} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</React.Fragment>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
@ -140,7 +148,7 @@ const PopupSettingsPageAccount = observer(class PopupSettingsPageAccount extends
|
|||
});
|
||||
};
|
||||
|
||||
onLocationMove (e: any) {
|
||||
onLocationMove () {
|
||||
const { account } = authStore;
|
||||
const { setLoading } = this.props;
|
||||
const accountPath = account.info.localStoragePath.replace(new RegExp(account.id + '\/?$'), '');
|
||||
|
|
@ -167,6 +175,67 @@ const PopupSettingsPageAccount = observer(class PopupSettingsPageAccount extends
|
|||
});
|
||||
};
|
||||
|
||||
onMenu () {
|
||||
const { getId } = this.props;
|
||||
const object = this.getObject();
|
||||
|
||||
if (!object.iconImage) {
|
||||
this.onUpload();
|
||||
return;
|
||||
};
|
||||
|
||||
const options = [
|
||||
{ id: 'upload', name: 'Change' },
|
||||
{ id: 'remove', name: 'Remove' }
|
||||
];
|
||||
|
||||
menuStore.open('select', {
|
||||
element: `#${getId()} #userpic`,
|
||||
horizontal: I.MenuDirection.Center,
|
||||
data: {
|
||||
value: '',
|
||||
options,
|
||||
onSelect: (e: any, item: any) => {
|
||||
switch (item.id) {
|
||||
case 'upload': {
|
||||
this.onUpload();
|
||||
break;
|
||||
};
|
||||
|
||||
case 'remove': {
|
||||
ObjectUtil.setIcon(blockStore.profile, '', '');
|
||||
break;
|
||||
};
|
||||
};
|
||||
},
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
onUpload () {
|
||||
Action.openFile(Constant.extension.cover, paths => {
|
||||
this.setState({ loading: true });
|
||||
|
||||
C.FileUpload('', paths[0], I.FileType.Image, (message: any) => {
|
||||
if (message.error.code) {
|
||||
return;
|
||||
};
|
||||
|
||||
ObjectUtil.setIcon(blockStore.profile, '', message.hash, () => {
|
||||
this.setState({ loading: false });
|
||||
});
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
onName () {
|
||||
ObjectUtil.setName(blockStore.profile, this.refName.getValue());
|
||||
};
|
||||
|
||||
getObject () {
|
||||
return detailStore.get(Constant.subId.profile, blockStore.profile);
|
||||
};
|
||||
|
||||
});
|
||||
|
||||
export default PopupSettingsPageAccount;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import * as React from 'react';
|
||||
import { RouteComponentProps } from 'react-router';
|
||||
import { Icon, Title, Label } from 'Component';
|
||||
import { Icon, Title, Label, Switch } from 'Component';
|
||||
import { I, translate, analytics, Renderer } from 'Lib';
|
||||
import { commonStore } from 'Store';
|
||||
import { observer } from 'mobx-react';
|
||||
|
|
@ -15,7 +15,7 @@ interface Props extends I.Popup, RouteComponentProps<any> {
|
|||
const PopupSettingsPageAppearance = observer(class PopupSettingsPageAppearance extends React.Component<Props> {
|
||||
|
||||
render () {
|
||||
const { onPage } = this.props;
|
||||
const { autoSidebar } = commonStore;
|
||||
const { theme } = commonStore;
|
||||
const themes: any[] = [
|
||||
{ id: '', class: 'light', name: 'Light' },
|
||||
|
|
@ -23,36 +23,40 @@ const PopupSettingsPageAppearance = observer(class PopupSettingsPageAppearance e
|
|||
{ id: 'system', class: 'system', name: 'System' },
|
||||
];
|
||||
|
||||
const inner = <div className="inner" />;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Head {...this.props} returnTo="index" name={translate('popupSettingsTitle')} />
|
||||
<React.Fragment>
|
||||
<Title text={translate('popupSettingsAppearanceTitle')} />
|
||||
|
||||
<div className="rows">
|
||||
<div className="row" onClick={() => { onPage('wallpaper'); }}>
|
||||
<Icon className="wallpaper" />
|
||||
<Label text={translate('popupSettingsWallpaperTitle')} />
|
||||
<Icon className="arrow" />
|
||||
</div>
|
||||
|
||||
<Label className="sectionName center" text="Mode" />
|
||||
<Label className="section" text="Color mode" />
|
||||
|
||||
<div className="buttons">
|
||||
{themes.map((item: any, i: number) => (
|
||||
<div
|
||||
key={i}
|
||||
className={[ 'btn', (theme == item.id ? 'active' : '') ].join(' ')}
|
||||
className={[ 'btn', (theme == item.id ? 'active' : ''), item.class ].join(' ')}
|
||||
onClick={() => { this.onTheme(item.id); }}
|
||||
>
|
||||
<Icon className={item.class} inner={inner} />
|
||||
<div className="bg">
|
||||
<Icon />
|
||||
</div>
|
||||
<Label text={item.name} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="rows">
|
||||
<div className="row">
|
||||
<div className="side left">
|
||||
<Label text="Automatically hide and show Sidebar" />
|
||||
</div>
|
||||
<div className="side right">
|
||||
<Switch value={autoSidebar} className="big" onChange={(e: any, v: boolean) => { commonStore.autoSidebarSet(v); }}/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</React.Fragment>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import * as React from 'react';
|
||||
import { RouteComponentProps } from 'react-router';
|
||||
import { Title, Label, Checkbox } from 'Component';
|
||||
import { Title, Button, Checkbox } from 'Component';
|
||||
import { I, C, translate, Util, analytics } from 'Lib';
|
||||
import { authStore } from 'Store';
|
||||
import { observer } from 'mobx-react';
|
||||
|
|
@ -29,23 +29,19 @@ const PopupSettingsPageDelete = observer(class PopupSettingsPageDelete extends R
|
|||
<div
|
||||
ref={node => this.node = node}
|
||||
>
|
||||
<Head {...this.props} returnTo="account" name={translate('commonCancel')} />
|
||||
<Head {...this.props} returnTo="account" name={translate('commonBack')} />
|
||||
<Title text={translate('popupSettingsAccountDeleteTitle')} />
|
||||
|
||||
<div className="text">
|
||||
<b>We're sorry to see you go. Once you request your account to be deleted, you have 30 days to cancel this request.</b>
|
||||
<p>You will be logged out on all other devices. You will have 30 days to recover it. Afterwards it will be deleted permanently</p>
|
||||
|
||||
<div className="check" onClick={this.onCheck}>
|
||||
<Checkbox ref={ref => { this.refCheckbox = ref; }} /> I have read it and want to delete my account
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rows">
|
||||
<div id="row-delete" className="row disabled" onClick={this.onDelete}>
|
||||
<Label text={translate('commonDelete')} />
|
||||
</div>
|
||||
<div className="check" onClick={this.onCheck}>
|
||||
<Checkbox ref={ref => { this.refCheckbox = ref; }} /> I have read it and want to delete my account
|
||||
</div>
|
||||
|
||||
<Button id="button" text={translate('commonDelete')} color="red c36" className="disabled" onClick={this.onDelete} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -71,13 +67,11 @@ const PopupSettingsPageDelete = observer(class PopupSettingsPageDelete extends R
|
|||
|
||||
onCheck () {
|
||||
const node = $(this.node);
|
||||
const row = node.find('#row-delete');
|
||||
const button = node.find('#button');
|
||||
const value = this.refCheckbox.getValue();
|
||||
|
||||
row.removeClass('red disabled');
|
||||
|
||||
this.refCheckbox.setValue(!value);
|
||||
!value ? row.addClass('red') : row.addClass('disabled');
|
||||
value ? button.removeClass('disabled') : button.addClass('disabled');
|
||||
};
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -4,8 +4,6 @@ import { Title, Label, Button, Switch } from 'Component';
|
|||
import { I, translate, Storage } from 'Lib';
|
||||
import { observer } from 'mobx-react';
|
||||
|
||||
import Head from '../head';
|
||||
|
||||
interface Props extends I.Popup, RouteComponentProps<any> {
|
||||
prevPage: string;
|
||||
onPage: (id: string) => void;
|
||||
|
|
@ -29,35 +27,42 @@ const PopupSettingsPageExportMarkdown = observer(class PopupSettingsPageExportMa
|
|||
this.init();
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Head {...this.props} returnTo="index" name={translate('popupSettingsTitle')} />
|
||||
|
||||
<React.Fragment>
|
||||
<Title text={translate('popupSettingsExportMarkdownTitle')} />
|
||||
<Label text={translate('popupSettingsExportMarkdownText')} />
|
||||
|
||||
{items.map((item: any, i: number) => (
|
||||
<div key={i} className="row">
|
||||
<div className="side left">
|
||||
<Label text={item.name} />
|
||||
</div>
|
||||
<div className="side right">
|
||||
<Switch
|
||||
className="big"
|
||||
value={this[item.id]}
|
||||
onChange={(e: any, v: boolean) => {
|
||||
this[item.id] = v;
|
||||
this.save();
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
<div className="labels">
|
||||
<Label text={translate('popupSettingsExportMarkdownText1')} />
|
||||
<Label text={translate('popupSettingsExportMarkdownText2')} />
|
||||
</div>
|
||||
|
||||
<Button
|
||||
text={translate('popupSettingsExportOk')}
|
||||
onClick={() => { onExport(I.ExportFormat.Markdown, { zip: this.zip, nested: this.nested, files: this.files }); }}
|
||||
/>
|
||||
</div>
|
||||
<div className="rows">
|
||||
{items.map((item: any, i: number) => (
|
||||
<div key={i} className="row">
|
||||
<div className="side left">
|
||||
<Label text={item.name} />
|
||||
</div>
|
||||
<div className="side right">
|
||||
<Switch
|
||||
className="big"
|
||||
value={this[item.id]}
|
||||
onChange={(e: any, v: boolean) => {
|
||||
this[item.id] = v;
|
||||
this.save();
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="buttons">
|
||||
<Button
|
||||
text={translate('popupSettingsExportOk')}
|
||||
className="c36"
|
||||
onClick={() => { onExport(I.ExportFormat.Markdown, { zip: this.zip, nested: this.nested, files: this.files }); }}
|
||||
/>
|
||||
</div>
|
||||
</React.Fragment>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -19,27 +19,23 @@ const PopupSettingsPageImportIndex = observer(class PopupSettingsPageImportIndex
|
|||
const Item = (item: any) => {
|
||||
return (
|
||||
<div className={[ 'item', item.id ].join(' ')} onClick={() => { this.onClick(item.id); }} >
|
||||
<div className="txt">
|
||||
<Icon />
|
||||
<div className="name">{item.name}</div>
|
||||
</div>
|
||||
<Icon />
|
||||
<div className="name">{item.name}</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Head {...this.props} returnTo="index" name={translate('popupSettingsTitle')} />
|
||||
|
||||
<React.Fragment>
|
||||
<Title text={translate('popupSettingsImportTitle')} />
|
||||
<Label className="center" text={translate('popupSettingsImportText')} />
|
||||
<Label className="description" text={translate('popupSettingsImportText')} />
|
||||
|
||||
<div className="items">
|
||||
{items.map((item: any, i: number) => (
|
||||
<Item key={i} {...item} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</React.Fragment>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
@ -50,35 +46,27 @@ const PopupSettingsPageImportIndex = observer(class PopupSettingsPageImportIndex
|
|||
const fn = Util.toCamelCase('onImport-' + item.id);
|
||||
|
||||
if (item.skipPage && this[fn]) {
|
||||
this[fn]();
|
||||
this[fn]();
|
||||
} else {
|
||||
onPage(Util.toCamelCase('import-' + item.id));
|
||||
};
|
||||
};
|
||||
|
||||
getItems () {
|
||||
const { config } = commonStore;
|
||||
|
||||
let items = [
|
||||
return [
|
||||
{ id: 'notion', name: 'Notion' },
|
||||
{ id: 'markdown', name: 'Markdown' },
|
||||
{ id: 'html', name: 'HTML', skipPage: true },
|
||||
{ id: 'text', name: 'Text', skipPage: true },
|
||||
];
|
||||
if (!config.experimental) {
|
||||
items = items.filter(it => [ 'html' ].includes(it.id));
|
||||
};
|
||||
|
||||
return items;
|
||||
};
|
||||
|
||||
onImportHtml () {
|
||||
onImportCommon (type: I.ImportType, extensions: string[]) {
|
||||
const { close, onImport } = this.props;
|
||||
const platform = Util.getPlatform();
|
||||
const options: any = {
|
||||
properties: [ 'openFile' ],
|
||||
filters: [
|
||||
{ name: '', extensions: [ 'zip', 'html', 'htm', 'mhtml' ] }
|
||||
]
|
||||
filters: [ { name: '', extensions } ]
|
||||
};
|
||||
|
||||
if (platform == I.Platform.Mac) {
|
||||
|
|
@ -86,16 +74,24 @@ const PopupSettingsPageImportIndex = observer(class PopupSettingsPageImportIndex
|
|||
};
|
||||
|
||||
window.Electron.showOpenDialog(options).then((result: any) => {
|
||||
const files = result.filePaths;
|
||||
if ((files == undefined) || !files.length) {
|
||||
const paths = result.filePaths;
|
||||
if ((paths == undefined) || !paths.length) {
|
||||
return;
|
||||
};
|
||||
|
||||
close();
|
||||
onImport(I.ImportType.Html, { paths: files });
|
||||
onImport(type, { paths });
|
||||
});
|
||||
};
|
||||
|
||||
onImportHtml () {
|
||||
this.onImportCommon(I.ImportType.Html, [ 'zip', 'html', 'htm', 'mhtml' ]);
|
||||
};
|
||||
|
||||
onImportText () {
|
||||
this.onImportCommon(I.ImportType.Text, [ 'zip', 'txt' ]);
|
||||
};
|
||||
|
||||
});
|
||||
|
||||
export default PopupSettingsPageImportIndex;
|
||||
|
|
@ -33,7 +33,7 @@ class PopupSettingsPageImportMarkdown extends React.Component<Props> {
|
|||
|
||||
<Label className="last" text={translate('popupSettingsImportZip')} />
|
||||
|
||||
<Button text={translate('popupSettingsImportOk')} onClick={this.onImport} />
|
||||
<Button className="c36" text={translate('popupSettingsImportOk')} onClick={this.onImport} />
|
||||
|
||||
<Label className="last" text={translate('popupSettingsImportWarning')} />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -32,10 +32,11 @@ class PopupSettingsPageImportNotion extends React.Component<Props, State> {
|
|||
const { error } = this.state;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Head {...this.props} returnTo="importIndex" name={translate('popupSettingsImportTitle')} />
|
||||
<React.Fragment>
|
||||
<Head {...this.props} returnTo="importIndex" name={translate('commonBack')} />
|
||||
|
||||
<Title text="Notion" />
|
||||
<Label className="center" text="Import your Notion files through the Notion API with 2 simple steps" />
|
||||
<Label className="description" text="Import your Notion files through the Notion API with 2 simple steps" />
|
||||
|
||||
<div className="inputWrapper flex">
|
||||
<div className="errorWrapper">
|
||||
|
|
@ -46,7 +47,7 @@ class PopupSettingsPageImportNotion extends React.Component<Props, State> {
|
|||
/>
|
||||
{error ? <Error text={error} /> : ''}
|
||||
</div>
|
||||
<Button text={translate('popupSettingsImportOk')} onClick={this.onImport} />
|
||||
<Button text={translate('popupSettingsImportOk')} className="c36" onClick={this.onImport} />
|
||||
</div>
|
||||
|
||||
<div className="line" />
|
||||
|
|
@ -68,7 +69,7 @@ class PopupSettingsPageImportNotion extends React.Component<Props, State> {
|
|||
<Label className="grey" text="Select document -> ... -> Add Connections -> Confirm Integration" />
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</React.Fragment>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ class PopupSettingsPageImportNotionWarning extends React.Component<Props> {
|
|||
</ol>
|
||||
</div>
|
||||
|
||||
<Button text="Proceed" onClick={this.onImport} />
|
||||
<Button className="c36" text="Proceed" onClick={this.onImport} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,71 +0,0 @@
|
|||
import * as React from 'react';
|
||||
import { Icon, Title, Label, IconObject } from 'Component';
|
||||
import { I, translate } from 'Lib';
|
||||
import { authStore, blockStore, detailStore, commonStore } from 'Store';
|
||||
import { observer } from 'mobx-react';
|
||||
import Constant from 'json/constant.json';
|
||||
|
||||
interface Props extends I.Popup {
|
||||
prevPage: string;
|
||||
onPage: (id: string) => void;
|
||||
};
|
||||
|
||||
const PopupSettingsPageIndex = observer(class PopupSettingsPageIndex extends React.Component<Props> {
|
||||
|
||||
render () {
|
||||
const { onPage } = this.props;
|
||||
const { account } = authStore;
|
||||
const profile = detailStore.get(Constant.subId.profile, blockStore.profile);
|
||||
const space = detailStore.get(Constant.subId.space, commonStore.workspace);
|
||||
|
||||
let rows = [
|
||||
{ id: 'personal', title: translate('popupSettingsPersonalTitle'), icon: 'personal' },
|
||||
{ id: 'appearance', title: translate('popupSettingsAppearanceTitle'), icon: 'appearance' },
|
||||
{ id: 'importIndex', title: translate('popupSettingsImportTitle'), icon: 'import' },
|
||||
{ id: 'exportMarkdown', title: translate('popupSettingsExportTitle'), icon: 'export' }
|
||||
];
|
||||
|
||||
if (account) {
|
||||
rows = [
|
||||
{ id: 'account', title: translate('popupSettingsAccountTitle'), icon: '' },
|
||||
{ id: 'spaceIndex', title: (space._empty_ ? translate('popupSettingsSpaceTitle') : space.name), icon: '' }
|
||||
].concat(rows);
|
||||
};
|
||||
|
||||
const Row = (row: any) => {
|
||||
let icon = null;
|
||||
if (row.id == 'account') {
|
||||
icon = <IconObject object={profile} size={32} forceLetter={true} />;
|
||||
} else
|
||||
if (row.id == 'spaceIndex') {
|
||||
icon = <IconObject object={space} size={32} forceLetter={true} />;
|
||||
} else
|
||||
if (row.icon) {
|
||||
icon = <Icon className={row.icon} />;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="row" onClick={() => { onPage(row.id); }}>
|
||||
{icon}
|
||||
<Label text={row.title} />
|
||||
<Icon className="arrow" />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Title text={translate('popupSettingsTitle')} />
|
||||
|
||||
<div className="rows">
|
||||
{rows.map((item: any, i: number) => (
|
||||
<Row key={i} {...item} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
});
|
||||
|
||||
export default PopupSettingsPageIndex;
|
||||
|
|
@ -42,10 +42,10 @@ const PopupSettingsPageLogout = observer(class PopupSettingsPageLogout extends R
|
|||
<div
|
||||
ref={node => this.node = node}
|
||||
>
|
||||
<Head {...this.props} returnTo="account" name={translate('popupSettingsAccountTitle')} />
|
||||
<Head {...this.props} returnTo="account" name={translate('commonBack')} />
|
||||
|
||||
<Title text={translate('popupSettingsPhraseTitle')} />
|
||||
<Label text={translate('popupSettingsPhraseText')} />
|
||||
<Label className="description" text={translate('popupSettingsPhraseText')} />
|
||||
|
||||
<div className="inputs">
|
||||
<div className="textareaWrap">
|
||||
|
|
@ -64,8 +64,8 @@ const PopupSettingsPageLogout = observer(class PopupSettingsPageLogout extends R
|
|||
</div>
|
||||
|
||||
<div className="buttons">
|
||||
<Button color="blank" text={translate('popupSettingsPhraseBackup')} onClick={this.onCopy} />
|
||||
<Button color="blank" className="red" text={translate('popupSettingsLogout')} onClick={this.onLogout} />
|
||||
<Button className="c36" text={translate('popupSettingsPhraseBackup')} onClick={this.onCopy} />
|
||||
<Button color="red" className="c36" text={translate('popupSettingsLogout')} onClick={this.onLogout} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,9 +1,8 @@
|
|||
import * as React from 'react';
|
||||
import { observer } from 'mobx-react';
|
||||
import { Icon, Title, Label, Switch, Select } from 'Component';
|
||||
import { I, translate, analytics, Renderer } from 'Lib';
|
||||
import { commonStore, menuStore, dbStore } from 'Store';
|
||||
import { observer } from 'mobx-react';
|
||||
import Head from './head';
|
||||
import Constant from 'json/constant.json';
|
||||
|
||||
interface Props extends I.Popup {
|
||||
|
|
@ -20,13 +19,12 @@ const PopupSettingsPagePersonal = observer(class PopupSettingsPagePersonal exten
|
|||
};
|
||||
|
||||
render () {
|
||||
const { autoSidebar, config } = commonStore;
|
||||
const { config } = commonStore;
|
||||
const type = dbStore.getType(commonStore.type);
|
||||
const languages = this.getLanguages();
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Head {...this.props} returnTo="index" name={translate('popupSettingsTitle')} />
|
||||
<React.Fragment>
|
||||
<Title text={translate('popupSettingsPersonalTitle')} />
|
||||
|
||||
<div className="rows">
|
||||
|
|
@ -61,17 +59,8 @@ const PopupSettingsPagePersonal = observer(class PopupSettingsPagePersonal exten
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="row">
|
||||
<div className="side left">
|
||||
<Label text="Automatically hide and show Sidebar" />
|
||||
</div>
|
||||
<div className="side right">
|
||||
<Switch value={autoSidebar} className="big" onChange={(e: any, v: boolean) => { commonStore.autoSidebarSet(v); }}/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</React.Fragment>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -36,23 +36,19 @@ const PopupSettingsPagePhrase = observer(class PopupSettingsPagePhrase extends R
|
|||
|
||||
this.onFocus = this.onFocus.bind(this);
|
||||
this.onBlur = this.onBlur.bind(this);
|
||||
this.onCopy = this.onCopy.bind(this);
|
||||
this.onCode = this.onCode.bind(this);
|
||||
};
|
||||
|
||||
render () {
|
||||
const { entropy, showCode } = this.state;
|
||||
const { theme } = commonStore;
|
||||
const { phrase } = authStore;
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={node => this.node = node}
|
||||
>
|
||||
<Head {...this.props} returnTo="account" name={translate('popupSettingsAccountTitle')} />
|
||||
|
||||
<Title text={translate('popupSettingsPhraseTitle')} />
|
||||
<Label text={translate('popupSettingsPhraseText')} />
|
||||
<Label className="description" text={translate('popupSettingsPhraseText')} />
|
||||
|
||||
<div className="inputs">
|
||||
<div className="textareaWrap">
|
||||
|
|
@ -68,25 +64,16 @@ const PopupSettingsPagePhrase = observer(class PopupSettingsPagePhrase extends R
|
|||
readonly={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Button id="button-phrase" color="blank" text={translate('popupSettingsPhraseShowPhrase')} onClick={this.onCopy} />
|
||||
</div>
|
||||
|
||||
<div className="sides">
|
||||
<div className="side left">
|
||||
<b>{translate('popupSettingsMobileQRSubTitle')}</b>
|
||||
<Label text={translate('popupSettingsMobileQRText')} />
|
||||
</div>
|
||||
<Title className="sub" text={translate('popupSettingsMobileQRSubTitle')} />
|
||||
<Label className="description" text={translate('popupSettingsMobileQRText')} />
|
||||
|
||||
<div className={[ 'side', 'right', (!showCode ? 'isBlurred' : '') ].join(' ')} onClick={this.onCode}>
|
||||
<div className="qrWrap">
|
||||
<QRCode value={showCode ? entropy : translate('popupSettingsCodeStub')} bgColor={QRColor[theme]} size={100} />
|
||||
</div>
|
||||
<div className="qrWrap" onClick={this.onCode}>
|
||||
<div className={!showCode ? 'isBlurred' : ''}>
|
||||
<QRCode value={showCode ? entropy : translate('popupSettingsCodeStub')} bgColor={QRColor[theme]} size={116} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button id="button-qr" color="blank" text={translate(showCode ? 'popupSettingsPhraseHideQR' : 'popupSettingsPhraseShowQR')} onClick={this.onCode} />
|
||||
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -106,7 +93,6 @@ const PopupSettingsPagePhrase = observer(class PopupSettingsPagePhrase extends R
|
|||
onFocus () {
|
||||
const node = $(this.node);
|
||||
const phrase = node.find('#phrase');
|
||||
const button = node.find('#button-phrase');
|
||||
|
||||
this.refPhrase.setValue(authStore.phrase);
|
||||
this.refPhrase.select();
|
||||
|
|
@ -115,31 +101,17 @@ const PopupSettingsPagePhrase = observer(class PopupSettingsPagePhrase extends R
|
|||
Preview.toastShow({ text: 'Recovery phrase copied to clipboard' });
|
||||
|
||||
phrase.removeClass('isBlurred');
|
||||
button.text(translate('popupSettingsPhraseHidePhrase'));
|
||||
analytics.event('KeychainCopy', { type: 'ScreenSettings' });
|
||||
};
|
||||
|
||||
onBlur () {
|
||||
const node = $(this.node);
|
||||
const phrase = node.find('#phrase');
|
||||
const button = node.find('#button-phrase');
|
||||
|
||||
this.refPhrase.setValue(translate('popupSettingsPhraseStub'));
|
||||
|
||||
phrase.addClass('isBlurred');
|
||||
window.getSelection().removeAllRanges();
|
||||
button.text(translate('popupSettingsPhraseShowPhrase'));
|
||||
};
|
||||
|
||||
onCopy () {
|
||||
const node = $(this.node);
|
||||
const phrase = node.find('#phrase');
|
||||
|
||||
if (phrase.hasClass('isBlurred')) {
|
||||
this.onFocus();
|
||||
} else {
|
||||
this.onBlur();
|
||||
};
|
||||
};
|
||||
|
||||
onCode () {
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@ import * as React from 'react';
|
|||
import { Title, Label, Pin, Error } from 'Component';
|
||||
import { I, Storage, translate } from 'Lib';
|
||||
import { observer } from 'mobx-react';
|
||||
import Head from '../head';
|
||||
|
||||
interface Props extends I.Popup {
|
||||
prevPage: string;
|
||||
|
|
@ -33,15 +32,12 @@ const PopupSettingsPagePinConfirm = observer(class PopupSettingsPagePinConfirm e
|
|||
const pin = Storage.get('pin');
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Head {...this.props} name={translate('commonCancel')} />
|
||||
|
||||
<React.Fragment>
|
||||
<Title text={translate('popupSettingsPinTitle')} />
|
||||
<Label text={translate('popupSettingsPinVerify')} />
|
||||
<Error text={error} />
|
||||
|
||||
<Label className="description" text={translate('popupSettingsPinVerify')} />
|
||||
<Pin value={pin} onSuccess={this.onCheckPin} onError={this.onError} />
|
||||
</div>
|
||||
<Error text={error} />
|
||||
</React.Fragment>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
@ -64,4 +60,4 @@ const PopupSettingsPagePinConfirm = observer(class PopupSettingsPagePinConfirm e
|
|||
|
||||
});
|
||||
|
||||
export default PopupSettingsPagePinConfirm;
|
||||
export default PopupSettingsPagePinConfirm;
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
import * as React from 'react';
|
||||
import { RouteComponentProps } from 'react-router';
|
||||
import { Title, Label, Select } from 'Component';
|
||||
import { Title, Label, Select, Button } from 'Component';
|
||||
import { I, Util, Storage, translate, analytics } from 'Lib';
|
||||
import { commonStore } from 'Store';
|
||||
import { observer } from 'mobx-react';
|
||||
|
|
@ -37,40 +37,35 @@ const PopupSettingsPagePinIndex = observer(class PopupSettingsPagePinIndex exten
|
|||
});
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Head {...this.props} returnTo="account" name={translate('popupSettingsAccountTitle')} />
|
||||
|
||||
<React.Fragment>
|
||||
<Title text={translate('popupSettingsPinTitle')} />
|
||||
<Label className="description" text={translate('popupSettingsPinText')} />
|
||||
|
||||
<div className="rows">
|
||||
{pin ? (
|
||||
<React.Fragment>
|
||||
<div className="row red" onClick={this.onTurnOffPin}>
|
||||
<Label text={translate('popupSettingsPinOff')} />
|
||||
|
||||
{pin ? (
|
||||
<div className="rows">
|
||||
<div className="row">
|
||||
<div className="side left">
|
||||
<Label text="PIN code check time-out" />
|
||||
</div>
|
||||
|
||||
<div className="row">
|
||||
<div className="side left">
|
||||
<Label text="PIN code check time-out" />
|
||||
</div>
|
||||
<div className="side right">
|
||||
<Select id="pinTime" arrowClassName="light" options={times} value={String(pinTime || '')} onChange={(id: string) => { commonStore.pinTimeSet(id); }}/>
|
||||
</div>
|
||||
<div className="side right">
|
||||
<Select id="pinTime" arrowClassName="light" options={times} value={String(pinTime || '')} onChange={(id: string) => { commonStore.pinTimeSet(id); }}/>
|
||||
</div>
|
||||
|
||||
<div className="row" onClick={this.onChangePin}>
|
||||
<Label text={translate('popupSettingsPinChange')} />
|
||||
</div>
|
||||
</React.Fragment>
|
||||
): (
|
||||
<div className="row" onClick={this.onTurnOnPin}>
|
||||
<Label text={translate('popupSettingsPinOn')} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div className="row cp" onClick={this.onChangePin}>
|
||||
<Label text={translate('popupSettingsPinChange')} />
|
||||
</div>
|
||||
|
||||
<div className="row red cp" onClick={this.onTurnOffPin}>
|
||||
<Label text={translate('popupSettingsPinOff')} />
|
||||
</div>
|
||||
</div>
|
||||
): (
|
||||
<div className="buttons">
|
||||
<Button className="c36" text={translate('popupSettingsPinOn')} onClick={this.onTurnOnPin} />
|
||||
</div>
|
||||
)}
|
||||
</React.Fragment>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@ import { observer } from 'mobx-react';
|
|||
import sha1 from 'sha1';
|
||||
import { Title, Label, Pin } from 'Component';
|
||||
import { I, Storage, translate } from 'Lib';
|
||||
import Head from '../head';
|
||||
|
||||
interface Props extends I.Popup, RouteComponentProps<any> {
|
||||
prevPage: string;
|
||||
|
|
@ -22,11 +21,8 @@ const PopupSettingsPagePinSelect = observer(class PopupSettingsPagePinSelect ext
|
|||
render () {
|
||||
return (
|
||||
<div>
|
||||
<Head {...this.props} returnTo="pinIndex" name={translate('commonCancel')} />
|
||||
|
||||
<Title text={translate('popupSettingsPinTitle')} />
|
||||
<Label text={translate('popupSettingsPinText')} />
|
||||
|
||||
<Label className="description" text={translate('popupSettingsPinText')} />
|
||||
<Pin onSuccess={this.onSelectPin} />
|
||||
</div>
|
||||
);
|
||||
|
|
@ -39,4 +35,4 @@ const PopupSettingsPagePinSelect = observer(class PopupSettingsPagePinSelect ext
|
|||
|
||||
});
|
||||
|
||||
export default PopupSettingsPagePinSelect;
|
||||
export default PopupSettingsPagePinSelect;
|
||||
|
|
@ -4,7 +4,6 @@ import { C, ObjectUtil, DataUtil, I, translate } from 'Lib';
|
|||
import { observer } from 'mobx-react';
|
||||
import { detailStore, menuStore, commonStore } from 'Store';
|
||||
import Constant from 'json/constant.json';
|
||||
import Head from '../head';
|
||||
|
||||
interface Props extends I.Popup {
|
||||
prevPage: string;
|
||||
|
|
@ -28,30 +27,26 @@ const PopupSettingsSpaceIndex = observer(class PopupSettingsSpaceIndex extends R
|
|||
render () {
|
||||
const subId = Constant.subId.space;
|
||||
const space = detailStore.get(subId, commonStore.workspace);
|
||||
const home = detailStore.get(subId, space.spaceDashboardId);
|
||||
const name = this.checkName(space.name);
|
||||
const home = ObjectUtil.getSpaceDashboard();
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Head {...this.props} returnTo="index" name={translate('popupSettingsTitle')} />
|
||||
|
||||
<div className="spaceInfo">
|
||||
<IconObject
|
||||
id="spaceIcon"
|
||||
size={112}
|
||||
object={space}
|
||||
forceLetter={true}
|
||||
canEdit={true}
|
||||
menuParam={{ horizontal: I.MenuDirection.Center }}
|
||||
onSelect={this.onSelect}
|
||||
onUpload={this.onUpload}
|
||||
/>
|
||||
</div>
|
||||
<React.Fragment>
|
||||
<IconObject
|
||||
id="spaceIcon"
|
||||
size={112}
|
||||
object={space}
|
||||
forceLetter={true}
|
||||
canEdit={true}
|
||||
menuParam={{ horizontal: I.MenuDirection.Center }}
|
||||
onSelect={this.onSelect}
|
||||
onUpload={this.onUpload}
|
||||
/>
|
||||
|
||||
<div className="rows">
|
||||
<div className="row">
|
||||
<div className="name">
|
||||
<Label className="small" text="Name" />
|
||||
<Label className="small" text="Space name" />
|
||||
<Input
|
||||
ref={ref => this.refName = ref}
|
||||
value={name}
|
||||
|
|
@ -61,6 +56,8 @@ const PopupSettingsSpaceIndex = observer(class PopupSettingsSpaceIndex extends R
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<Label className="section" text="Settings" />
|
||||
|
||||
<div className="row">
|
||||
<div className="side left">
|
||||
<Label text="Type" />
|
||||
|
|
@ -80,8 +77,9 @@ const PopupSettingsSpaceIndex = observer(class PopupSettingsSpaceIndex extends R
|
|||
<div className="side right">
|
||||
<div id="dashboard" className="select" onClick={this.onDashboard}>
|
||||
<div className="item">
|
||||
{home ? <IconObject size={20} iconSize={20} object={home} /> : ''}
|
||||
<div className="name">
|
||||
{home._empty_ ? 'Select' : home.name}
|
||||
{home ? home.name : 'Select'}
|
||||
</div>
|
||||
</div>
|
||||
<Icon className="arrow light" />
|
||||
|
|
@ -89,7 +87,7 @@ const PopupSettingsSpaceIndex = observer(class PopupSettingsSpaceIndex extends R
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</React.Fragment>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
@ -114,6 +112,12 @@ const PopupSettingsSpaceIndex = observer(class PopupSettingsSpaceIndex extends R
|
|||
{ operator: I.FilterOperator.And, relationKey: 'type', condition: I.FilterCondition.NotIn, value: skipTypes },
|
||||
],
|
||||
canAdd: true,
|
||||
dataChange: (items: any[]) => {
|
||||
return [
|
||||
ObjectUtil.graph(),
|
||||
{ isDiv: true },
|
||||
].concat(items);
|
||||
},
|
||||
onSelect: (el: any) => {
|
||||
C.ObjectWorkspaceSetDashboard(workspace, el.id, (message: any) => {
|
||||
if (message.error.code) {
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@ const PopupSettingsSpaceInvite = observer(class PopupSettingsSpaceInvite extends
|
|||
</div>
|
||||
|
||||
<Label className="description" text={translate(`popupSettingsSpaceInviteMemberTypeText${Util.toUpperCamelCase(this.memberType)}`)} />
|
||||
<Button text={translate('popupSettingsSpaceInviteButton')} />
|
||||
<Button className="c36" text={translate('popupSettingsSpaceInviteButton')} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ const PopupSettingsSpaceLeave = observer(class PopupSettingsSpaceLeave extends R
|
|||
<Head {...this.props} returnTo="spaceIndex" name={translate('popupSettingsSpaceIndexTitle')} />
|
||||
<Title text={Util.sprintf(translate('popupSettingsSpaceLeave'), space.name)} />
|
||||
<Label text={translate('popupSettingsSpaceLeaveText')} />
|
||||
<Button className="blank red" text={translate('popupSettingsSpaceLeaveButton')} />
|
||||
<Button color="red" className="c36" text={translate('popupSettingsSpaceLeaveButton')} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ const PopupSettingsSpaceRemove = observer(class PopupSettingsSpaceRemove extends
|
|||
<Head {...this.props} returnTo="spaceIndex" name={translate('popupSettingsSpaceIndexTitle')} />
|
||||
<Title text={Util.sprintf(translate('popupSettingsSpaceRemove'), space.name)} />
|
||||
<Label text={translate('popupSettingsSpaceRemoveText')} />
|
||||
<Button className="blank red" text={translate('popupSettingsSpaceRemoveButton')} />
|
||||
<Button color="red" className="c36" text={translate('popupSettingsSpaceRemoveButton')} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -133,7 +133,7 @@ const PopupSettingsSpaceTeam = observer(class PopupSettingsSpaceTeam extends Rea
|
|||
</div>
|
||||
|
||||
<div className="buttons">
|
||||
<Button onClick={() => onPage('spaceInvite')} text={translate('popupSettingsSpaceTeamButton')} />
|
||||
<Button className="c36" onClick={() => onPage('spaceInvite')} text={translate('popupSettingsSpaceTeamButton')} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,110 +0,0 @@
|
|||
import * as React from 'react';
|
||||
import { Cover, Title, Label } from 'Component';
|
||||
import { I, C, DataUtil, ObjectUtil, translate, analytics, Action } from 'Lib';
|
||||
import { commonStore, blockStore } from 'Store';
|
||||
import { observer } from 'mobx-react';
|
||||
import Constant from 'json/constant.json';
|
||||
import Head from './head';
|
||||
|
||||
interface Props extends I.Popup {
|
||||
prevPage: string;
|
||||
onPage: (id: string) => void;
|
||||
setLoading: (v: boolean) => void;
|
||||
};
|
||||
|
||||
const PopupSettingsPageWallpaper = observer(class PopupSettingsPageWallpaper extends React.Component<Props> {
|
||||
|
||||
constructor (props: Props) {
|
||||
super(props);
|
||||
|
||||
this.onCover = this.onCover.bind(this);
|
||||
this.onFileClick = this.onFileClick.bind(this);
|
||||
};
|
||||
|
||||
render () {
|
||||
const { cover } = commonStore;
|
||||
const covers = [];
|
||||
|
||||
if (cover.type == I.CoverType.Upload) {
|
||||
covers.push(cover);
|
||||
};
|
||||
for (let i = 1; i <= Constant.coverCnt; ++i) {
|
||||
covers.push({ id: 'c' + i, image: '', type: I.CoverType.Image });
|
||||
};
|
||||
|
||||
const sections = [
|
||||
{ name: translate('popupSettingsPicture'), children: covers },
|
||||
{
|
||||
name: translate('popupSettingsGradient'),
|
||||
children: DataUtil.coverGradients().map((it: any) => { return { ...it, image: '' }; }),
|
||||
},
|
||||
{
|
||||
name: translate('popupSettingsColor'),
|
||||
children: DataUtil.coverColors().map((it: any) => { return { ...it, image: '' }; }),
|
||||
},
|
||||
];
|
||||
|
||||
const Item = (item: any) => (
|
||||
<div className={'item ' + (item.active ? 'active': '')} onClick={() => { this.onCover(item); }}>
|
||||
<Cover {...item} preview={true} className={item.id} />
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Head {...this.props} returnTo="appearance" name={translate('popupSettingsAppearanceTitle')} />
|
||||
<Title text={translate('popupSettingsWallpaperTitle')} />
|
||||
|
||||
<div className="row first">
|
||||
<Label text={translate('popupSettingsWallpaperText')} />
|
||||
<div className="fileWrap item" onClick={this.onFileClick}>
|
||||
<Cover className="upload" type={I.CoverType.Color} id="white" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{sections.map((section: any, i: number) => (
|
||||
<div key={i} className="row">
|
||||
<Label className="name" text={section.name} />
|
||||
<div className="covers">
|
||||
{section.children.map((item: any, i: number) => (
|
||||
<Item key={i} {...item} active={(item.id == cover.id) && (cover.type == item.type)} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
onFileClick (e: any) {
|
||||
const { root } = blockStore;
|
||||
const { setLoading } = this.props;
|
||||
|
||||
Action.openFile(Constant.extension.cover, paths => {
|
||||
setLoading(true);
|
||||
|
||||
C.FileUpload('', paths[0], I.FileType.Image, (message: any) => {
|
||||
if (message.error.code) {
|
||||
return;
|
||||
};
|
||||
|
||||
setLoading(false);
|
||||
|
||||
commonStore.coverSet('', message.hash, I.CoverType.Upload);
|
||||
ObjectUtil.setCover(root, I.CoverType.Upload, message.hash);
|
||||
|
||||
analytics.event('SettingsWallpaperUpload', { middleTime: message.middleTime });
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
onCover (item: any) {
|
||||
ObjectUtil.setCover(blockStore.root, item.type, item.image || item.id);
|
||||
commonStore.coverSet(item.id, item.image, item.type);
|
||||
|
||||
analytics.event('SettingsWallpaperSet', { type: item.type, id: item.id });
|
||||
};
|
||||
|
||||
});
|
||||
|
||||
export default PopupSettingsPageWallpaper;
|
||||
|
|
@ -1,16 +1,15 @@
|
|||
import * as React from 'react';
|
||||
import { observer } from 'mobx-react';
|
||||
import $ from 'jquery';
|
||||
import { Loader } from 'Component';
|
||||
import { observer } from 'mobx-react';
|
||||
import { Loader, IconObject, ObjectName, Icon } from 'Component';
|
||||
import { I, C, Storage, Util, analytics, Action, keyboard } from 'Lib';
|
||||
import { popupStore } from 'Store';
|
||||
import { popupStore, detailStore, commonStore, blockStore } from 'Store';
|
||||
import Constant from 'json/constant.json';
|
||||
|
||||
import PageIndex from './page/settings/index';
|
||||
import PageAccount from './page/settings/account';
|
||||
import PageDelete from './page/settings/delete';
|
||||
import PagePersonal from './page/settings/personal';
|
||||
import PageAppearance from './page/settings/appearance';
|
||||
import PageWallpaper from './page/settings/wallpaper';
|
||||
import PagePhrase from './page/settings/phrase';
|
||||
import PageLogout from './page/settings/logout';
|
||||
|
||||
|
|
@ -37,12 +36,10 @@ interface State {
|
|||
};
|
||||
|
||||
const Components: any = {
|
||||
index: PageIndex,
|
||||
account: PageAccount,
|
||||
delete: PageDelete,
|
||||
personal: PagePersonal,
|
||||
appearance: PageAppearance,
|
||||
wallpaper: PageWallpaper,
|
||||
phrase: PagePhrase,
|
||||
logout: PageLogout,
|
||||
|
||||
|
|
@ -67,7 +64,7 @@ const Components: any = {
|
|||
|
||||
const PopupSettings = observer(class PopupSettings extends React.Component<I.Popup, State> {
|
||||
|
||||
refPhrase: any = null;
|
||||
node = null;
|
||||
state = {
|
||||
loading: false,
|
||||
};
|
||||
|
|
@ -91,6 +88,9 @@ const PopupSettings = observer(class PopupSettings extends React.Component<I.Pop
|
|||
const { data } = param;
|
||||
const { page } = data;
|
||||
const { loading } = this.state;
|
||||
const sections = this.getSections().filter(it => !it.isHidden);
|
||||
const profile = detailStore.get(Constant.subId.profile, blockStore.profile);
|
||||
const space = detailStore.get(Constant.subId.space, commonStore.workspace);
|
||||
|
||||
let content = null;
|
||||
|
||||
|
|
@ -111,10 +111,58 @@ const PopupSettings = observer(class PopupSettings extends React.Component<I.Pop
|
|||
);
|
||||
};
|
||||
|
||||
const Section = (item: any) => (
|
||||
<div className="section">
|
||||
{item.name ? <div className="name">{item.name}</div> : ''}
|
||||
|
||||
<div className="items">
|
||||
{item.children.map((action: any, i: number) => {
|
||||
let icon = null;
|
||||
if (action.id == 'account') {
|
||||
icon = <IconObject object={profile} size={22} iconSize={22} forceLetter={true} />;
|
||||
} else {
|
||||
icon = <Icon className={action.icon || action.id} />;
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
key={i}
|
||||
id={`item-${action.id}`}
|
||||
className="item"
|
||||
onClick={() => { this.onPage(action.id); }}
|
||||
>
|
||||
{icon}
|
||||
<div className="name">{action.name}</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className={[ 'tab', Util.toCamelCase('tab-' + page) ].join(' ')}>
|
||||
{loading ? <Loader id="loader" /> : ''}
|
||||
{content}
|
||||
<div
|
||||
ref={node => this.node = node}
|
||||
className="sides"
|
||||
>
|
||||
<div id="sideLeft" className="side left">
|
||||
|
||||
<div className="space" onClick={() => this.onPage('spaceIndex')}>
|
||||
<IconObject object={space} forceLetter={true} size={40} />
|
||||
<div className="txt">
|
||||
<ObjectName object={space} />
|
||||
<div className="type">Personal space</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{sections.map((item: any, i: number) => (
|
||||
<Section key={i} {...item} />
|
||||
))}
|
||||
</div>
|
||||
<div id="sideRight" className={[ 'side', 'right', Util.toCamelCase('tab-' + page) ].join(' ')}>
|
||||
{loading ? <Loader id="loader" /> : ''}
|
||||
{content}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -124,7 +172,7 @@ const PopupSettings = observer(class PopupSettings extends React.Component<I.Pop
|
|||
const { data } = param;
|
||||
const { page } = data;
|
||||
|
||||
this.onPage(page || 'index');
|
||||
this.onPage(page || 'spaceIndex');
|
||||
this.rebind();
|
||||
|
||||
keyboard.disableNavigation(true);
|
||||
|
|
@ -132,10 +180,10 @@ const PopupSettings = observer(class PopupSettings extends React.Component<I.Pop
|
|||
|
||||
componentDidUpdate () {
|
||||
this.props.position();
|
||||
this.setActive();
|
||||
};
|
||||
|
||||
componentWillUnmount () {
|
||||
$(window).off('resize.settings');
|
||||
this.unbind();
|
||||
keyboard.disableNavigation(false);
|
||||
};
|
||||
|
|
@ -153,6 +201,47 @@ const PopupSettings = observer(class PopupSettings extends React.Component<I.Pop
|
|||
$(window).off('resize.settings keydown.settings mousedown.settings');
|
||||
};
|
||||
|
||||
getSections () {
|
||||
return [
|
||||
{
|
||||
name: 'Space', isHidden: true, children: [
|
||||
{ id: 'spaceIndex', name: 'Space', subPages: [ 'spaceInvite', 'spaceTeam', 'spaceLeave', 'spaceRemove' ] },
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Account & data', children: [
|
||||
{ id: 'account', name: 'Profile', subPages: [ 'logout', 'delete' ] },
|
||||
{ id: 'phrase', name: 'Recovery phrase' },
|
||||
{ id: 'pinIndex', name: 'Pin code', icon: 'pin', subPages: [ 'pinSelect', 'pinConfirm' ] },
|
||||
//{ id: 'cloud', name: 'Cloud storage' },
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Customization', children: [
|
||||
{ id: 'personal', name: 'Personalization' },
|
||||
{ id: 'appearance', name: 'Appearance' },
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Integrations', children: [
|
||||
{ id: 'importIndex', name: 'Import', icon: 'import', subPages: [ 'importNotion', 'importNotionHelp', 'importNotionWarning', 'importMarkdown' ] },
|
||||
{ id: 'exportMarkdown', name: 'Export', icon: 'export' },
|
||||
]
|
||||
},
|
||||
];
|
||||
};
|
||||
|
||||
getItems () {
|
||||
const sections = this.getSections();
|
||||
|
||||
let items: any[] = [];
|
||||
for (let section of sections) {
|
||||
items = items.concat(section.children);
|
||||
};
|
||||
|
||||
return items;
|
||||
};
|
||||
|
||||
setConfirmPin (v: () => void) {
|
||||
this.onConfirmPin = v;
|
||||
this.forceUpdate();
|
||||
|
|
@ -226,6 +315,31 @@ const PopupSettings = observer(class PopupSettings extends React.Component<I.Pop
|
|||
this.prevPage ? this.onPage(this.prevPage) : this.props.close();
|
||||
};
|
||||
|
||||
setActive () {
|
||||
const { param } = this.props;
|
||||
const { data } = param;
|
||||
const { page } = data || {};
|
||||
const node = $(this.node);
|
||||
const obj = node.find('#sideLeft');
|
||||
const items = this.getItems();
|
||||
|
||||
obj.find('.active').removeClass('active');
|
||||
|
||||
let active = '';
|
||||
for (const item of items) {
|
||||
if ((item.id == page) || (item.subPages || []).includes(page)) {
|
||||
active = item.id;
|
||||
break;
|
||||
};
|
||||
};
|
||||
|
||||
if (active == 'spaceIndex') {
|
||||
obj.find('.space').addClass('active');
|
||||
} else {
|
||||
obj.find(`#item-${active}`).addClass('active');
|
||||
};
|
||||
};
|
||||
|
||||
});
|
||||
|
||||
export default PopupSettings;
|
||||
|
|
|
|||
|
|
@ -1,119 +0,0 @@
|
|||
import * as React from 'react';
|
||||
import { observer } from 'mobx-react';
|
||||
import { IconObject, Input, Label, Loader } from 'Component';
|
||||
import { blockStore, detailStore, menuStore } from 'Store';
|
||||
import { C, I, ObjectUtil, DataUtil, Action } from 'Lib';
|
||||
import Constant from 'json/constant.json';
|
||||
|
||||
interface State {
|
||||
loading: boolean;
|
||||
};
|
||||
|
||||
const PopupSettingsUserInfo = observer(class PopupSettingsUserInfo extends React.Component<I.Popup, State> {
|
||||
|
||||
ref: any = null;
|
||||
state: State = {
|
||||
loading: false,
|
||||
};
|
||||
|
||||
constructor (props: I.Popup) {
|
||||
super(props);
|
||||
|
||||
this.onMenu = this.onMenu.bind(this);
|
||||
this.onUpload = this.onUpload.bind(this);
|
||||
this.onName = this.onName.bind(this);
|
||||
};
|
||||
|
||||
render () {
|
||||
const object = this.getObject();
|
||||
const { loading } = this.state;
|
||||
|
||||
return (
|
||||
<div className="userInfo">
|
||||
<div className="iconWrapper">
|
||||
{loading ? <Loader /> : ''}
|
||||
<IconObject
|
||||
id="userpic"
|
||||
object={object}
|
||||
size={80}
|
||||
onClick={this.onMenu}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="name">
|
||||
<Label className="small" text="Name" />
|
||||
<Input
|
||||
ref={ref => this.ref = ref}
|
||||
value={object.name}
|
||||
onKeyUp={this.onName}
|
||||
placeholder={DataUtil.defaultName('page')}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
onMenu () {
|
||||
const { getId } = this.props;
|
||||
const object = this.getObject();
|
||||
|
||||
if (!object.iconImage) {
|
||||
this.onUpload();
|
||||
return;
|
||||
};
|
||||
|
||||
const options = [
|
||||
{ id: 'upload', name: 'Change' },
|
||||
{ id: 'remove', name: 'Remove' }
|
||||
];
|
||||
|
||||
menuStore.open('select', {
|
||||
element: `#${getId()} #userpic`,
|
||||
horizontal: I.MenuDirection.Center,
|
||||
data: {
|
||||
value: '',
|
||||
options,
|
||||
onSelect: (e: any, item: any) => {
|
||||
switch (item.id) {
|
||||
case 'upload': {
|
||||
this.onUpload();
|
||||
break;
|
||||
};
|
||||
|
||||
case 'remove': {
|
||||
ObjectUtil.setIcon(blockStore.profile, '', '');
|
||||
break;
|
||||
};
|
||||
};
|
||||
},
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
onUpload () {
|
||||
Action.openFile(Constant.extension.cover, paths => {
|
||||
this.setState({ loading: true });
|
||||
|
||||
C.FileUpload('', paths[0], I.FileType.Image, (message: any) => {
|
||||
if (message.error.code) {
|
||||
return;
|
||||
};
|
||||
|
||||
ObjectUtil.setIcon(blockStore.profile, '', message.hash, () => {
|
||||
this.setState({ loading: false });
|
||||
});
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
onName (e: any) {
|
||||
ObjectUtil.setName(blockStore.profile, this.ref.getValue());
|
||||
};
|
||||
|
||||
getObject () {
|
||||
return detailStore.get(Constant.subId.profile, blockStore.profile);
|
||||
};
|
||||
|
||||
});
|
||||
|
||||
export default PopupSettingsUserInfo;
|
||||
|
|
@ -55,6 +55,7 @@ const IconSize = {
|
|||
16: 16,
|
||||
18: 18,
|
||||
20: 18,
|
||||
22: 18,
|
||||
24: 20,
|
||||
26: 22,
|
||||
28: 22,
|
||||
|
|
@ -73,6 +74,7 @@ const FontSize = {
|
|||
16: 10,
|
||||
18: 10,
|
||||
20: 12,
|
||||
22: 14,
|
||||
24: 14,
|
||||
26: 16,
|
||||
32: 18,
|
||||
|
|
|
|||
|
|
@ -88,6 +88,7 @@ export enum ImportType {
|
|||
Markdown = 1,
|
||||
External = 2,
|
||||
Html = 3,
|
||||
Text = 4,
|
||||
};
|
||||
|
||||
export enum ExportFormat {
|
||||
|
|
|
|||
|
|
@ -1234,6 +1234,13 @@ const ObjectImport = (options: any, snapshots: any[], existing: boolean, type: I
|
|||
request.setHtmlparams(params);
|
||||
break;
|
||||
|
||||
case I.ImportType.Text:
|
||||
params = new Rpc.Object.Import.Request.TxtParams();
|
||||
params.setPathList(options.paths);
|
||||
|
||||
request.setTxtparams(params);
|
||||
break;
|
||||
|
||||
};
|
||||
|
||||
request.setSnapshotsList((snapshots || []).map(Mapper.To.Snapshot));
|
||||
|
|
|
|||
|
|
@ -13,8 +13,9 @@ class ObjectUtil {
|
|||
return;
|
||||
};
|
||||
|
||||
const home = detailStore.get(Constant.subId.space, space.spaceDashboardId);
|
||||
if (home._empty_ || home.isArchived) {
|
||||
const home = this.getSpaceDashboard();
|
||||
|
||||
if (!home) {
|
||||
this.openRoute(empty);
|
||||
return;
|
||||
};
|
||||
|
|
@ -26,6 +27,36 @@ class ObjectUtil {
|
|||
};
|
||||
};
|
||||
|
||||
getSpaceDashboard () {
|
||||
const space = detailStore.get(Constant.subId.space, commonStore.workspace);
|
||||
|
||||
if (!space.spaceDashboardId) {
|
||||
return null;
|
||||
};
|
||||
|
||||
let home = null;
|
||||
if (space.spaceDashboardId == 'graph') {
|
||||
home = this.graph();
|
||||
} else {
|
||||
home = detailStore.get(Constant.subId.space, space.spaceDashboardId);
|
||||
};
|
||||
|
||||
if (home._empty_ || home.isArchived) {
|
||||
return null;
|
||||
};
|
||||
|
||||
return home;
|
||||
};
|
||||
|
||||
graph () {
|
||||
return {
|
||||
id: 'graph',
|
||||
name: 'Graph',
|
||||
iconEmoji: ':earth_americas:',
|
||||
layout: I.ObjectLayout.Graph,
|
||||
};
|
||||
};
|
||||
|
||||
actionByLayout (v: I.ObjectLayout): string {
|
||||
v = v || I.ObjectLayout.Page;
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue