Merge branch 'main' of github.com:anyproto/anytype-ts into feature/graph-cluster
11
dist/img/icon/graph/task.svg
vendored
|
@ -1,11 +0,0 @@
|
|||
<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_3023_5870)">
|
||||
<path d="M1.32031 6.49023C1.32031 4.00495 3.33503 1.99023 5.82031 1.99023H14.8203C17.3056 1.99023 19.3203 4.00495 19.3203 6.49023V15.4902C19.3203 17.9755 17.3056 19.9902 14.8203 19.9902H5.82031C3.33503 19.9902 1.32031 17.9755 1.32031 15.4902V6.49023Z" fill="#5DD400"/>
|
||||
<path d="M6.32031 10.4902L9.82031 14.4902L14.8203 6.49023" stroke="white" stroke-width="1.35"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_3023_5870">
|
||||
<rect width="18" height="18" fill="white" transform="translate(1.32031 1.99023)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
Before Width: | Height: | Size: 653 B |
6
dist/img/icon/graph/task0.svg
vendored
Normal file
|
@ -0,0 +1,6 @@
|
|||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<mask id="path-1-inside-1_3040_11409" fill="white">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M15 2H5C3.34315 2 2 3.34315 2 5V15C2 16.6569 3.34315 18 5 18H15C16.6569 18 18 16.6569 18 15V5C18 3.34315 16.6569 2 15 2ZM5 1C2.79086 1 1 2.79086 1 5V15C1 17.2091 2.79086 19 5 19H15C17.2091 19 19 17.2091 19 15V5C19 2.79086 17.2091 1 15 1H5Z"/>
|
||||
</mask>
|
||||
<path d="M5 3H15V1H5V3ZM3 5C3 3.89543 3.89543 3 5 3V1C2.79086 1 1 2.79086 1 5H3ZM3 15V5H1V15H3ZM5 17C3.89543 17 3 16.1046 3 15H1C1 17.2091 2.79086 19 5 19V17ZM15 17H5V19H15V17ZM17 15C17 16.1046 16.1046 17 15 17V19C17.2091 19 19 17.2091 19 15H17ZM17 5V15H19V5H17ZM15 3C16.1046 3 17 3.89543 17 5H19C19 2.79086 17.2091 1 15 1V3ZM2 5C2 3.34315 3.34315 2 5 2V0C2.23858 0 0 2.23858 0 5H2ZM2 15V5H0V15H2ZM5 18C3.34315 18 2 16.6569 2 15H0C0 17.7614 2.23858 20 5 20V18ZM15 18H5V20H15V18ZM18 15C18 16.6569 16.6569 18 15 18V20C17.7614 20 20 17.7614 20 15H18ZM18 5V15H20V5H18ZM15 2C16.6569 2 18 3.34315 18 5H20C20 2.23858 17.7614 0 15 0V2ZM5 2H15V0H5V2Z" fill="#B6B6B6" mask="url(#path-1-inside-1_3040_11409)"/>
|
||||
</svg>
|
After Width: | Height: | Size: 1.1 KiB |
4
dist/img/icon/graph/task1.svg
vendored
Normal file
|
@ -0,0 +1,4 @@
|
|||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="1" y="1" width="18" height="18" rx="4" fill="#5DD400"/>
|
||||
<path d="M5.5 10.0026L9.28947 13.5L14.5 6.5" stroke="white" stroke-width="1.5"/>
|
||||
</svg>
|
After Width: | Height: | Size: 248 B |
|
@ -1 +1 @@
|
|||
0.35.0-rc8
|
||||
0.35.0-rc9
|
4
package-lock.json
generated
|
@ -1,12 +1,12 @@
|
|||
{
|
||||
"name": "anytype",
|
||||
"version": "0.41.33-beta",
|
||||
"version": "0.41.35-alpha",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "anytype",
|
||||
"version": "0.41.33-beta",
|
||||
"version": "0.41.35-alpha",
|
||||
"hasInstallScript": true,
|
||||
"license": "SEE LICENSE IN LICENSE.md",
|
||||
"dependencies": {
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "anytype",
|
||||
"version": "0.41.33-beta",
|
||||
"version": "0.41.35-alpha",
|
||||
"description": "Anytype",
|
||||
"main": "electron.js",
|
||||
"scripts": {
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="1" y="1" width="18" height="18" rx="4" fill="#5DD400"/>
|
||||
<path d="M5.5 10.0026L9.28947 13.5L14.5 6.5" stroke="white" stroke-width="1.5"/>
|
||||
</svg>
|
||||
</svg>
|
Before Width: | Height: | Size: 249 B After Width: | Height: | Size: 248 B |
|
@ -1,6 +1,13 @@
|
|||
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="24.0002" cy="24" r="13.25" transform="rotate(-45 24.0002 24)" stroke="#252525" stroke-width="1.5"/>
|
||||
<path d="M33.1042 14.3657C34.3939 15.6554 34.7455 17.8462 34.0115 20.5376C33.2839 23.2053 31.5201 26.2029 28.8616 28.8614C26.2031 31.5199 23.2055 33.2837 20.5377 34.0113C17.8464 34.7453 15.6555 34.3937 14.3659 33.1041C13.0762 31.8144 12.7246 29.6236 13.4586 26.9322C14.1862 24.2645 15.9501 21.2669 18.6085 18.6084C21.267 15.9499 24.2646 14.186 26.9324 13.4585C29.6238 12.7245 31.8146 13.0761 33.1042 14.3657Z" stroke="#252525" stroke-width="1.5"/>
|
||||
<rect x="13.8354" y="32.5732" width="26" height="1.5" transform="rotate(-45 13.8354 32.5732)" fill="#252525"/>
|
||||
<rect x="32.2202" y="33.6348" width="26" height="1.5" transform="rotate(-135 32.2202 33.6348)" fill="#252525"/>
|
||||
</svg>
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_4926_10390)">
|
||||
<circle cx="10" cy="9.99941" r="8.5" transform="rotate(45 10 9.99941)" stroke="#252525"/>
|
||||
<path d="M13.3585 13.3589C11.6525 15.0649 9.72112 16.188 7.99747 16.6416C6.26007 17.0988 4.83648 16.8577 3.98931 16.0105C3.14214 15.1633 2.90104 13.7397 3.35825 12.0023C3.81185 10.2787 4.93495 8.34736 6.64096 6.64134C8.34697 4.93533 10.2783 3.81223 12.002 3.35864C13.7394 2.90143 15.163 3.14252 16.0101 3.98969C16.8573 4.83687 17.0984 6.26046 16.6412 7.99785C16.1876 9.72151 15.0645 11.6528 13.3585 13.3589Z" stroke="#252525"/>
|
||||
<path d="M15.6572 4.3418C15.6572 4.3418 8.10018 11.8992 4.34352 15.6555" stroke="#252525"/>
|
||||
<path d="M4.34277 4.3418C4.34277 4.3418 11.9001 11.8988 15.6565 15.6555" stroke="#252525"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_4926_10390">
|
||||
<rect width="20" height="20" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
Before Width: | Height: | Size: 886 B After Width: | Height: | Size: 952 B |
|
@ -1,3 +1,3 @@
|
|||
<svg width="49" height="48" viewBox="0 0 49 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M24.5 16C24.0858 16 23.75 16.3358 23.75 16.75V23.25H17.25C16.8358 23.25 16.5 23.5858 16.5 24C16.5 24.4142 16.8358 24.75 17.25 24.75H23.75V31.25C23.75 31.6642 24.0858 32 24.5 32C24.9142 32 25.25 31.6642 25.25 31.25V24.75H31.75C32.1642 24.75 32.5 24.4142 32.5 24C32.5 23.5858 32.1642 23.25 31.75 23.25H25.25V16.75C25.25 16.3358 24.9142 16 24.5 16Z" fill="#252525"/>
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3C9.58579 3 9.25 3.33579 9.25 3.75V9.25H3.75C3.33579 9.25 3 9.58579 3 10C3 10.4142 3.33579 10.75 3.75 10.75H9.25V16.25C9.25 16.6642 9.58579 17 10 17C10.4142 17 10.75 16.6642 10.75 16.25V10.75H16.25C16.6642 10.75 17 10.4142 17 10C17 9.58579 16.6642 9.25 16.25 9.25H10.75V3.75C10.75 3.33579 10.4142 3 10 3Z" fill="#252525"/>
|
||||
</svg>
|
Before Width: | Height: | Size: 515 B After Width: | Height: | Size: 478 B |
|
@ -1,15 +1,15 @@
|
|||
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M24 29.5C27.0376 29.5 29.5 27.0376 29.5 24C29.5 20.9624 27.0376 18.5 24 18.5C20.9624 18.5 18.5 20.9624 18.5 24C18.5 27.0376 20.9624 29.5 24 29.5ZM24 31C27.866 31 31 27.866 31 24C31 20.134 27.866 17 24 17C20.134 17 17 20.134 17 24C17 27.866 20.134 31 24 31Z" fill="#252525"/>
|
||||
<path d="M23.25 15.75C23.25 15.3358 23.5858 15 24 15C24.4142 15 24.75 15.3358 24.75 15.75V24.11C24.75 24.5242 24.4142 24.86 24 24.86C23.5858 24.86 23.25 24.5242 23.25 24.11V15.75Z" fill="#252525"/>
|
||||
<path d="M23.25 30.75C23.25 30.3358 23.5858 30 24 30C24.4142 30 24.75 30.3358 24.75 30.75V32.25C24.75 32.6642 24.4142 33 24 33C23.5858 33 23.25 32.6642 23.25 32.25V30.75Z" fill="#252525"/>
|
||||
<path d="M19.2256 17.2306C19.0185 16.8719 19.1414 16.4132 19.5001 16.2061C19.8588 15.9989 20.3175 16.1219 20.5246 16.4806L21.2746 17.7796C21.4817 18.1383 21.3588 18.597 21.0001 18.8041C20.6414 19.0112 20.1827 18.8883 19.9756 18.5296L19.2256 17.2306Z" fill="#252525"/>
|
||||
<path d="M26.7256 30.2208C26.5185 29.8621 26.6414 29.4034 27.0001 29.1963C27.3588 28.9892 27.8175 29.1121 28.0246 29.4708L28.7746 30.7698C28.9817 31.1286 28.8588 31.5873 28.5001 31.7944C28.1414 32.0015 27.6827 31.8786 27.4756 31.5198L26.7256 30.2208Z" fill="#252525"/>
|
||||
<path d="M16.4806 20.5244C16.1219 20.3173 15.9989 19.8586 16.2061 19.4999C16.4132 19.1412 16.8719 19.0183 17.2306 19.2254L18.5296 19.9754C18.8883 20.1825 19.0112 20.6412 18.8041 20.9999C18.597 21.3586 18.1383 21.4815 17.7796 21.2744L16.4806 20.5244Z" fill="#252525"/>
|
||||
<path d="M23.5314 24.5947C23.1726 24.3876 23.0497 23.9289 23.2568 23.5702C23.4639 23.2115 23.9226 23.0886 24.2814 23.2957L31.5198 27.4748C31.8785 27.6819 32.0014 28.1406 31.7943 28.4993C31.5872 28.858 31.1285 28.9809 30.7698 28.7738L23.5314 24.5947Z" fill="#252525"/>
|
||||
<path d="M15.75 24.75C15.3358 24.75 15 24.4142 15 24C15 23.5858 15.3358 23.25 15.75 23.25H17.25C17.6642 23.25 18 23.5858 18 24C18 24.4142 17.6642 24.75 17.25 24.75H15.75Z" fill="#252525"/>
|
||||
<path d="M30.75 24.75C30.3358 24.75 30 24.4142 30 24C30 23.5858 30.3358 23.25 30.75 23.25H32.25C32.6642 23.25 33 23.5858 33 24C33 24.4142 32.6642 24.75 32.25 24.75H30.75Z" fill="#252525"/>
|
||||
<path d="M17.2306 28.7744C16.8719 28.9815 16.4132 28.8586 16.2061 28.4999C15.9989 28.1412 16.1219 27.6825 16.4806 27.4754L23.7205 23.2954C24.0793 23.0883 24.538 23.2112 24.7451 23.5699C24.9522 23.9286 24.8293 24.3873 24.4705 24.5944L17.2306 28.7744Z" fill="#252525"/>
|
||||
<path d="M30.2208 21.2744C29.8621 21.4815 29.4034 21.3586 29.1963 20.9999C28.9892 20.6412 29.1121 20.1825 29.4708 19.9754L30.7698 19.2254C31.1286 19.0183 31.5873 19.1412 31.7944 19.4999C32.0015 19.8586 31.8786 20.3173 31.5198 20.5244L30.2208 21.2744Z" fill="#252525"/>
|
||||
<path d="M20.5244 31.5204C20.3173 31.8791 19.8586 32.002 19.4999 31.7949C19.1412 31.5878 19.0183 31.1291 19.2254 30.7704L19.9754 29.4714C20.1825 29.1126 20.6412 28.9897 20.9999 29.1968C21.3586 29.404 21.4815 29.8626 21.2744 30.2214L20.5244 31.5204Z" fill="#252525"/>
|
||||
<path d="M28.0244 18.5302C27.8173 18.8889 27.3586 19.0118 26.9999 18.8047C26.6412 18.5976 26.5183 18.1389 26.7254 17.7802L27.4754 16.4811C27.6825 16.1224 28.1412 15.9995 28.4999 16.2066C28.8586 16.4137 28.9815 16.8724 28.7744 17.2311L28.0244 18.5302Z" fill="#252525"/>
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 15.5C13.0376 15.5 15.5 13.0376 15.5 10C15.5 6.96243 13.0376 4.5 10 4.5C6.96243 4.5 4.5 6.96243 4.5 10C4.5 13.0376 6.96243 15.5 10 15.5ZM10 17C13.866 17 17 13.866 17 10C17 6.13401 13.866 3 10 3C6.13401 3 3 6.13401 3 10C3 13.866 6.13401 17 10 17Z" fill="#252525"/>
|
||||
<path d="M9.25 1.75C9.25 1.33579 9.58579 1 10 1C10.4142 1 10.75 1.33579 10.75 1.75V10.11C10.75 10.5242 10.4142 10.86 10 10.86C9.58579 10.86 9.25 10.5242 9.25 10.11V1.75Z" fill="#252525"/>
|
||||
<path d="M9.25 16.75C9.25 16.3358 9.58579 16 10 16C10.4142 16 10.75 16.3358 10.75 16.75V18.25C10.75 18.6642 10.4142 19 10 19C9.58579 19 9.25 18.6642 9.25 18.25V16.75Z" fill="#252525"/>
|
||||
<path d="M5.22559 3.2296C5.01848 2.87088 5.14139 2.41218 5.5001 2.20508C5.85882 1.99797 6.31752 2.12088 6.52462 2.4796L7.27462 3.77864C7.48173 4.13735 7.35882 4.59605 7.0001 4.80315C6.64139 5.01026 6.18269 4.88735 5.97559 4.52864L5.22559 3.2296Z" fill="#252525"/>
|
||||
<path d="M12.7256 16.2198C12.5185 15.8611 12.6414 15.4024 13.0001 15.1953C13.3588 14.9882 13.8175 15.1111 14.0246 15.4698L14.7746 16.7689C14.9817 17.1276 14.8588 17.5863 14.5001 17.7934C14.1414 18.0005 13.6827 17.8776 13.4756 17.5189L12.7256 16.2198Z" fill="#252525"/>
|
||||
<path d="M2.48057 6.52539C2.12185 6.31828 1.99895 5.85959 2.20605 5.50087C2.41316 5.14215 2.87185 5.01925 3.23057 5.22635L4.52961 5.97635C4.88833 6.18346 5.01124 6.64215 4.80413 7.00087C4.59702 7.35959 4.13833 7.4825 3.77961 7.27539L2.48057 6.52539Z" fill="#252525"/>
|
||||
<path d="M9.53135 10.5957C9.17264 10.3886 9.04973 9.9299 9.25684 9.57118C9.46394 9.21246 9.92264 9.08956 10.2814 9.29667L17.5198 13.4758C17.8785 13.6829 18.0014 14.1416 17.7943 14.5003C17.5872 14.859 17.1285 14.9819 16.7698 14.7748L9.53135 10.5957Z" fill="#252525"/>
|
||||
<path d="M1.75 10.75C1.33579 10.75 1 10.4142 1 10C1 9.58579 1.33579 9.25 1.75 9.25H3.25C3.66421 9.25 4 9.58579 4 10C4 10.4142 3.66421 10.75 3.25 10.75H1.75Z" fill="#252525"/>
|
||||
<path d="M16.75 10.75C16.3358 10.75 16 10.4142 16 10C16 9.58579 16.3358 9.25 16.75 9.25H18.25C18.6642 9.25 19 9.58579 19 10C19 10.4142 18.6642 10.75 18.25 10.75H16.75Z" fill="#252525"/>
|
||||
<path d="M3.23057 14.7754C2.87186 14.9825 2.41316 14.8596 2.20605 14.5009C1.99895 14.1422 2.12185 13.6835 2.48057 13.4764L9.72054 9.29635C10.0793 9.08925 10.538 9.21215 10.7451 9.57087C10.9522 9.92959 10.8293 10.3883 10.4705 10.5954L3.23057 14.7754Z" fill="#252525"/>
|
||||
<path d="M16.2208 7.27539C15.8621 7.4825 15.4034 7.35959 15.1963 7.00087C14.9892 6.64215 15.1121 6.18346 15.4708 5.97635L16.7698 5.22635C17.1286 5.01925 17.5873 5.14215 17.7944 5.50087C18.0015 5.85959 17.8786 6.31828 17.5198 6.52539L16.2208 7.27539Z" fill="#252525"/>
|
||||
<path d="M6.52441 17.5204C6.31731 17.8791 5.85861 18.002 5.4999 17.7949C5.14118 17.5878 5.01827 17.1291 5.22538 16.7704L5.97538 15.4714C6.18248 15.1126 6.64118 14.9897 6.9999 15.1968C7.35861 15.404 7.48152 15.8626 7.27441 16.2214L6.52441 17.5204Z" fill="#252525"/>
|
||||
<path d="M14.0244 4.53017C13.8173 4.88889 13.3586 5.01179 12.9999 4.80469C12.6412 4.59758 12.5183 4.13889 12.7254 3.78017L13.4754 2.48113C13.6825 2.12241 14.1412 1.9995 14.4999 2.20661C14.8586 2.41372 14.9815 2.87241 14.7744 3.23113L14.0244 4.53017Z" fill="#252525"/>
|
||||
</svg>
|
Before Width: | Height: | Size: 3.3 KiB After Width: | Height: | Size: 3.2 KiB |
|
@ -1,6 +1,13 @@
|
|||
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="24.0002" cy="24" r="13.25" transform="rotate(-45 24.0002 24)" stroke="#EBEBEB" stroke-width="1.5"/>
|
||||
<path d="M33.1042 14.3657C34.3939 15.6554 34.7455 17.8462 34.0115 20.5376C33.2839 23.2053 31.5201 26.2029 28.8616 28.8614C26.2031 31.5199 23.2055 33.2837 20.5377 34.0113C17.8464 34.7453 15.6555 34.3937 14.3659 33.1041C13.0762 31.8144 12.7246 29.6236 13.4586 26.9322C14.1862 24.2645 15.9501 21.2669 18.6085 18.6084C21.267 15.9499 24.2646 14.186 26.9324 13.4585C29.6238 12.7245 31.8146 13.0761 33.1042 14.3657Z" stroke="#EBEBEB" stroke-width="1.5"/>
|
||||
<rect x="13.8354" y="32.5732" width="26" height="1.5" transform="rotate(-45 13.8354 32.5732)" fill="#EBEBEB"/>
|
||||
<rect x="32.2202" y="33.6348" width="26" height="1.5" transform="rotate(-135 32.2202 33.6348)" fill="#EBEBEB"/>
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_4926_10390)">
|
||||
<circle cx="10" cy="9.99941" r="8.5" transform="rotate(45 10 9.99941)" stroke="#ebebeb"/>
|
||||
<path d="M13.3585 13.3589C11.6525 15.0649 9.72112 16.188 7.99747 16.6416C6.26007 17.0988 4.83648 16.8577 3.98931 16.0105C3.14214 15.1633 2.90104 13.7397 3.35825 12.0023C3.81185 10.2787 4.93495 8.34736 6.64096 6.64134C8.34697 4.93533 10.2783 3.81223 12.002 3.35864C13.7394 2.90143 15.163 3.14252 16.0101 3.98969C16.8573 4.83687 17.0984 6.26046 16.6412 7.99785C16.1876 9.72151 15.0645 11.6528 13.3585 13.3589Z" stroke="#ebebeb"/>
|
||||
<path d="M15.6572 4.3418C15.6572 4.3418 8.10018 11.8992 4.34352 15.6555" stroke="#ebebeb"/>
|
||||
<path d="M4.34277 4.3418C4.34277 4.3418 11.9001 11.8988 15.6565 15.6555" stroke="#ebebeb"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_4926_10390">
|
||||
<rect width="20" height="20" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
|
Before Width: | Height: | Size: 886 B After Width: | Height: | Size: 953 B |
|
@ -1,3 +1,3 @@
|
|||
<svg width="49" height="48" viewBox="0 0 49 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M24.5 16C24.0858 16 23.75 16.3358 23.75 16.75V23.25H17.25C16.8358 23.25 16.5 23.5858 16.5 24C16.5 24.4142 16.8358 24.75 17.25 24.75H23.75V31.25C23.75 31.6642 24.0858 32 24.5 32C24.9142 32 25.25 31.6642 25.25 31.25V24.75H31.75C32.1642 24.75 32.5 24.4142 32.5 24C32.5 23.5858 32.1642 23.25 31.75 23.25H25.25V16.75C25.25 16.3358 24.9142 16 24.5 16Z" fill="#ebebeb"/>
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3C9.58579 3 9.25 3.33579 9.25 3.75V9.25H3.75C3.33579 9.25 3 9.58579 3 10C3 10.4142 3.33579 10.75 3.75 10.75H9.25V16.25C9.25 16.6642 9.58579 17 10 17C10.4142 17 10.75 16.6642 10.75 16.25V10.75H16.25C16.6642 10.75 17 10.4142 17 10C17 9.58579 16.6642 9.25 16.25 9.25H10.75V3.75C10.75 3.33579 10.4142 3 10 3Z" fill="#ebebeb"/>
|
||||
</svg>
|
Before Width: | Height: | Size: 515 B After Width: | Height: | Size: 478 B |
|
@ -1,15 +1,15 @@
|
|||
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M24 29.5C27.0376 29.5 29.5 27.0376 29.5 24C29.5 20.9624 27.0376 18.5 24 18.5C20.9624 18.5 18.5 20.9624 18.5 24C18.5 27.0376 20.9624 29.5 24 29.5ZM24 31C27.866 31 31 27.866 31 24C31 20.134 27.866 17 24 17C20.134 17 17 20.134 17 24C17 27.866 20.134 31 24 31Z" fill="#EBEBEB"/>
|
||||
<path d="M23.25 15.75C23.25 15.3358 23.5858 15 24 15C24.4142 15 24.75 15.3358 24.75 15.75V24.11C24.75 24.5242 24.4142 24.86 24 24.86C23.5858 24.86 23.25 24.5242 23.25 24.11V15.75Z" fill="#EBEBEB"/>
|
||||
<path d="M23.25 30.75C23.25 30.3358 23.5858 30 24 30C24.4142 30 24.75 30.3358 24.75 30.75V32.25C24.75 32.6642 24.4142 33 24 33C23.5858 33 23.25 32.6642 23.25 32.25V30.75Z" fill="#EBEBEB"/>
|
||||
<path d="M19.2256 17.2306C19.0185 16.8719 19.1414 16.4132 19.5001 16.2061C19.8588 15.9989 20.3175 16.1219 20.5246 16.4806L21.2746 17.7796C21.4817 18.1383 21.3588 18.597 21.0001 18.8041C20.6414 19.0112 20.1827 18.8883 19.9756 18.5296L19.2256 17.2306Z" fill="#EBEBEB"/>
|
||||
<path d="M26.7256 30.2208C26.5185 29.8621 26.6414 29.4034 27.0001 29.1963C27.3588 28.9892 27.8175 29.1121 28.0246 29.4708L28.7746 30.7698C28.9817 31.1286 28.8588 31.5873 28.5001 31.7944C28.1414 32.0015 27.6827 31.8786 27.4756 31.5198L26.7256 30.2208Z" fill="#EBEBEB"/>
|
||||
<path d="M16.4806 20.5244C16.1219 20.3173 15.9989 19.8586 16.2061 19.4999C16.4132 19.1412 16.8719 19.0183 17.2306 19.2254L18.5296 19.9754C18.8883 20.1825 19.0112 20.6412 18.8041 20.9999C18.597 21.3586 18.1383 21.4815 17.7796 21.2744L16.4806 20.5244Z" fill="#EBEBEB"/>
|
||||
<path d="M23.5314 24.5947C23.1726 24.3876 23.0497 23.9289 23.2568 23.5702C23.4639 23.2115 23.9226 23.0886 24.2814 23.2957L31.5198 27.4748C31.8785 27.6819 32.0014 28.1406 31.7943 28.4993C31.5872 28.858 31.1285 28.9809 30.7698 28.7738L23.5314 24.5947Z" fill="#EBEBEB"/>
|
||||
<path d="M15.75 24.75C15.3358 24.75 15 24.4142 15 24C15 23.5858 15.3358 23.25 15.75 23.25H17.25C17.6642 23.25 18 23.5858 18 24C18 24.4142 17.6642 24.75 17.25 24.75H15.75Z" fill="#EBEBEB"/>
|
||||
<path d="M30.75 24.75C30.3358 24.75 30 24.4142 30 24C30 23.5858 30.3358 23.25 30.75 23.25H32.25C32.6642 23.25 33 23.5858 33 24C33 24.4142 32.6642 24.75 32.25 24.75H30.75Z" fill="#EBEBEB"/>
|
||||
<path d="M17.2306 28.7744C16.8719 28.9815 16.4132 28.8586 16.2061 28.4999C15.9989 28.1412 16.1219 27.6825 16.4806 27.4754L23.7205 23.2954C24.0793 23.0883 24.538 23.2112 24.7451 23.5699C24.9522 23.9286 24.8293 24.3873 24.4705 24.5944L17.2306 28.7744Z" fill="#EBEBEB"/>
|
||||
<path d="M30.2208 21.2744C29.8621 21.4815 29.4034 21.3586 29.1963 20.9999C28.9892 20.6412 29.1121 20.1825 29.4708 19.9754L30.7698 19.2254C31.1286 19.0183 31.5873 19.1412 31.7944 19.4999C32.0015 19.8586 31.8786 20.3173 31.5198 20.5244L30.2208 21.2744Z" fill="#EBEBEB"/>
|
||||
<path d="M20.5244 31.5204C20.3173 31.8791 19.8586 32.002 19.4999 31.7949C19.1412 31.5878 19.0183 31.1291 19.2254 30.7704L19.9754 29.4714C20.1825 29.1126 20.6412 28.9897 20.9999 29.1968C21.3586 29.404 21.4815 29.8626 21.2744 30.2214L20.5244 31.5204Z" fill="#EBEBEB"/>
|
||||
<path d="M28.0244 18.5302C27.8173 18.8889 27.3586 19.0118 26.9999 18.8047C26.6412 18.5976 26.5183 18.1389 26.7254 17.7802L27.4754 16.4811C27.6825 16.1224 28.1412 15.9995 28.4999 16.2066C28.8586 16.4137 28.9815 16.8724 28.7744 17.2311L28.0244 18.5302Z" fill="#EBEBEB"/>
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 15.5C13.0376 15.5 15.5 13.0376 15.5 10C15.5 6.96243 13.0376 4.5 10 4.5C6.96243 4.5 4.5 6.96243 4.5 10C4.5 13.0376 6.96243 15.5 10 15.5ZM10 17C13.866 17 17 13.866 17 10C17 6.13401 13.866 3 10 3C6.13401 3 3 6.13401 3 10C3 13.866 6.13401 17 10 17Z" fill="#ebebeb"/>
|
||||
<path d="M9.25 1.75C9.25 1.33579 9.58579 1 10 1C10.4142 1 10.75 1.33579 10.75 1.75V10.11C10.75 10.5242 10.4142 10.86 10 10.86C9.58579 10.86 9.25 10.5242 9.25 10.11V1.75Z" fill="#ebebeb"/>
|
||||
<path d="M9.25 16.75C9.25 16.3358 9.58579 16 10 16C10.4142 16 10.75 16.3358 10.75 16.75V18.25C10.75 18.6642 10.4142 19 10 19C9.58579 19 9.25 18.6642 9.25 18.25V16.75Z" fill="#ebebeb"/>
|
||||
<path d="M5.22559 3.2296C5.01848 2.87088 5.14139 2.41218 5.5001 2.20508C5.85882 1.99797 6.31752 2.12088 6.52462 2.4796L7.27462 3.77864C7.48173 4.13735 7.35882 4.59605 7.0001 4.80315C6.64139 5.01026 6.18269 4.88735 5.97559 4.52864L5.22559 3.2296Z" fill="#ebebeb"/>
|
||||
<path d="M12.7256 16.2198C12.5185 15.8611 12.6414 15.4024 13.0001 15.1953C13.3588 14.9882 13.8175 15.1111 14.0246 15.4698L14.7746 16.7689C14.9817 17.1276 14.8588 17.5863 14.5001 17.7934C14.1414 18.0005 13.6827 17.8776 13.4756 17.5189L12.7256 16.2198Z" fill="#ebebeb"/>
|
||||
<path d="M2.48057 6.52539C2.12185 6.31828 1.99895 5.85959 2.20605 5.50087C2.41316 5.14215 2.87185 5.01925 3.23057 5.22635L4.52961 5.97635C4.88833 6.18346 5.01124 6.64215 4.80413 7.00087C4.59702 7.35959 4.13833 7.4825 3.77961 7.27539L2.48057 6.52539Z" fill="#ebebeb"/>
|
||||
<path d="M9.53135 10.5957C9.17264 10.3886 9.04973 9.9299 9.25684 9.57118C9.46394 9.21246 9.92264 9.08956 10.2814 9.29667L17.5198 13.4758C17.8785 13.6829 18.0014 14.1416 17.7943 14.5003C17.5872 14.859 17.1285 14.9819 16.7698 14.7748L9.53135 10.5957Z" fill="#ebebeb"/>
|
||||
<path d="M1.75 10.75C1.33579 10.75 1 10.4142 1 10C1 9.58579 1.33579 9.25 1.75 9.25H3.25C3.66421 9.25 4 9.58579 4 10C4 10.4142 3.66421 10.75 3.25 10.75H1.75Z" fill="#ebebeb"/>
|
||||
<path d="M16.75 10.75C16.3358 10.75 16 10.4142 16 10C16 9.58579 16.3358 9.25 16.75 9.25H18.25C18.6642 9.25 19 9.58579 19 10C19 10.4142 18.6642 10.75 18.25 10.75H16.75Z" fill="#ebebeb"/>
|
||||
<path d="M3.23057 14.7754C2.87186 14.9825 2.41316 14.8596 2.20605 14.5009C1.99895 14.1422 2.12185 13.6835 2.48057 13.4764L9.72054 9.29635C10.0793 9.08925 10.538 9.21215 10.7451 9.57087C10.9522 9.92959 10.8293 10.3883 10.4705 10.5954L3.23057 14.7754Z" fill="#ebebeb"/>
|
||||
<path d="M16.2208 7.27539C15.8621 7.4825 15.4034 7.35959 15.1963 7.00087C14.9892 6.64215 15.1121 6.18346 15.4708 5.97635L16.7698 5.22635C17.1286 5.01925 17.5873 5.14215 17.7944 5.50087C18.0015 5.85959 17.8786 6.31828 17.5198 6.52539L16.2208 7.27539Z" fill="#ebebeb"/>
|
||||
<path d="M6.52441 17.5204C6.31731 17.8791 5.85861 18.002 5.4999 17.7949C5.14118 17.5878 5.01827 17.1291 5.22538 16.7704L5.97538 15.4714C6.18248 15.1126 6.64118 14.9897 6.9999 15.1968C7.35861 15.404 7.48152 15.8626 7.27441 16.2214L6.52441 17.5204Z" fill="#ebebeb"/>
|
||||
<path d="M14.0244 4.53017C13.8173 4.88889 13.3586 5.01179 12.9999 4.80469C12.6412 4.59758 12.5183 4.13889 12.7254 3.78017L13.4754 2.48113C13.6825 2.12241 14.1412 1.9995 14.4999 2.20661C14.8586 2.41372 14.9815 2.87241 14.7744 3.23113L14.0244 4.53017Z" fill="#ebebeb"/>
|
||||
</svg>
|
Before Width: | Height: | Size: 3.3 KiB After Width: | Height: | Size: 3.2 KiB |
|
@ -52,6 +52,7 @@ export default {
|
|||
notification: 200,
|
||||
widget: 400,
|
||||
login: 800,
|
||||
sidebar: 180,
|
||||
},
|
||||
|
||||
fileExtension: {
|
||||
|
|
|
@ -6,4 +6,5 @@ export default [
|
|||
'/:page/:action/:id?/spaceId/:spaceId?/viewId/:viewId?',
|
||||
'/object',
|
||||
'/invite',
|
||||
'/membership'
|
||||
];
|
|
@ -1549,7 +1549,7 @@
|
|||
|
||||
"menuSyncStatusInfoP2pTitle": "P2P Connection",
|
||||
|
||||
"menuSyncStatusEmptyLocal": "There are no objects to show in Local-Only mode",
|
||||
"menuSyncStatusEmptyLocal": "You are in a local-only mode and your data not backed up to Anytype nodes. You can enable network backup anytime upon logging in to the application.",
|
||||
"menuSyncStatusEmpty": "There are no objects to show",
|
||||
|
||||
"previewEdit": "Edit Link",
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
$easeInQuint: cubic-bezier(0.22, 1, 0.36, 1);
|
||||
$transitionCommon: 0.1s $easeInQuint;
|
||||
$transitionAllCommon: all $transitionCommon;
|
||||
$transitionSidebarTime: 0.18s;
|
||||
|
||||
$historyPanelWidth: 336px;
|
||||
$vaultWidthCollapsed: 72px;
|
||||
|
|
|
@ -81,4 +81,10 @@
|
|||
}
|
||||
}
|
||||
|
||||
.block.blockCover > .wrapContent > .selectionTarget { height: 100%; }
|
||||
.block.blockCover > .wrapContent > .selectionTarget { height: 100%; }
|
||||
|
||||
.sidebarAnimation {
|
||||
.block.blockCover {
|
||||
img.cover { transition: all $transitionSidebarTime linear; }
|
||||
}
|
||||
}
|
|
@ -49,11 +49,11 @@ input, textarea, select { font-family: 'Inter'; }
|
|||
}
|
||||
|
||||
#globalFade {
|
||||
position: fixed; z-index: 23; background: var(--color-bg-primary); left: 0px; top: 0px; width: 100%; height: 100%; display: none; opacity: 0;
|
||||
transition: opacity 0.25s ease-in-out;
|
||||
position: fixed; z-index: 23; background: var(--color-bg-primary); right: 0px; top: 0px; width: 100%; height: 100%; display: none; opacity: 0;
|
||||
transition: opacity 0.3s ease-in-out;
|
||||
}
|
||||
#globalFade {
|
||||
#loader { position: absolute; right: 0px; top: 0px; width: calc(100% - $vaultWidthCollapsed); height: 100%; }
|
||||
#loader { position: absolute; right: 0px; top: 0px; width: 100%; height: 100%; width: calc(100% - $vaultWidthCollapsed); }
|
||||
}
|
||||
#globalFade.show { opacity: 1; }
|
||||
#graphPreview { position: fixed; z-index: 1000; }
|
||||
|
|
|
@ -57,11 +57,11 @@
|
|||
}
|
||||
|
||||
.header.sidebarAnimation {
|
||||
.side.left { transition: padding-left 0.2s ease-in-out; }
|
||||
.side.left { transition: padding-left $transitionSidebarTime linear; }
|
||||
}
|
||||
|
||||
.header:not(.withSidebar) {
|
||||
.side.left { padding-left: 52px; }
|
||||
.side.left { padding-left: 120px; }
|
||||
}
|
||||
|
||||
.header.authIndex { height: 52px; }
|
||||
|
|
|
@ -7,7 +7,7 @@
|
|||
.navigationPanel.hide { visibility: hidden; z-index: 0; opacity: 0; }
|
||||
.navigationPanel.hide * { pointer-events: none; }
|
||||
|
||||
.navigationPanel.sidebarAnimation { transition: left 0.2s ease-in-out; }
|
||||
.navigationPanel.sidebarAnimation { transition-property: left; }
|
||||
|
||||
.navigationPanel {
|
||||
.inner { display: flex; flex-direction: row; gap: 0px 20px; align-items: center; justify-content: center; position: relative; z-index: 1; }
|
||||
|
|
|
@ -6,31 +6,29 @@
|
|||
#page { width: 100%; position: relative; }
|
||||
}
|
||||
|
||||
.sidebarAnimation { transition: width 0.2s ease-in-out; }
|
||||
.sidebarAnimation { transition: width $transitionSidebarTime linear; }
|
||||
|
||||
#sidebarToggle {
|
||||
width: 28px; height: 28px; background-size: 20px; border-radius: 6px; position: fixed; left: 88px; top: 12px;
|
||||
width: 28px; height: 28px; background-size: 20px; border-radius: 6px; position: fixed; left: 84px; top: 12px; backdrop-filter: blur(20px);
|
||||
background-image: url('~img/icon/widget/toggle0.svg'); z-index: 22; -webkit-app-region: no-drag;
|
||||
}
|
||||
#sidebarToggle:hover { background-color: var(--color-shape-highlight-medium); background-image: url('~img/icon/widget/toggle1.svg'); }
|
||||
|
||||
.sidebar {
|
||||
position: fixed; background-color: var(--color-shape-tertiary); z-index: 21; user-select: none; transition: none; top: 0px; left: $vaultWidthCollapsed; height: 100%;
|
||||
transform: translate3d(0px,0px,0px);
|
||||
}
|
||||
|
||||
.sidebar.anim { transition-property: left, top, width, box-shadow, transform; transition-duration: 0.2s; transition-timing-function: ease-in-out; }
|
||||
.sidebar { position: fixed; z-index: 21; user-select: none; transition: none; top: 0px; left: $vaultWidthCollapsed; height: 100%; }
|
||||
.sidebar.anim { transition-property: width; transition-duration: $transitionSidebarTime; transition-timing-function: linear; }
|
||||
.sidebar.isClosed { left: 0px; }
|
||||
|
||||
.sidebar {
|
||||
> .inner { width: 100%; height: 100%; display: flex; flex-direction: column; overflow: hidden; position: relative; z-index: 1; }
|
||||
> .inner { width: 100%; height: 100%; display: flex; flex-direction: column; overflow: hidden; position: relative; z-index: 1; background-color: var(--color-shape-tertiary); }
|
||||
> .inner {
|
||||
> .head {
|
||||
display: flex; flex-direction: row; align-items: center; justify-content: flex-start; padding: 0px 12px; height: 52px;
|
||||
display: flex; flex-direction: row; align-items: center; justify-content: center; padding: 0px 12px; height: 52px;
|
||||
gap: 0px 8px; overflow: hidden;
|
||||
}
|
||||
> .head {
|
||||
.status {
|
||||
@include text-small; font-weight: 500; @include text-overflow-nw; text-align: center; color: var(--color-text-secondary); flex-grow: 1;
|
||||
@include text-small; font-weight: 500; @include text-overflow-nw; text-align: center; color: var(--color-text-secondary);
|
||||
display: inline-block; -webkit-app-region: no-drag;
|
||||
}
|
||||
|
||||
.icon { width: 28px; height: 28px; background-size: 20px; border-radius: 6px; cursor: default; -webkit-app-region: no-drag; }
|
||||
|
@ -42,7 +40,7 @@
|
|||
> .body { height: calc(100% - 52px); padding: 0px 12px 12px 12px; position: relative; flex-grow: 1; overflow: auto; overscroll-behavior: none; }
|
||||
}
|
||||
|
||||
.resize-h { width: 10px; height: 100%; position: absolute; top: 0px; right: -5px; cursor: col-resize; z-index: 2; }
|
||||
.resize-h { width: 10px; height: 100%; cursor: col-resize; z-index: 2; flex-shrink: 0; position: absolute; right: -5px; top: 0px; }
|
||||
.resize-h {
|
||||
.resize-handle {
|
||||
position: absolute; left: 6px; top: 50%; margin: -16px 0px 0px 0px; transition: $transitionAllCommon;
|
||||
|
|
|
@ -1,35 +1,37 @@
|
|||
@import "~scss/_mixins";
|
||||
|
||||
.vault {
|
||||
position: fixed; background-color: var(--color-shape-primary); z-index: 30; left: 0px; top: 0px; width: $vaultWidthCollapsed; height: 100%;
|
||||
display: flex; flex-direction: column; transition: width 0.3s $easeInQuint;
|
||||
background-color: var(--color-shape-primary); z-index: 30; width: $vaultWidthCollapsed; height: 100%; display: flex; flex-direction: column;
|
||||
flex-shrink: 0; position: fixed; left: 0px; top: 0px; transition: width 0.06s linear; overflow: hidden; transform: translate3d(0px, 0px, 0px);
|
||||
}
|
||||
.vault.isClosed { width: 0px; }
|
||||
.vault {
|
||||
.head {
|
||||
height: 50px; display: flex; flex-direction: row; align-items: center; justify-content: flex-end; gap: 0px 8px; padding: 0px 14px; flex-shrink: 0;
|
||||
position: relative; z-index: 1; background: inherit;
|
||||
}
|
||||
|
||||
.body { display: flex; flex-direction: column; justify-content: space-between; flex-grow: 1; gap: 12px 0px; height: calc(100% - 64px); }
|
||||
.body {
|
||||
display: flex; flex-direction: column; justify-content: space-between; flex-grow: 1; gap: 12px 0px; height: calc(100% - 64px);
|
||||
width: $vaultWidthCollapsed;
|
||||
}
|
||||
.body {
|
||||
.side { padding: 0px 10px; }
|
||||
.side.top {
|
||||
display: flex; flex-direction: column; gap: 8px 0px; overflow: auto; flex-grow: 1; overscroll-behavior: none;
|
||||
}
|
||||
.side { padding: 0px 10px; display: flex; flex-direction: column; align-items: center; }
|
||||
.side.top { gap: 16px 0px; overflow: auto; flex-grow: 1; overscroll-behavior: none; }
|
||||
.side.top::-webkit-scrollbar { display: none; }
|
||||
.side.bottom { flex-shrink: 0; align-items: flex-end; padding-bottom: 12px; }
|
||||
.side.bottom { flex-shrink: 0; justify-content: flex-end; padding-bottom: 12px; }
|
||||
}
|
||||
|
||||
.item { width: 52px; height: 52px; flex-shrink: 0; position: relative; padding: 2px; transition: all 0.2s $easeInQuint; }
|
||||
.item { width: 36px; height: 36px; flex-shrink: 0; position: relative; padding: 2px; transition: all 0.2s $easeInQuint; }
|
||||
.item {
|
||||
.iconWrap {
|
||||
width: 100%; height: 100%; border-radius: 2px; background-repeat: no-repeat; background-position: center;
|
||||
width: 100%; height: 100%; border-radius: 4px; background-repeat: no-repeat; background-position: center;
|
||||
transition: background-color 0.2s $easeInQuint; overflow: hidden;
|
||||
}
|
||||
.iconObject { width: 100% !important; height: 100% !important; }
|
||||
.iconObject { width: 100% !important; height: 100% !important; border-radius: inherit !important; }
|
||||
}
|
||||
.item::after {
|
||||
content: ''; position: absolute; width: 8px; height: 8px; background-color: var(--color-control-accent); left: -14px; top: 50%; margin-top: -4px;
|
||||
content: ''; position: absolute; width: 4px; height: 4px; background-color: var(--color-control-accent); left: -10px; top: 50%; margin-top: -2px;
|
||||
border-radius: 50%; opacity: 0; transition: opacity 0.2s $easeInQuint; opacity: 0;
|
||||
}
|
||||
|
||||
|
|
|
@ -53,9 +53,8 @@
|
|||
.widget.isEditable.isOver.bottom::before { bottom: -7px; }
|
||||
}
|
||||
|
||||
.listWidget.isEditing { padding-bottom: 58px; }
|
||||
.listWidget.isEditing {
|
||||
> .buttons { position: fixed; bottom: 0px; left: 0px; padding: 0px 16px 16px 16px; }
|
||||
> .buttons { position: sticky; bottom: 0px; left: 0px; padding: 0px 16px; }
|
||||
|
||||
.widget:not(.isEditable) { opacity: 0.5; }
|
||||
.widget:not(.isEditable) {
|
||||
|
|
|
@ -22,9 +22,11 @@
|
|||
.btn:hover { background-color: var(--color-shape-highlight-medium); }
|
||||
.btn.prevMonth { transform: rotateZ(180deg); }
|
||||
}
|
||||
|
||||
.days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); justify-items: center; grid-gap: 8px; align-items: center; }
|
||||
}
|
||||
|
||||
.body { padding: 0px 16px; }
|
||||
.body { padding: 0px 16px; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); justify-items: center; grid-gap: 8px; }
|
||||
.foot { padding: 0px 16px; }
|
||||
.foot {
|
||||
.btn { display: inline-block; vertical-align: top; margin-right: 16px; transition: $transitionAllCommon; }
|
||||
|
@ -33,10 +35,7 @@
|
|||
.btn:hover { color: var(--color-system-accent-100); }
|
||||
}
|
||||
|
||||
.day {
|
||||
display: inline-block; vertical-align: top; width: 28px; height: 28px; line-height: 28px; text-align: center; margin-right: 8px; border-radius: 4px;
|
||||
}
|
||||
.day:nth-child(7n + 7) { margin: 0px; }
|
||||
.day { display: flex; width: 28px; height: 28px; line-height: 28px; text-align: center; border-radius: 4px; align-items: center; justify-content: center; }
|
||||
.day:not(.th):not(.active):hover { background: var(--color-shape-highlight-medium); }
|
||||
|
||||
.day.th { color: var(--color-control-active); @include text-small; }
|
||||
|
|
|
@ -34,4 +34,6 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu.menuDataviewContext { width: var(--menu-width-icon); }
|
||||
}
|
||||
|
|
|
@ -31,12 +31,18 @@
|
|||
.iconObject { margin-right: 2px; }
|
||||
}
|
||||
|
||||
.txt { width: calc(100% - 70px); line-height: 20px; height: 40px; display: flex; flex-direction: column; }
|
||||
.txt { width: calc(100% - 70px); line-height: 20px; height: 40px; display: flex; flex-direction: column; align-items: flex-start; }
|
||||
.txt {
|
||||
.name { @include text-overflow-nw; width: 100%; }
|
||||
.name { @include text-overflow-nw; }
|
||||
.flex { line-height: 20px; }
|
||||
|
||||
.condition { color: var(--color-text-secondary); margin-right: 4px; }
|
||||
.name,
|
||||
.flex { display: flex; align-items: center; }
|
||||
.name::after,
|
||||
.flex::after { content: ''; width: 20px; height: 20px; background-image: url('~img/arrow/select/dark.svg'); }
|
||||
.flex::after { background-image: url('~img/arrow/select/light.svg'); }
|
||||
|
||||
.condition { color: var(--color-text-secondary); }
|
||||
.value { color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; }
|
||||
}
|
||||
}
|
||||
|
@ -106,4 +112,4 @@
|
|||
|
||||
.input { border: 0px; padding: 0px; height: 20px; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -66,7 +66,7 @@
|
|||
|
||||
.section.colorPicker { padding: 8px 14px 0px 14px; }
|
||||
.section.colorPicker {
|
||||
.items { display: flex; flex-wrap: wrap; gap: 8px; }
|
||||
.items { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); justify-items: center; grid-gap: 8px; align-items: center; }
|
||||
.items {
|
||||
.item.color { width: 38px; height: 38px; border-radius: 50%; position: relative; padding: 0px; }
|
||||
.item.color::before { display: none; }
|
||||
|
|
|
@ -11,12 +11,11 @@
|
|||
.item {
|
||||
.iconObject { margin-right: 10px; }
|
||||
|
||||
.select { border: 0px; padding: 0px; display: block; }
|
||||
.select { border: 0px; padding: 0px; display: block; padding-right: 20px; }
|
||||
.select:hover, .select.isFocused { background: none; }
|
||||
.select.grey { color: var(--color-control-active); }
|
||||
.select {
|
||||
.icon.relation { display: none; }
|
||||
.icon.arrow { display: none; }
|
||||
}
|
||||
|
||||
.buttons { line-height: 44px; opacity: 0; transition: $transitionAllCommon; }
|
||||
|
@ -24,7 +23,11 @@
|
|||
.icon { vertical-align: middle; opacity: 1; }
|
||||
}
|
||||
|
||||
.txt { width: calc(100% - 74px); line-height: 20px; height: 40px; display: flex; flex-direction: column; }
|
||||
.txt { width: calc(100% - 74px); line-height: 20px; height: 40px; display: flex; flex-direction: column; align-items: flex-start; }
|
||||
.txt {
|
||||
.label { @include text-common; display: flex; align-items: center; font-weight: 400; line-height: 20px; padding: 0px; margin: 0px; color: var(--color-text-primary); }
|
||||
.label::after { content: ''; width: 20px; height: 20px; background-image: url('~img/arrow/select/dark.svg'); }
|
||||
}
|
||||
}
|
||||
.item.empty { margin: 8px 0px; padding: 14px 16px; }
|
||||
.item.isReadonly {
|
||||
|
@ -43,4 +46,4 @@
|
|||
.line { margin-top: 0px; }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
@import "~scss/_mixins";
|
||||
|
||||
.menus {
|
||||
.menu.menuRelationSuggest { width: var(--menu-width-icon); }
|
||||
.menu.menuRelationSuggest {
|
||||
.content { max-height: unset; overflow: hidden; padding: 0px; transition: none; }
|
||||
.wrap { height: 100%; display: flex; flex-direction: column; }
|
||||
|
|
|
@ -20,7 +20,11 @@
|
|||
|
||||
.menu.menuSelect.withFilter {
|
||||
.content { padding: 8px 0px 0px 0px; }
|
||||
.items { height: calc(100% - 38px); }
|
||||
.items { height: calc(100% - 30px); }
|
||||
}
|
||||
|
||||
.menu.menuSelect.withAdd {
|
||||
.content { max-height: 378px; }
|
||||
}
|
||||
|
||||
.menu.menuSelect.skip { width: var(--menu-width-value); }
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
@import "~scss/_mixins";
|
||||
|
||||
.menus {
|
||||
.menu.menuTypeSuggest { width: var(--menu-width-icon); }
|
||||
.menu.menuTypeSuggest {
|
||||
.filter { padding-top: 12px; }
|
||||
.content { max-height: unset; overflow: hidden; padding: 0px; transition: none; }
|
||||
|
|
|
@ -513,7 +513,7 @@
|
|||
.side.left {
|
||||
.iconObject { flex-shrink: 0; margin: 0px 12px 0px 0px; }
|
||||
.name { @include text-common; @include text-overflow-nw; width: auto; max-width: 330px; }
|
||||
.tagItem { color: var(--color-control-bg); background: var(--color-control-accent); margin: 0px 0px 0px 8px; }
|
||||
.tagItem { color: var(--color-text-inversion); background: var(--color-control-accent); margin: 0px 0px 0px 8px; }
|
||||
.caption { color: var(--color-text-secondary); margin: 0px 0px 0px 4px; }
|
||||
}
|
||||
|
||||
|
|
|
@ -241,6 +241,26 @@
|
|||
}
|
||||
}
|
||||
|
||||
/* DataviewFilterList */
|
||||
|
||||
.menu.menuDataviewFilterList {
|
||||
.item {
|
||||
.txt {
|
||||
.name::after { background-image: url('#{$themePath}/arrow/select/dark.svg'); }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* DataviewSort */
|
||||
|
||||
.menu.menuDataviewSort {
|
||||
.item {
|
||||
.txt {
|
||||
.label::after { background-image: url('#{$themePath}/arrow/select/dark.svg'); }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* QuickCapture */
|
||||
|
||||
.menuQuickCapture { background: none; box-shadow: none; }
|
||||
|
|
|
@ -138,11 +138,9 @@ class RoutePage extends React.Component<RouteComponentProps> {
|
|||
<ListPopup key="listPopup" {...this.props} />
|
||||
<ListMenu key="listMenu" {...this.props} />
|
||||
|
||||
<div id="vaultContentContainer">
|
||||
<Sidebar key="sidebar" {...this.props} />
|
||||
<Navigation ref={ref => S.Common.refSet('navigation', ref)} key="navigation" {...this.props} />
|
||||
<Page {...this.props} />
|
||||
</div>
|
||||
<Navigation ref={ref => S.Common.refSet('navigation', ref)} key="navigation" {...this.props} />
|
||||
<Sidebar key="sidebar" {...this.props} />
|
||||
<Page {...this.props} />
|
||||
</DragProvider>
|
||||
</SelectionProvider>
|
||||
);
|
||||
|
|
|
@ -78,6 +78,8 @@ const BlockDataview = observer(class BlockDataview extends React.Component<Props
|
|||
this.onSelectEnd = this.onSelectEnd.bind(this);
|
||||
this.onSelectToggle = this.onSelectToggle.bind(this);
|
||||
this.onFilterChange = this.onFilterChange.bind(this);
|
||||
this.onSortAdd = this.onSortAdd.bind(this);
|
||||
this.onFilterAdd = this.onFilterAdd.bind(this);
|
||||
|
||||
this.getSearchIds = this.getSearchIds.bind(this);
|
||||
this.objectOrderUpdate = this.objectOrderUpdate.bind(this);
|
||||
|
@ -167,6 +169,8 @@ const BlockDataview = observer(class BlockDataview extends React.Component<Props
|
|||
onRecordAdd: this.onRecordAdd,
|
||||
onTemplateMenu: this.onTemplateMenu,
|
||||
onTemplateAdd: this.onTemplateAdd,
|
||||
onSortAdd: this.onSortAdd,
|
||||
onFilterAdd: this.onFilterAdd,
|
||||
isAllowedObject: this.isAllowedObject,
|
||||
isAllowedDefaultType: this.isAllowedDefaultType,
|
||||
onSourceSelect: this.onSourceSelect,
|
||||
|
@ -1105,6 +1109,41 @@ const BlockDataview = observer(class BlockDataview extends React.Component<Props
|
|||
this.objectOrderUpdate([ { viewId: view.id, groupId: '', objectIds: records } ], records);
|
||||
};
|
||||
|
||||
onSortAdd (item: any, callBack?: () => void) {
|
||||
const { rootId, block, isInline } = this.props;
|
||||
const view = this.getView();
|
||||
const object = this.getTarget();
|
||||
|
||||
C.BlockDataviewSortAdd(rootId, block.id, view.id, item, () => {
|
||||
if (callBack) {
|
||||
callBack();
|
||||
};
|
||||
|
||||
analytics.event('AddSort', {
|
||||
objectType: object.type,
|
||||
embedType: analytics.embedType(isInline)
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
onFilterAdd (item: any, callBack?: () => void) {
|
||||
const { rootId, block, isInline } = this.props;
|
||||
const view = this.getView();
|
||||
const object = this.getTarget();
|
||||
|
||||
C.BlockDataviewFilterAdd(rootId, block.id, view.id, item, () => {
|
||||
if (callBack) {
|
||||
callBack();
|
||||
};
|
||||
|
||||
analytics.event('AddFilter', {
|
||||
condition: item.condition,
|
||||
objectType: object.type,
|
||||
embedType: analytics.embedType(isInline)
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
getIdPrefix () {
|
||||
return [ 'dataviewCell', this.props.block.id ].join('-');
|
||||
};
|
||||
|
|
|
@ -5,7 +5,7 @@ import { observer } from 'mobx-react';
|
|||
import { observable } from 'mobx';
|
||||
import { SortableContainer, SortableElement } from 'react-sortable-hoc';
|
||||
import { Icon, Button, Filter } from 'Component';
|
||||
import { C, I, S, U, analytics, Relation, keyboard, translate, Dataview, sidebar } from 'Lib';
|
||||
import { C, I, S, U, analytics, Relation, keyboard, translate, Dataview, sidebar, J } from 'Lib';
|
||||
import Head from './head';
|
||||
|
||||
interface Props extends I.ViewComponent {
|
||||
|
@ -23,6 +23,8 @@ const Controls = observer(class Controls extends React.Component<Props> {
|
|||
super(props);
|
||||
|
||||
this.onButton = this.onButton.bind(this);
|
||||
this.sortOrFilterRelationSelect = this.sortOrFilterRelationSelect.bind(this);
|
||||
this.onSortOrFilterAdd = this.onSortOrFilterAdd.bind(this);
|
||||
this.onSortStart = this.onSortStart.bind(this);
|
||||
this.onSortEnd = this.onSortEnd.bind(this);
|
||||
this.onViewAdd = this.onViewAdd.bind(this);
|
||||
|
@ -259,11 +261,18 @@ const Controls = observer(class Controls extends React.Component<Props> {
|
|||
|
||||
const {
|
||||
rootId, block, readonly, loadData, getView, getSources, getVisibleRelations, getTarget, isInline, isCollection,
|
||||
getTypeId, getTemplateId, isAllowedDefaultType, onTemplateAdd,
|
||||
getTypeId, getTemplateId, isAllowedDefaultType, onTemplateAdd, onSortAdd, onFilterAdd,
|
||||
} = this.props;
|
||||
const view = getView();
|
||||
const obj = $(element);
|
||||
|
||||
if (((component == 'dataviewSort') && !view.sorts.length) || ((component == 'dataviewFilterList') && !view.filters.length)) {
|
||||
this.sortOrFilterRelationSelect(component,{ element }, () => {
|
||||
this.onButton(element, component);
|
||||
});
|
||||
return;
|
||||
};
|
||||
|
||||
const param: any = {
|
||||
element,
|
||||
horizontal: I.MenuDirection.Center,
|
||||
|
@ -296,10 +305,19 @@ const Controls = observer(class Controls extends React.Component<Props> {
|
|||
isCollection,
|
||||
isAllowedDefaultType,
|
||||
onTemplateAdd,
|
||||
onSortAdd,
|
||||
onFilterAdd,
|
||||
onViewSwitch: this.onViewSwitch,
|
||||
onViewCopy: this.onViewCopy,
|
||||
onViewRemove: this.onViewRemove,
|
||||
view: observable.box(view)
|
||||
view: observable.box(view),
|
||||
onAdd: (menuId, menuWidth) => {
|
||||
this.sortOrFilterRelationSelect(component,{
|
||||
element: `#${menuId} #item-add`,
|
||||
offsetX: menuWidth,
|
||||
horizontal: I.MenuDirection.Right
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
|
@ -307,9 +325,58 @@ const Controls = observer(class Controls extends React.Component<Props> {
|
|||
param.title = translate('menuDataviewViewSettings');
|
||||
};
|
||||
|
||||
if (S.Menu.isOpen('select')) {
|
||||
S.Menu.close('select');
|
||||
};
|
||||
S.Menu.open(component, param);
|
||||
};
|
||||
|
||||
sortOrFilterRelationSelect (component: string, param: any, callBack?: () => void) {
|
||||
const { rootId, block, getView } = this.props;
|
||||
|
||||
U.Menu.sortOrFilterRelationSelect({
|
||||
menuParam: param,
|
||||
rootId,
|
||||
blockId: block.id,
|
||||
getView,
|
||||
onSelect: (item) => {
|
||||
this.onSortOrFilterAdd(item, component, () => {
|
||||
if (callBack) {
|
||||
callBack();
|
||||
};
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
onSortOrFilterAdd (item: any, component: string, callBack: () => void) {
|
||||
const { onSortAdd, onFilterAdd } = this.props;
|
||||
|
||||
let newItem = {
|
||||
relationKey: item.relationKey ? item.relationKey : item.id
|
||||
};
|
||||
|
||||
if (component == 'dataviewSort') {
|
||||
newItem = Object.assign(newItem, {
|
||||
type: I.SortType.Asc,
|
||||
});
|
||||
|
||||
onSortAdd(newItem, callBack);
|
||||
} else
|
||||
if (component == 'dataviewFilterList') {
|
||||
const conditions = Relation.filterConditionsByType(item.format);
|
||||
const condition = conditions.length ? conditions[0].id : I.FilterCondition.None;
|
||||
|
||||
newItem = Object.assign(newItem, {
|
||||
operator: I.FilterOperator.And,
|
||||
condition: condition as I.FilterCondition,
|
||||
value: Relation.formatValue(item, null, false),
|
||||
});
|
||||
|
||||
onFilterAdd(newItem, callBack);
|
||||
};
|
||||
};
|
||||
|
||||
onViewAdd (e: any) {
|
||||
e.persist();
|
||||
|
||||
|
|
|
@ -14,7 +14,7 @@ interface Props extends I.ViewComponent {
|
|||
const BodyRow = observer(class BodyRow extends React.Component<Props> {
|
||||
|
||||
render () {
|
||||
const { rootId, block, style, recordId, getRecord, onContext, onDragRecordStart, getColumnWidths, isInline, getVisibleRelations, isCollection, onSelectToggle } = this.props;
|
||||
const { rootId, block, style, recordId, readonly, getRecord, onContext, onDragRecordStart, getColumnWidths, isInline, getVisibleRelations, isCollection, onSelectToggle } = this.props;
|
||||
const relations = getVisibleRelations();
|
||||
const widths = getColumnWidths('', 0);
|
||||
const record = getRecord(recordId);
|
||||
|
@ -64,14 +64,14 @@ const BodyRow = observer(class BodyRow extends React.Component<Props> {
|
|||
if (isCollection && !isInline) {
|
||||
content = (
|
||||
<React.Fragment>
|
||||
<Icon
|
||||
{!readonly ? <Icon
|
||||
className="drag"
|
||||
draggable={true}
|
||||
onClick={e => onSelectToggle(e, record.id)}
|
||||
onDragStart={e => onDragRecordStart(e, record.id)}
|
||||
onMouseEnter={() => keyboard.setSelectionClearDisabled(true)}
|
||||
onMouseLeave={() => keyboard.setSelectionClearDisabled(false)}
|
||||
/>
|
||||
/> : ''}
|
||||
<DropTarget {...this.props} rootId={rootId} id={record.id} dropType={I.DropType.Record}>
|
||||
{content}
|
||||
</DropTarget>
|
||||
|
|
|
@ -4,7 +4,7 @@ import raf from 'raf';
|
|||
import { observer } from 'mobx-react';
|
||||
import { throttle } from 'lodash';
|
||||
import { DragLayer } from 'Component';
|
||||
import { I, C, S, U, J, focus, keyboard, scrollOnMove, Action, Preview } from 'Lib';
|
||||
import { I, C, S, U, J, focus, keyboard, scrollOnMove, Action, Preview, analytics } from 'Lib';
|
||||
|
||||
interface Props {
|
||||
children?: React.ReactNode;
|
||||
|
@ -475,7 +475,7 @@ const DragProvider = observer(class DragProvider extends React.Component<Props>
|
|||
};
|
||||
|
||||
if (create) {
|
||||
Action.createWidgetFromObject(contextId, objectId, targetId, position);
|
||||
Action.createWidgetFromObject(contextId, objectId, targetId, position, analytics.route.addWidgetDnD);
|
||||
};
|
||||
|
||||
break;
|
||||
|
|
|
@ -102,14 +102,14 @@ const ListWidget = observer(class ListWidget extends React.Component<{}, State>
|
|||
|
||||
if (isEditing) {
|
||||
if (blocks.length <= J.Constant.limit.widgets) {
|
||||
buttons.push({ id: 'widget-list-add', text: translate('commonAdd'), onMouseDown: this.onAdd });
|
||||
buttons.push({ id: 'widget-list-add', text: translate('commonAdd'), onMouseDown: e => this.onAdd(e, analytics.route.addWidgetEditor) });
|
||||
};
|
||||
|
||||
buttons.push({ id: 'widget-list-done', text: translate('commonDone'), onMouseDown: this.onEdit });
|
||||
} else
|
||||
if (canWrite) {
|
||||
buttons = buttons.concat([
|
||||
{ id: 'widget-list-add', className: 'grey c28', text: translate('widgetAdd'), onMouseDown: this.onAdd },
|
||||
{ id: 'widget-list-add', className: 'grey c28', text: translate('widgetAdd'), onMouseDown: e => this.onAdd(e, analytics.route.addWidgetMain) },
|
||||
{ id: 'widget-list-edit', className: 'grey c28', text: translate('widgetEdit'), onMouseDown: this.onEdit }
|
||||
]);
|
||||
};
|
||||
|
@ -204,10 +204,10 @@ const ListWidget = observer(class ListWidget extends React.Component<{}, State>
|
|||
this.setEditing(!this.state.isEditing);
|
||||
};
|
||||
|
||||
onAdd (e: any): void {
|
||||
onAdd (e: any, route?: string): void {
|
||||
e.stopPropagation();
|
||||
|
||||
analytics.event('ClickAddWidget');
|
||||
analytics.event('ClickAddWidget', { route });
|
||||
|
||||
S.Menu.open('searchObjectWidgetAdd', {
|
||||
component: 'searchObject',
|
||||
|
@ -249,7 +249,7 @@ const ListWidget = observer(class ListWidget extends React.Component<{}, State>
|
|||
U.Object.openConfig(target);
|
||||
};
|
||||
|
||||
analytics.event('AddWidget', { type: I.WidgetLayout.Link });
|
||||
analytics.event('AddWidget', { type: I.WidgetLayout.Link, route });
|
||||
analytics.event('ChangeWidgetSource', {
|
||||
layout,
|
||||
route: 'AddWidget',
|
||||
|
@ -484,4 +484,4 @@ const ListWidget = observer(class ListWidget extends React.Component<{}, State>
|
|||
|
||||
});
|
||||
|
||||
export default ListWidget;
|
||||
export default ListWidget;
|
||||
|
|
|
@ -423,7 +423,7 @@ class MenuContext extends React.Component<I.Menu> {
|
|||
case 'createWidget': {
|
||||
const firstBlock = S.Block.getFirstBlock(S.Block.widgets, 1, it => it.isWidget());
|
||||
|
||||
Action.createWidgetFromObject(first.id, first.id, firstBlock?.id, I.BlockPosition.Top);
|
||||
Action.createWidgetFromObject(first.id, first.id, firstBlock?.id, I.BlockPosition.Top, analytics.route.addWidgetMenu);
|
||||
break;
|
||||
};
|
||||
|
||||
|
|
|
@ -192,17 +192,20 @@ const MenuFilterList = observer(class MenuFilterList extends React.Component<I.M
|
|||
};
|
||||
|
||||
onAdd (e: any) {
|
||||
const { param, getId } = this.props;
|
||||
const { param, getId, getSize } = this.props;
|
||||
const { data } = param;
|
||||
const { rootId, blockId, getView, isInline, getTarget } = data;
|
||||
const view = getView();
|
||||
const { onFilterAdd, onAdd } = data;
|
||||
const relationOptions = this.getRelationOptions();
|
||||
const object = getTarget();
|
||||
|
||||
if (!relationOptions.length) {
|
||||
return;
|
||||
};
|
||||
|
||||
if (onAdd) {
|
||||
onAdd(getId(), getSize().width);
|
||||
return;
|
||||
};
|
||||
|
||||
const obj = $(`#${getId()} .content`);
|
||||
const first = relationOptions[0];
|
||||
const conditions = Relation.filterConditionsByType(first.format);
|
||||
|
@ -214,14 +217,8 @@ const MenuFilterList = observer(class MenuFilterList extends React.Component<I.M
|
|||
value: Relation.formatValue(first, null, false),
|
||||
};
|
||||
|
||||
C.BlockDataviewFilterAdd(rootId, blockId, view.id, newItem);
|
||||
|
||||
obj.animate({ scrollTop: obj.get(0).scrollHeight }, 50);
|
||||
|
||||
analytics.event('AddFilter', {
|
||||
condition: newItem.condition,
|
||||
objectType: object.type,
|
||||
embedType: analytics.embedType(isInline)
|
||||
onFilterAdd(newItem, () => {
|
||||
obj.animate({ scrollTop: obj.get(0).scrollHeight }, 50);
|
||||
});
|
||||
};
|
||||
|
||||
|
@ -348,4 +345,4 @@ const MenuFilterList = observer(class MenuFilterList extends React.Component<I.M
|
|||
|
||||
});
|
||||
|
||||
export default MenuFilterList;
|
||||
export default MenuFilterList;
|
||||
|
|
|
@ -414,7 +414,7 @@ const MenuDataviewFilterValues = observer(class MenuDataviewFilterValues extends
|
|||
onOver (e: any, item: any) {
|
||||
const { getId, getSize, setActive, param } = this.props;
|
||||
const { data } = param;
|
||||
const { getView, itemId } = data;
|
||||
const { rootId, blockId, getView, itemId } = data;
|
||||
const view = getView();
|
||||
const filter = view.getFilter(itemId);
|
||||
const isReadonly = this.isReadonly();
|
||||
|
@ -430,13 +430,29 @@ const MenuDataviewFilterValues = observer(class MenuDataviewFilterValues extends
|
|||
let options = [];
|
||||
let key = item.id;
|
||||
|
||||
switch (item.id) {
|
||||
case 'relation': {
|
||||
options = this.getRelationOptions();
|
||||
key = 'relationKey';
|
||||
break;
|
||||
if (item.id == 'relation') {
|
||||
const menuParam = {
|
||||
element: `#${getId()} #item-${item.id}`,
|
||||
offsetX: getSize().width,
|
||||
horizontal: I.MenuDirection.Right,
|
||||
vertical: I.MenuDirection.Center,
|
||||
passThrough: true,
|
||||
};
|
||||
|
||||
U.Menu.sortOrFilterRelationSelect({
|
||||
menuParam,
|
||||
rootId,
|
||||
blockId,
|
||||
getView,
|
||||
onSelect: (item) => {
|
||||
this.onChange('relationKey', item.relationKey ? item.relationKey : item.id);
|
||||
}
|
||||
});
|
||||
|
||||
return;
|
||||
};
|
||||
|
||||
switch (item.id) {
|
||||
case 'condition': {
|
||||
if (Relation.isDictionary(filter.relationKey)) {
|
||||
options = Relation.filterConditionsDictionary();
|
||||
|
@ -758,4 +774,4 @@ const MenuDataviewFilterValues = observer(class MenuDataviewFilterValues extends
|
|||
|
||||
});
|
||||
|
||||
export default MenuDataviewFilterValues;
|
||||
export default MenuDataviewFilterValues;
|
||||
|
|
|
@ -4,7 +4,7 @@ import $ from 'jquery';
|
|||
import { observer } from 'mobx-react';
|
||||
import { AutoSizer, CellMeasurer, InfiniteLoader, List as VList, CellMeasurerCache } from 'react-virtualized';
|
||||
import { SortableContainer, SortableElement, SortableHandle } from 'react-sortable-hoc';
|
||||
import { Icon, IconObject, Select } from 'Component';
|
||||
import { Icon, IconObject, Label, Select } from 'Component';
|
||||
import { I, C, S, U, J, Relation, keyboard, analytics, translate } from 'Lib';
|
||||
|
||||
const HEIGHT = 48;
|
||||
|
@ -26,6 +26,7 @@ const MenuSort = observer(class MenuSort extends React.Component<I.Menu> {
|
|||
this.onSortStart = this.onSortStart.bind(this);
|
||||
this.onSortEnd = this.onSortEnd.bind(this);
|
||||
this.onScroll = this.onScroll.bind(this);
|
||||
this.onSortNameClick = this.onSortNameClick.bind(this);
|
||||
};
|
||||
|
||||
render () {
|
||||
|
@ -47,8 +48,6 @@ const MenuSort = observer(class MenuSort extends React.Component<I.Menu> {
|
|||
{ id: String(I.SortType.Asc), name: translate('commonAscending') },
|
||||
{ id: String(I.SortType.Desc), name: translate('commonDescending') },
|
||||
];
|
||||
|
||||
const relationOptions = this.getRelationOptions();
|
||||
|
||||
const Handle = SortableHandle(() => (
|
||||
<Icon className="dnd" />
|
||||
|
@ -56,6 +55,7 @@ const MenuSort = observer(class MenuSort extends React.Component<I.Menu> {
|
|||
|
||||
const Item = SortableElement((item: any) => {
|
||||
const relation: any = S.Record.getRelationByKey(item.relationKey) || {};
|
||||
|
||||
return (
|
||||
<div
|
||||
id={'item-' + item.id}
|
||||
|
@ -66,18 +66,13 @@ const MenuSort = observer(class MenuSort extends React.Component<I.Menu> {
|
|||
{!isReadonly ? <Handle /> : ''}
|
||||
<IconObject size={40} object={{ relationFormat: relation.format, layout: I.ObjectLayout.Relation }} />
|
||||
<div className="txt">
|
||||
<Select
|
||||
id={[ 'filter', 'relation', item.id ].join('-')}
|
||||
options={relationOptions}
|
||||
value={item.relationKey}
|
||||
onChange={v => this.onChange(item.id, 'relationKey', v)}
|
||||
readonly={isReadonly}
|
||||
/>
|
||||
<Label id={[ 'filter', 'relation', item.id ].join('-')} text={relation.name} onClick={e => this.onSortNameClick(e, item)} />
|
||||
|
||||
<Select
|
||||
id={[ 'filter', 'type', item.id ].join('-')}
|
||||
className="grey"
|
||||
options={typeOptions}
|
||||
options={typeOptions}
|
||||
arrowClassName={'light'}
|
||||
value={item.type}
|
||||
onChange={v => this.onChange(item.id, 'type', v)}
|
||||
readonly={isReadonly}
|
||||
|
@ -290,19 +285,48 @@ const MenuSort = observer(class MenuSort extends React.Component<I.Menu> {
|
|||
});
|
||||
};
|
||||
|
||||
onSortNameClick (e: React.MouseEvent, item: any) {
|
||||
if (this.isReadonly()) {
|
||||
return;
|
||||
};
|
||||
|
||||
const { param, getId, getSize } = this.props;
|
||||
const { data } = param;
|
||||
const { rootId, blockId, getView } = data;
|
||||
|
||||
const menuParam = {
|
||||
element: `#${getId()} #item-${item.id}`,
|
||||
offsetX: getSize().width,
|
||||
horizontal: I.MenuDirection.Right,
|
||||
vertical: I.MenuDirection.Center
|
||||
};
|
||||
|
||||
U.Menu.sortOrFilterRelationSelect({
|
||||
menuParam,
|
||||
rootId,
|
||||
blockId,
|
||||
getView,
|
||||
onSelect: (v) => {
|
||||
this.onChange(item.id, 'relationKey', v.relationKey ? v.relationKey : v.id);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
onAdd () {
|
||||
const { param, getId } = this.props;
|
||||
const { param, getId, getSize } = this.props;
|
||||
const { data } = param;
|
||||
const { rootId, getView, getTarget, blockId, isInline } = data;
|
||||
const view = getView();
|
||||
const object = getTarget();
|
||||
const { onSortAdd, onAdd } = data;
|
||||
const relationOptions = this.getRelationOptions();
|
||||
|
||||
if (!relationOptions.length) {
|
||||
return;
|
||||
};
|
||||
|
||||
if (onAdd) {
|
||||
onAdd(getId(), getSize().width);
|
||||
return;
|
||||
};
|
||||
|
||||
const obj = $(`#${getId()}`);
|
||||
const content = obj.find('.content');
|
||||
const newItem = {
|
||||
|
@ -310,13 +334,8 @@ const MenuSort = observer(class MenuSort extends React.Component<I.Menu> {
|
|||
type: I.SortType.Asc,
|
||||
};
|
||||
|
||||
C.BlockDataviewSortAdd(rootId, blockId, view.id, newItem, () => {
|
||||
onSortAdd(newItem, () => {
|
||||
content.animate({ scrollTop: content.get(0).scrollHeight }, 50);
|
||||
|
||||
analytics.event('AddSort', {
|
||||
objectType: object.type,
|
||||
embedType: analytics.embedType(isInline)
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
|
@ -408,4 +427,4 @@ const MenuSort = observer(class MenuSort extends React.Component<I.Menu> {
|
|||
|
||||
});
|
||||
|
||||
export default MenuSort;
|
||||
export default MenuSort;
|
||||
|
|
|
@ -502,7 +502,7 @@ class MenuObject extends React.Component<I.Menu> {
|
|||
case 'createWidget': {
|
||||
const first = S.Block.getFirstBlock(S.Block.widgets, 1, it => it.isWidget());
|
||||
|
||||
Action.createWidgetFromObject(rootId, rootId, first?.id, I.BlockPosition.Top);
|
||||
Action.createWidgetFromObject(rootId, rootId, first?.id, I.BlockPosition.Top, analytics.route.addWidgetMenu);
|
||||
break;
|
||||
};
|
||||
};
|
||||
|
|
|
@ -2,7 +2,7 @@ import * as React from 'react';
|
|||
import $ from 'jquery';
|
||||
import { observer } from 'mobx-react';
|
||||
import { AutoSizer, CellMeasurer, InfiniteLoader, List, CellMeasurerCache } from 'react-virtualized';
|
||||
import { Filter, MenuItemVertical, Label } from 'Component';
|
||||
import { Filter, MenuItemVertical, Label, Icon } from 'Component';
|
||||
import { I, U, Relation, keyboard, translate } from 'Lib';
|
||||
|
||||
const HEIGHT_ITEM = 28;
|
||||
|
@ -61,6 +61,20 @@ const MenuSelect = observer(class MenuSelect extends React.Component<I.Menu> {
|
|||
<div className="inner" />
|
||||
</div>
|
||||
);
|
||||
} else
|
||||
if (item.id == 'add') {
|
||||
content = (
|
||||
<div
|
||||
id="item-add"
|
||||
className="item add"
|
||||
onMouseEnter={e => this.onMouseEnter(e, item)}
|
||||
onClick={e => this.onClick(e, item)}
|
||||
style={item.style}
|
||||
>
|
||||
<Icon className="plus" />
|
||||
<div className="name">{item.name}</div>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
if (item.isInitial) {
|
||||
cn.push('isInitial');
|
||||
|
@ -144,7 +158,8 @@ const MenuSelect = observer(class MenuSelect extends React.Component<I.Menu> {
|
|||
<React.Fragment>
|
||||
{withFilter ? (
|
||||
<Filter
|
||||
ref={ref => this.refFilter = ref}
|
||||
ref={ref => this.refFilter = ref}
|
||||
className="outlined"
|
||||
value={filter}
|
||||
placeholder={placeholder}
|
||||
onChange={this.onFilterChange}
|
||||
|
@ -268,7 +283,7 @@ const MenuSelect = observer(class MenuSelect extends React.Component<I.Menu> {
|
|||
getItems (withSections: boolean) {
|
||||
const { param } = this.props;
|
||||
const { data } = param;
|
||||
const { preventFilter } = data;
|
||||
const { preventFilter, onAdd } = data;
|
||||
const sections = this.getSections();
|
||||
|
||||
let items: any[] = [];
|
||||
|
@ -289,6 +304,14 @@ const MenuSelect = observer(class MenuSelect extends React.Component<I.Menu> {
|
|||
|
||||
items = items.filter(it => String(it.name || '').match(filter));
|
||||
};
|
||||
|
||||
if (onAdd) {
|
||||
items = items.concat([
|
||||
{ isDiv: true },
|
||||
{ id: 'add', name: translate('commonAddRelation') }
|
||||
]);
|
||||
};
|
||||
|
||||
return items || [];
|
||||
};
|
||||
|
||||
|
@ -314,14 +337,19 @@ const MenuSelect = observer(class MenuSelect extends React.Component<I.Menu> {
|
|||
};
|
||||
|
||||
onClick (e: any, item: any) {
|
||||
const { param, close } = this.props;
|
||||
const { param, close, getId, getSize } = this.props;
|
||||
const { data } = param;
|
||||
const { onSelect, canSelectInitial, noClose, disabled } = data;
|
||||
const { onSelect, canSelectInitial, noClose, disabled, onAdd } = data;
|
||||
|
||||
if (item.isInitial && !canSelectInitial) {
|
||||
return;
|
||||
};
|
||||
|
||||
if ((item.id == 'add') && onAdd) {
|
||||
onAdd(getId(), getSize().width);
|
||||
return;
|
||||
};
|
||||
|
||||
if (!noClose) {
|
||||
close();
|
||||
};
|
||||
|
@ -397,7 +425,7 @@ const MenuSelect = observer(class MenuSelect extends React.Component<I.Menu> {
|
|||
resize () {
|
||||
const { position, getId, param } = this.props;
|
||||
const { data } = param;
|
||||
const { noScroll, maxHeight, noVirtualisation } = data;
|
||||
const { noScroll, maxHeight, noVirtualisation, onAdd } = data;
|
||||
const items = this.getItems(true);
|
||||
const obj = $(`#${getId()}`);
|
||||
const content = obj.find('.content');
|
||||
|
@ -425,6 +453,7 @@ const MenuSelect = observer(class MenuSelect extends React.Component<I.Menu> {
|
|||
};
|
||||
|
||||
withFilter ? obj.addClass('withFilter') : obj.removeClass('withFilter');
|
||||
onAdd ? obj.addClass('withAdd') : obj.removeClass('withAdd');
|
||||
noScroll ? obj.addClass('noScroll') : obj.removeClass('noScroll');
|
||||
noVirtualisation ? obj.addClass('noVirtualisation') : obj.removeClass('noVirtualisation');
|
||||
|
||||
|
|
|
@ -214,13 +214,13 @@ const MenuSyncStatus = observer(class MenuSyncStatus extends React.Component<I.M
|
|||
onPanelIconClick (e, item) {
|
||||
const { param, getId } = this.props;
|
||||
const { classNameWrap } = param;
|
||||
const element = `#${getId()} #icon-${item.id}`;
|
||||
const menuParam = {
|
||||
classNameWrap,
|
||||
element,
|
||||
element: `#${getId()} #icon-${item.id}`,
|
||||
offsetY: 4,
|
||||
passThrough: true,
|
||||
data: item
|
||||
horizontal: I.MenuDirection.Center,
|
||||
data: item,
|
||||
};
|
||||
|
||||
e.preventDefault();
|
||||
|
@ -256,7 +256,7 @@ const MenuSyncStatus = observer(class MenuSyncStatus extends React.Component<I.M
|
|||
{ operator: I.FilterOperator.And, relationKey: 'layout', condition: I.FilterCondition.NotIn, value: U.Object.getSystemLayouts() },
|
||||
];
|
||||
const sorts = [
|
||||
{ relationKey: 'syncStatus', type: I.SortType.Custom, customOrder: [ I.SyncStatusObject.Syncing, I.SyncStatusObject.Synced ] },
|
||||
{ relationKey: 'syncStatus', type: I.SortType.Custom, customOrder: [ I.SyncStatusObject.Syncing, I.SyncStatusObject.Queued, I.SyncStatusObject.Synced ] },
|
||||
{ relationKey: 'syncDate', type: I.SortType.Desc },
|
||||
];
|
||||
|
||||
|
@ -274,7 +274,7 @@ const MenuSyncStatus = observer(class MenuSyncStatus extends React.Component<I.M
|
|||
|
||||
getItems () {
|
||||
const records = S.Record.getRecords(SUB_ID).map(it => {
|
||||
if (it.syncStatus == I.SyncStatusObject.Syncing) {
|
||||
if ([ I.SyncStatusObject.Syncing, I.SyncStatusObject.Queued ].includes(it.syncStatus)) {
|
||||
it.syncDate = U.Date.now();
|
||||
};
|
||||
return it;
|
||||
|
@ -412,4 +412,4 @@ const MenuSyncStatus = observer(class MenuSyncStatus extends React.Component<I.M
|
|||
|
||||
});
|
||||
|
||||
export default MenuSyncStatus;
|
||||
export default MenuSyncStatus;
|
||||
|
|
|
@ -382,7 +382,7 @@ const MenuWidget = observer(class MenuWidget extends React.Component<I.Menu> {
|
|||
};
|
||||
|
||||
if (!isEditing) {
|
||||
analytics.event('AddWidget', { type: this.layout });
|
||||
analytics.event('AddWidget', { type: this.layout, route: analytics.route.addWidgetMenu });
|
||||
};
|
||||
});
|
||||
|
||||
|
@ -430,4 +430,4 @@ const MenuWidget = observer(class MenuWidget extends React.Component<I.Menu> {
|
|||
|
||||
});
|
||||
|
||||
export default MenuWidget;
|
||||
export default MenuWidget;
|
||||
|
|
|
@ -157,6 +157,12 @@ const Page = observer(class Page extends React.Component<I.PageComponent> {
|
|||
ret.params.action = 'invite';
|
||||
};
|
||||
|
||||
// Membership route
|
||||
if (pathname.match('/membership')) {
|
||||
ret.params.page = 'main';
|
||||
ret.params.action = 'membership';
|
||||
};
|
||||
|
||||
return ret;
|
||||
};
|
||||
|
||||
|
|
|
@ -41,6 +41,14 @@ class PageMainMembership extends React.Component<I.PageComponent, State> {
|
|||
};
|
||||
|
||||
componentDidMount (): void {
|
||||
this.init();
|
||||
};
|
||||
|
||||
init () {
|
||||
const data = U.Common.searchParam(U.Router.history.location.search);
|
||||
|
||||
let { tier } = data;
|
||||
|
||||
U.Data.getMembershipStatus((membership: I.Membership) => {
|
||||
if (!membership || membership.isNone) {
|
||||
this.setState({ error: translate('pageMainMembershipError') });
|
||||
|
@ -49,25 +57,15 @@ class PageMainMembership extends React.Component<I.PageComponent, State> {
|
|||
|
||||
U.Space.openDashboard('route', {
|
||||
onRouteChange: () => {
|
||||
S.Popup.closeAll(null, () => {
|
||||
const { status, tier } = membership;
|
||||
|
||||
if (status && (status == I.MembershipStatus.Finalization)) {
|
||||
S.Popup.open('membershipFinalization', { data: { tier } });
|
||||
} else {
|
||||
S.Popup.open('membership', {
|
||||
onClose: () => {
|
||||
window.setTimeout(() => S.Popup.open('settings', { data: { page: 'membership' } }), J.Constant.delay.popup * 2);
|
||||
},
|
||||
data: {
|
||||
tier: membership.tier,
|
||||
success: true,
|
||||
},
|
||||
});
|
||||
|
||||
analytics.event('ChangePlan', { params: { tier }});
|
||||
if (tier && (tier != I.TierType.None)) {
|
||||
if (!membership.isNone && !membership.isExplorer) {
|
||||
tier = membership.tier;
|
||||
};
|
||||
});
|
||||
|
||||
S.Popup.open('membership', { data: { tier } });
|
||||
} else {
|
||||
this.finalise();
|
||||
};
|
||||
},
|
||||
});
|
||||
});
|
||||
|
@ -75,6 +73,29 @@ class PageMainMembership extends React.Component<I.PageComponent, State> {
|
|||
this.resize();
|
||||
};
|
||||
|
||||
finalise () {
|
||||
const { membership } = S.Auth;
|
||||
const { status, tier } = membership;
|
||||
|
||||
S.Popup.closeAll(null, () => {
|
||||
if (status == I.MembershipStatus.Finalization) {
|
||||
S.Popup.open('membershipFinalization', { data: { tier } });
|
||||
} else {
|
||||
S.Popup.open('membership', {
|
||||
onClose: () => {
|
||||
window.setTimeout(() => S.Popup.open('settings', { data: { page: 'membership' } }), J.Constant.delay.popup * 2);
|
||||
},
|
||||
data: {
|
||||
tier: membership.tier,
|
||||
success: true,
|
||||
},
|
||||
});
|
||||
|
||||
analytics.event('ChangePlan', { params: { tier }});
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
resize () {
|
||||
const { isPopup } = this.props;
|
||||
const win = $(window);
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import * as React from 'react';
|
||||
import { Icon, Title, Label, Switch } from 'Component';
|
||||
import { I, S, U, translate, analytics, Renderer } from 'Lib';
|
||||
import { I, S, U, translate, Action, Renderer } from 'Lib';
|
||||
import { observer } from 'mobx-react';
|
||||
|
||||
const PopupSettingsPageAppearance = observer(class PopupSettingsPageAppearance extends React.Component<I.PopupSettings> {
|
||||
|
@ -26,7 +26,7 @@ const PopupSettingsPageAppearance = observer(class PopupSettingsPageAppearance e
|
|||
<div
|
||||
key={i}
|
||||
className={[ 'btn', (theme == item.id ? 'active' : ''), item.class ].join(' ')}
|
||||
onClick={() => this.onTheme(item.id)}
|
||||
onClick={() => Action.themeSet(item.id)}
|
||||
>
|
||||
<div className="bg">
|
||||
<Icon />
|
||||
|
@ -60,12 +60,6 @@ const PopupSettingsPageAppearance = observer(class PopupSettingsPageAppearance e
|
|||
);
|
||||
};
|
||||
|
||||
onTheme (id: string) {
|
||||
S.Common.themeSet(id);
|
||||
Renderer.send('setTheme', id);
|
||||
analytics.event('ThemeSet', { id });
|
||||
};
|
||||
|
||||
});
|
||||
|
||||
export default PopupSettingsPageAppearance;
|
|
@ -3,7 +3,7 @@ import $ from 'jquery';
|
|||
import raf from 'raf';
|
||||
import { observer } from 'mobx-react';
|
||||
import { Icon } from 'Component';
|
||||
import { I, U, J, keyboard, Preview, sidebar, translate } from 'Lib';
|
||||
import { I, U, J, S, keyboard, Preview, sidebar, translate } from 'Lib';
|
||||
import ListWidget from 'Component/list/widget';
|
||||
|
||||
const Sidebar = observer(class Sidebar extends React.Component {
|
||||
|
@ -59,7 +59,7 @@ const Sidebar = observer(class Sidebar extends React.Component {
|
|||
className={cn.join(' ')}
|
||||
>
|
||||
<div className="inner">
|
||||
<div id="sidebarHead" className="head">
|
||||
<div id="sidebarHead" className="head" onClick={this.onHeadClick}>
|
||||
{status ? <div className="status">{status}</div> : ''}
|
||||
</div>
|
||||
<div
|
||||
|
@ -192,6 +192,13 @@ const Sidebar = observer(class Sidebar extends React.Component {
|
|||
};
|
||||
};
|
||||
|
||||
onHeadClick () {
|
||||
const space = U.Space.getSpaceview();
|
||||
if (space && space.isShared) {
|
||||
S.Popup.open('settings', { data: { page: 'spaceShare', isSpace: true }, className: 'isSpace' });
|
||||
};
|
||||
};
|
||||
|
||||
});
|
||||
|
||||
export default Sidebar;
|
||||
export default Sidebar;
|
|
@ -277,12 +277,11 @@ const IconObject = observer(class IconObject extends React.Component<Props> {
|
|||
cn.push('withImage');
|
||||
icn = icn.concat([ 'iconImage', 'c' + iconSize ]);
|
||||
icon = <img src={S.Common.imageUrl(iconImage, iconSize * 2)} className={icn.join(' ')} />;
|
||||
} else
|
||||
if (iconOption) {
|
||||
} else {
|
||||
cn.push('withOption withImage');
|
||||
|
||||
icn = icn.concat([ 'iconImage', 'c' + iconSize ]);
|
||||
icon = <img src={this.gradientSvg(0.35)} className={icn.join(' ')} />;
|
||||
icon = <img src={this.gradientSvg(iconOption || 1, 0.35)} className={icn.join(' ')} />;
|
||||
}
|
||||
break;
|
||||
};
|
||||
|
@ -515,10 +514,9 @@ const IconObject = observer(class IconObject extends React.Component<Props> {
|
|||
return 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svg)));
|
||||
};
|
||||
|
||||
gradientSvg (radius: number): string {
|
||||
const object = this.getObject();
|
||||
gradientSvg (option: number, radius: number): string {
|
||||
const iconSize = this.iconSize();
|
||||
const item = J.Color.icons.colors[object.iconOption - 1] as any;
|
||||
const item = J.Color.icons.colors[option - 1] as any;
|
||||
const { from, to } = J.Color.icons.steps;
|
||||
|
||||
const gradient = `
|
||||
|
|
|
@ -2,7 +2,7 @@ import * as React from 'react';
|
|||
import $ from 'jquery';
|
||||
import { observer } from 'mobx-react';
|
||||
import { Icon } from 'Component';
|
||||
import { I, S, U, keyboard, Preview, translate, analytics } from 'Lib';
|
||||
import { I, S, U, J, keyboard, Preview, translate, analytics } from 'Lib';
|
||||
|
||||
const Navigation = observer(class Navigation extends React.Component {
|
||||
|
||||
|
@ -158,7 +158,7 @@ const Navigation = observer(class Navigation extends React.Component {
|
|||
node.css({ left: `${x / ww * 100}%` });
|
||||
|
||||
if (animate) {
|
||||
window.setTimeout(() => node.removeClass('sidebarAnimation'), 200);
|
||||
window.setTimeout(() => node.removeClass('sidebarAnimation'), J.Constant.delay.sidebar);
|
||||
};
|
||||
};
|
||||
|
||||
|
|
|
@ -1,9 +1,8 @@
|
|||
import * as React from 'react';
|
||||
import { trace } from 'mobx';
|
||||
import { observer } from 'mobx-react';
|
||||
import arrayMove from 'array-move';
|
||||
import { SortableContainer, SortableElement } from 'react-sortable-hoc';
|
||||
import { I, U, S, Key, keyboard, translate, analytics, Storage, Preview } from 'Lib';
|
||||
import { I, U, S, Key, keyboard, translate, analytics, Storage, Preview, sidebar } from 'Lib';
|
||||
|
||||
import VaultItem from './item';
|
||||
|
||||
|
@ -12,6 +11,7 @@ const Vault = observer(class Vault extends React.Component {
|
|||
node = null;
|
||||
isAnimating = false;
|
||||
checkKeyUp = false;
|
||||
closeSidebar = false;
|
||||
top = 0;
|
||||
timeoutHover = 0;
|
||||
pressed = new Set();
|
||||
|
@ -116,6 +116,7 @@ const Vault = observer(class Vault extends React.Component {
|
|||
|
||||
onKeyDown (e: any) {
|
||||
const key = e.key.toLowerCase();
|
||||
const { isClosed, width } = sidebar.data;
|
||||
|
||||
if ([ Key.ctrl, Key.tab, Key.shift ].includes(key)) {
|
||||
this.pressed.add(key);
|
||||
|
@ -124,6 +125,11 @@ const Vault = observer(class Vault extends React.Component {
|
|||
keyboard.shortcut('ctrl+tab, ctrl+shift+tab', e, pressed => {
|
||||
this.checkKeyUp = true;
|
||||
this.onArrow(pressed.match('shift') ? -1 : 1);
|
||||
|
||||
if (isClosed) {
|
||||
this.closeSidebar = true;
|
||||
sidebar.open(width);
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
|
@ -150,6 +156,10 @@ const Vault = observer(class Vault extends React.Component {
|
|||
U.Router.switchSpace(item.targetSpaceId, '', true);
|
||||
};
|
||||
|
||||
if (this.closeSidebar) {
|
||||
sidebar.close();
|
||||
this.closeSidebar = false;
|
||||
};
|
||||
Preview.tooltipHide();
|
||||
};
|
||||
|
||||
|
@ -173,7 +183,6 @@ const Vault = observer(class Vault extends React.Component {
|
|||
};
|
||||
|
||||
default: {
|
||||
$(this.node).find('.item.hover').removeClass('hover');
|
||||
U.Router.switchSpace(item.targetSpaceId, '', true);
|
||||
break;
|
||||
};
|
||||
|
@ -223,18 +232,6 @@ const Vault = observer(class Vault extends React.Component {
|
|||
node.find('.item.hover').removeClass('hover');
|
||||
el.addClass('hover');
|
||||
|
||||
const cb = () => {
|
||||
Preview.tooltipShow({
|
||||
text: item.name,
|
||||
element: el,
|
||||
className: 'fromVault',
|
||||
typeX: I.MenuDirection.Left,
|
||||
typeY: I.MenuDirection.Center,
|
||||
offsetX: 62,
|
||||
delay: 1,
|
||||
});
|
||||
};
|
||||
|
||||
let s = -1;
|
||||
if (top < this.top) {
|
||||
s = 0;
|
||||
|
@ -245,9 +242,9 @@ const Vault = observer(class Vault extends React.Component {
|
|||
|
||||
if (s >= 0) {
|
||||
Preview.tooltipHide(true);
|
||||
scroll.stop().animate({ scrollTop: s }, 200, 'swing', () => cb());
|
||||
scroll.stop().animate({ scrollTop: s }, 200, 'swing', () => this.tooltipShow(item, 1));
|
||||
} else {
|
||||
cb();
|
||||
this.tooltipShow(item, 1);
|
||||
};
|
||||
};
|
||||
|
||||
|
@ -300,25 +297,30 @@ const Vault = observer(class Vault extends React.Component {
|
|||
};
|
||||
|
||||
onMouseEnter (e: any, item: any) {
|
||||
if (keyboard.isDragging) {
|
||||
return;
|
||||
if (!keyboard.isDragging) {
|
||||
this.tooltipShow(item, 300);
|
||||
};
|
||||
|
||||
Preview.tooltipShow({
|
||||
text: item.name,
|
||||
element: $(e.currentTarget),
|
||||
className: 'fromVault',
|
||||
typeX: I.MenuDirection.Left,
|
||||
typeY: I.MenuDirection.Center,
|
||||
offsetX: 62,
|
||||
delay: 300,
|
||||
});
|
||||
};
|
||||
|
||||
onMouseLeave () {
|
||||
Preview.tooltipHide();
|
||||
};
|
||||
|
||||
tooltipShow (item: any, delay: number) {
|
||||
const node = $(this.node);
|
||||
const element = node.find(`#item-${item.id}`);
|
||||
|
||||
Preview.tooltipShow({
|
||||
text: item.name,
|
||||
element,
|
||||
className: 'fromVault',
|
||||
typeX: I.MenuDirection.Left,
|
||||
typeY: I.MenuDirection.Center,
|
||||
offsetX: 44,
|
||||
delay,
|
||||
});
|
||||
};
|
||||
|
||||
resize () {
|
||||
$(this.node).css({ height: U.Common.getWindowDimensions().wh });
|
||||
};
|
||||
|
|
|
@ -11,8 +11,6 @@ const WidgetSpace = observer(class WidgetSpace extends React.Component<I.WidgetC
|
|||
super(props);
|
||||
|
||||
this.onSettings = this.onSettings.bind(this);
|
||||
this.onSelect = this.onSelect.bind(this);
|
||||
this.onUpload = this.onUpload.bind(this);
|
||||
this.onRequest = this.onRequest.bind(this);
|
||||
};
|
||||
|
||||
|
@ -29,8 +27,6 @@ const WidgetSpace = observer(class WidgetSpace extends React.Component<I.WidgetC
|
|||
forceLetter={true}
|
||||
size={28}
|
||||
iconSize={28}
|
||||
onSelect={this.onSelect}
|
||||
onUpload={this.onUpload}
|
||||
menuParam={{ className: 'fixed' }}
|
||||
/>
|
||||
<div className="txt">
|
||||
|
@ -69,14 +65,6 @@ const WidgetSpace = observer(class WidgetSpace extends React.Component<I.WidgetC
|
|||
this.openSettings('spaceIndex');
|
||||
};
|
||||
|
||||
onSelect () {
|
||||
C.WorkspaceSetInfo(S.Common.space, { iconImage: '' });
|
||||
};
|
||||
|
||||
onUpload (objectId: string) {
|
||||
C.WorkspaceSetInfo(S.Common.space, { iconImage: objectId });
|
||||
};
|
||||
|
||||
onRequest (e: any) {
|
||||
e.stopPropagation();
|
||||
this.openSettings('spaceShare');
|
||||
|
|
|
@ -136,6 +136,8 @@ export interface ViewComponent {
|
|||
getEmpty?(type: string): any;
|
||||
onRecordAdd?: (e: any, dir: number, groupId?: string) => void;
|
||||
onTemplateAdd?: () => void;
|
||||
onSortAdd?: (item: any, callBack?: () => void) => void;
|
||||
onFilterAdd?: (item: any, callBack?: () => void) => void;
|
||||
onTemplateMenu?: (e: any, dur: number) => void;
|
||||
onCellClick?(e: any, key: string, id?: string, record?: any): void;
|
||||
onContext?(e: any, id: string): void;
|
||||
|
|
|
@ -683,7 +683,7 @@ class Action {
|
|||
});
|
||||
};
|
||||
|
||||
createWidgetFromObject (rootId: string, objectId: string, targetId: string, position: I.BlockPosition) {
|
||||
createWidgetFromObject (rootId: string, objectId: string, targetId: string, position: I.BlockPosition, route?: string) {
|
||||
const object = S.Detail.get(rootId, objectId);
|
||||
|
||||
let layout = I.WidgetLayout.Link;
|
||||
|
@ -709,7 +709,7 @@ class Action {
|
|||
};
|
||||
|
||||
C.BlockCreateWidget(S.Block.widgets, targetId, newBlock, position, layout, limit, () => {
|
||||
analytics.event('AddWidget', { type: layout });
|
||||
analytics.event('AddWidget', { type: layout, route });
|
||||
});
|
||||
};
|
||||
|
||||
|
@ -783,6 +783,12 @@ class Action {
|
|||
});
|
||||
};
|
||||
|
||||
themeSet (id: string) {
|
||||
S.Common.themeSet(id);
|
||||
Renderer.send('setTheme', id);
|
||||
analytics.event('ThemeSet', { id });
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
export default new Action();
|
||||
export default new Action();
|
||||
|
|
|
@ -56,6 +56,11 @@ class Analytics {
|
|||
settingsMembership: 'ScreenSettingsMembership',
|
||||
|
||||
inviteConfirm: 'ScreenInviteConfirm',
|
||||
|
||||
addWidgetMain: 'Main',
|
||||
addWidgetEditor: 'Editor',
|
||||
addWidgetMenu: 'Menu',
|
||||
addWidgetDnD: 'DnD'
|
||||
};
|
||||
|
||||
debug () {
|
||||
|
|
|
@ -113,13 +113,13 @@ class Keyboard {
|
|||
};
|
||||
|
||||
onKeyDown (e: any) {
|
||||
const { theme } = S.Common;
|
||||
const isMac = U.Common.isPlatformMac();
|
||||
const key = e.key.toLowerCase();
|
||||
const cmd = this.cmdKey();
|
||||
const isMain = this.isMain();
|
||||
const canWrite = U.Space.canMyParticipantWrite();
|
||||
const selection = S.Common.getRef('selectionProvider');
|
||||
const { spaceview } = S.Block;
|
||||
|
||||
this.pressed.push(key);
|
||||
|
||||
|
@ -241,6 +241,11 @@ class Keyboard {
|
|||
$('#button-header-relation').trigger('click');
|
||||
});
|
||||
|
||||
// Switch dark/light mode
|
||||
this.shortcut(`${cmd}+shift+m`, e, () => {
|
||||
Action.themeSet(!theme ? 'dark' : '');
|
||||
});
|
||||
|
||||
// Store
|
||||
this.shortcut(`${cmd}+alt+l`, e, () => {
|
||||
U.Object.openRoute({ layout: I.ObjectLayout.Store });
|
||||
|
|
|
@ -421,10 +421,13 @@ class Mark {
|
|||
});
|
||||
|
||||
// Fix browser markup bug
|
||||
text = text.replace(/<\/?(i|b|font|search)[^>]*>/g, (s: string, p: string) => {
|
||||
text = text.replace(/<\/?(i|b|strike|font|search)[^>]*>/g, (s: string, p: string) => {
|
||||
let r = '';
|
||||
|
||||
if (p == 'i') r = this.getTag(I.MarkType.Italic);
|
||||
if (p == 'b') r = this.getTag(I.MarkType.Bold);
|
||||
if (p == 'strike') r = this.getTag(I.MarkType.Strike);
|
||||
|
||||
p = r ? s.replace(p, r) : '';
|
||||
return p;
|
||||
});
|
||||
|
|
|
@ -6,8 +6,6 @@ interface SidebarData {
|
|||
isClosed: boolean;
|
||||
};
|
||||
|
||||
const ANIMATION = 250;
|
||||
|
||||
class Sidebar {
|
||||
|
||||
data: SidebarData = {
|
||||
|
@ -20,15 +18,15 @@ class Sidebar {
|
|||
footer: JQuery<HTMLElement> = null;
|
||||
loader: JQuery<HTMLElement> = null;
|
||||
dummy: JQuery<HTMLElement> = null;
|
||||
vault: JQuery<HTMLElement> = null;
|
||||
isAnimating = false;
|
||||
timeoutHide = 0;
|
||||
timeoutAnim = 0;
|
||||
|
||||
init () {
|
||||
this.initObjects();
|
||||
|
||||
const stored = Storage.get('sidebar');
|
||||
const vault = $(S.Common.getRef('vault').node);
|
||||
|
||||
if (stored) {
|
||||
if ('undefined' == typeof(stored.isClosed)) {
|
||||
stored.isClosed = !stored.width;
|
||||
|
@ -43,6 +41,14 @@ class Sidebar {
|
|||
|
||||
this.resizePage(J.Size.sidebar.width.default, false);
|
||||
};
|
||||
|
||||
if (this.data.isClosed) {
|
||||
vault.addClass('isClosed');
|
||||
this.obj.addClass('isClosed');
|
||||
} else {
|
||||
vault.removeClass('isClosed');
|
||||
this.obj.removeClass('isClosed');
|
||||
};
|
||||
};
|
||||
|
||||
initObjects () {
|
||||
|
@ -52,34 +58,53 @@ class Sidebar {
|
|||
this.footer = this.page.find('#footer');
|
||||
this.loader = this.page.find('#loader');
|
||||
this.dummy = $('#sidebarDummy');
|
||||
this.vault = $('#vault');
|
||||
};
|
||||
|
||||
close (): void {
|
||||
if (!this.obj || !this.obj.length || this.isAnimating) {
|
||||
if (!this.obj || !this.obj.length || this.isAnimating || this.data.isClosed) {
|
||||
return;
|
||||
};
|
||||
|
||||
this.setAnimating(true);
|
||||
this.obj.addClass('anim');
|
||||
this.setAnimating(true);
|
||||
this.setStyle({ width: 0 });
|
||||
this.set({ isClosed: true });
|
||||
this.resizePage(0, true);
|
||||
this.vaultHide();
|
||||
|
||||
this.removeAnimation(() => $(window).trigger('resize'));
|
||||
this.removeAnimation(() => {
|
||||
this.obj.addClass('isClosed');
|
||||
|
||||
window.clearTimeout(this.timeoutAnim);
|
||||
this.timeoutAnim = window.setTimeout(() => {
|
||||
$(window).trigger('resize');
|
||||
this.setAnimating(false);
|
||||
}, this.getVaultDuration(this.data.width));
|
||||
});
|
||||
};
|
||||
|
||||
open (width?: number): void {
|
||||
if (!this.obj || !this.obj.length || this.isAnimating) {
|
||||
if (!this.obj || !this.obj.length || this.isAnimating || !this.data.isClosed) {
|
||||
return;
|
||||
};
|
||||
|
||||
this.setAnimating(true);
|
||||
this.obj.addClass('anim');
|
||||
this.setStyle({ width });
|
||||
this.set({ isClosed: false });
|
||||
this.resizePage(width, true);
|
||||
this.removeAnimation(() => $(window).trigger('resize'));
|
||||
this.vaultShow(width);
|
||||
|
||||
window.clearTimeout(this.timeoutAnim);
|
||||
this.timeoutAnim = window.setTimeout(() => {
|
||||
this.obj.removeClass('isClosed');
|
||||
this.obj.addClass('anim');
|
||||
|
||||
this.setStyle({ width });
|
||||
this.set({ isClosed: false });
|
||||
this.resizePage(width, true);
|
||||
|
||||
this.removeAnimation(() => {
|
||||
$(window).trigger('resize');
|
||||
this.setAnimating(false);
|
||||
});
|
||||
}, this.getVaultDuration(width));
|
||||
};
|
||||
|
||||
toggleOpenClose () {
|
||||
|
@ -87,11 +112,11 @@ class Sidebar {
|
|||
return;
|
||||
};
|
||||
|
||||
const { width } = this.data;
|
||||
const { width, isClosed } = this.data;
|
||||
|
||||
this.obj.find('#sidebarHead').css({ width });
|
||||
this.obj.find('#sidebarBody').css({ width });
|
||||
this.data.isClosed ? this.open(width) : this.close();
|
||||
isClosed ? this.open(width) : this.close();
|
||||
};
|
||||
|
||||
setWidth (w: number): void {
|
||||
|
@ -111,12 +136,11 @@ class Sidebar {
|
|||
this.obj.removeClass('anim');
|
||||
this.obj.find('#sidebarHead').css({ width: '' });
|
||||
this.obj.find('#sidebarBody').css({ width: '' });
|
||||
this.setAnimating(false);
|
||||
|
||||
if (callBack) {
|
||||
callBack();
|
||||
};
|
||||
}, ANIMATION);
|
||||
}, J.Constant.delay.sidebar);
|
||||
};
|
||||
|
||||
resizePage (width: number, animate: boolean): void {
|
||||
|
@ -128,8 +152,9 @@ class Sidebar {
|
|||
};
|
||||
};
|
||||
|
||||
const { isClosed } = this.data;
|
||||
const { ww } = U.Common.getWindowDimensions();
|
||||
const vw = J.Size.vault.width;
|
||||
const vw = isClosed ? 0 : J.Size.vault.width;
|
||||
const pageWidth = ww - width - vw;
|
||||
const ho = keyboard.isMainHistory() ? J.Size.history.panel : 0;
|
||||
const navigation = S.Common.getRef('navigation');
|
||||
|
@ -187,14 +212,7 @@ class Sidebar {
|
|||
return;
|
||||
};
|
||||
|
||||
const { width, isClosed } = v;
|
||||
const css: any = { width };
|
||||
|
||||
if (isClosed) {
|
||||
css.width = 0;
|
||||
};
|
||||
|
||||
this.obj.css(css);
|
||||
this.obj.css({ width: v.isClosed ? 0 : v.width });
|
||||
};
|
||||
|
||||
/**
|
||||
|
@ -209,6 +227,33 @@ class Sidebar {
|
|||
return Number($('#sidebarDummy').outerWidth()) || 0;
|
||||
};
|
||||
|
||||
vaultHide () {
|
||||
this.setVaultAnimationParam(this.data.width, true);
|
||||
|
||||
$(S.Common.getRef('vault').node).addClass('isClosed');
|
||||
};
|
||||
|
||||
vaultShow (width: number) {
|
||||
this.setVaultAnimationParam(width, false);
|
||||
|
||||
$(S.Common.getRef('vault').node).removeClass('isClosed');
|
||||
};
|
||||
|
||||
setVaultAnimationParam (width: number, withDelay: boolean) {
|
||||
const vault = $(S.Common.getRef('vault').node);
|
||||
const css: any = { transitionDuration: `${this.getVaultDuration(width)}ms`, transitionDelay: '' };
|
||||
|
||||
if (withDelay) {
|
||||
css.transitionDelay = `${J.Constant.delay.sidebar}ms`;
|
||||
};
|
||||
|
||||
vault.css(css);
|
||||
};
|
||||
|
||||
getVaultDuration (width: number): number {
|
||||
return J.Size.vault.width / width * J.Constant.delay.sidebar;
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
export const sidebar: Sidebar = new Sidebar();
|
|
@ -366,6 +366,11 @@ class UtilCommon {
|
|||
|
||||
formatNumber (v: number): string {
|
||||
v = Number(v) || 0;
|
||||
|
||||
const s = String(v || '');
|
||||
if (String(s).length < 6) {
|
||||
return s;
|
||||
};
|
||||
|
||||
let ret = String(v || '');
|
||||
let parts = new Intl.NumberFormat('en-GB', { maximumFractionDigits: 8 }).formatToParts(v);
|
||||
|
|
|
@ -937,14 +937,14 @@ class UtilData {
|
|||
};
|
||||
|
||||
C.MembershipGetStatus(true, (message: any) => {
|
||||
const { membership } = message;
|
||||
const membership = new M.Membership(message.membership);
|
||||
|
||||
if (membership) {
|
||||
const { status, tier } = membership;
|
||||
|
||||
S.Auth.membershipSet(membership);
|
||||
analytics.setTier(tier);
|
||||
|
||||
|
||||
if (status && (status == I.MembershipStatus.Finalization)) {
|
||||
S.Popup.open('membershipFinalization', { data: { tier } });
|
||||
};
|
||||
|
|
|
@ -12,7 +12,7 @@ class UtilGraph {
|
|||
};
|
||||
|
||||
case I.ObjectLayout.Task: {
|
||||
src = `img/icon/graph/task.svg`;
|
||||
src = `img/icon/graph/task${Number(d.done) || 0}.svg`;
|
||||
break;
|
||||
};
|
||||
|
||||
|
|
|
@ -832,6 +832,68 @@ class UtilMenu {
|
|||
];
|
||||
};
|
||||
|
||||
sortOrFilterRelationSelect (param: any) {
|
||||
const { rootId, blockId, getView, onSelect, menuParam } = param;
|
||||
const options = Relation.getFilterOptions(rootId, blockId, getView());
|
||||
|
||||
const callBack = (item: any) => {
|
||||
onSelect(item);
|
||||
S.Menu.close('select');
|
||||
};
|
||||
|
||||
const menu = Object.assign({
|
||||
horizontal: I.MenuDirection.Center,
|
||||
offsetY: 10,
|
||||
noFlipY: true,
|
||||
}, menuParam);
|
||||
|
||||
if (S.Menu.isOpen('select')) {
|
||||
S.Menu.close('select');
|
||||
};
|
||||
|
||||
S.Menu.open('select', {
|
||||
...menu,
|
||||
data: {
|
||||
options,
|
||||
withFilter: true,
|
||||
maxHeight: 378,
|
||||
onAdd: (menuId, menuWidth) => {
|
||||
this.sortOrFilterRelationAdd({ menuId, menuWidth }, param, (relation) => callBack(relation));
|
||||
},
|
||||
onSelect: (e: any, item: any) => callBack(item)
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
sortOrFilterRelationAdd (menuParam: any, param: any, callBack: (relation: any) => void) {
|
||||
const { rootId, blockId, getView } = param;
|
||||
const { menuId, menuWidth } = menuParam;
|
||||
const relations = Relation.getFilterOptions(rootId, blockId, getView());
|
||||
const element = `#${menuId} #item-add`;
|
||||
|
||||
S.Menu.open('relationSuggest', {
|
||||
element,
|
||||
offsetX: menuWidth,
|
||||
horizontal: I.MenuDirection.Right,
|
||||
vertical: I.MenuDirection.Center,
|
||||
onOpen: () => $(element).addClass('active'),
|
||||
onClose: () => $(element).removeClass('active'),
|
||||
data: {
|
||||
rootId,
|
||||
blockId,
|
||||
skipKeys: relations.map(it => it.id),
|
||||
ref: 'dataview',
|
||||
menuIdEdit: 'blockRelationEdit',
|
||||
addCommand: (rootId: string, blockId: string, relation: any, onChange: (message: any) => void) => {
|
||||
Dataview.relationAdd(rootId, blockId, relation.relationKey, relations.length, getView(), (message: any) => {
|
||||
callBack(relation);
|
||||
S.Menu.close('relationSuggest');
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
export default new UtilMenu();
|
||||
export default new UtilMenu();
|
||||
|
|
|
@ -151,7 +151,7 @@ class UtilRouter {
|
|||
this.go('/main/blank', {
|
||||
replace: true,
|
||||
animate: true,
|
||||
delay: 250,
|
||||
delay: 300,
|
||||
onFadeOut: () => {
|
||||
S.Record.metaClear(J.Constant.subId.participant, '');
|
||||
S.Record.recordsClear(J.Constant.subId.participant, '');
|
||||
|
|
|
@ -75,7 +75,7 @@ class AuthStore {
|
|||
};
|
||||
|
||||
membershipSet (v: I.Membership) {
|
||||
this.membershipData = new M.Membership(v);
|
||||
this.membershipData = v;
|
||||
};
|
||||
|
||||
membershipUpdate (v: I.Membership) {
|
||||
|
|