mirror of
https://github.com/anyproto/anytype-ts.git
synced 2025-06-09 17:45:02 +09:00
JS-3408: update icons + refactoring
This commit is contained in:
Andrew Simachev
parent
e69f1f7141
commit
44d9b6cafa
30 changed files with 119 additions and 144 deletions
4
dist/img/icon/relation/big/select.svg
vendored
Normal file
4
dist/img/icon/relation/big/select.svg
vendored
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M14 25.5C20.3513 25.5 25.5 20.3513 25.5 14C25.5 7.64873 20.3513 2.5 14 2.5C7.64873 2.5 2.5 7.64873 2.5 14C2.5 20.3513 7.64873 25.5 14 25.5ZM14 27C21.1797 27 27 21.1797 27 14C27 6.8203 21.1797 1 14 1C6.8203 1 1 6.8203 1 14C1 21.1797 6.8203 27 14 27Z" fill="#B6B6B6"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.46967 12.2197C8.76256 11.9268 9.23744 11.9268 9.53033 12.2197L14 16.6893L18.4697 12.2197C18.7626 11.9268 19.2374 11.9268 19.5303 12.2197C19.8232 12.5126 19.8232 12.9874 19.5303 13.2803L14 18.8107L8.46967 13.2803C8.17678 12.9874 8.17678 12.5126 8.46967 12.2197Z" fill="#B6B6B6"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 749 B |
5
dist/img/icon/relation/big/status.svg
vendored
5
dist/img/icon/relation/big/status.svg
vendored
|
|
@ -1,5 +0,0 @@
|
|||
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M23.5 22V6C23.5 5.17157 22.8284 4.5 22 4.5C21.1716 4.5 20.5 5.17157 20.5 6V22C20.5 22.8284 21.1716 23.5 22 23.5C22.8284 23.5 23.5 22.8284 23.5 22ZM22 3C20.3431 3 19 4.34315 19 6V22C19 23.6569 20.3431 25 22 25C23.6569 25 25 23.6569 25 22V6C25 4.34315 23.6569 3 22 3Z" fill="#b6b6b6"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.5 22V12C15.5 11.1716 14.8284 10.5 14 10.5C13.1716 10.5 12.5 11.1716 12.5 12V22C12.5 22.8284 13.1716 23.5 14 23.5C14.8284 23.5 15.5 22.8284 15.5 22ZM14 9C12.3431 9 11 10.3431 11 12V22C11 23.6569 12.3431 25 14 25C15.6569 25 17 23.6569 17 22V12C17 10.3431 15.6569 9 14 9Z" fill="#b6b6b6"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.5 22V18C7.5 17.1716 6.82843 16.5 6 16.5C5.17157 16.5 4.5 17.1716 4.5 18V22C4.5 22.8284 5.17157 23.5 6 23.5C6.82843 23.5 7.5 22.8284 7.5 22ZM6 15C4.34315 15 3 16.3431 3 18V22C3 23.6569 4.34315 25 6 25C7.65685 25 9 23.6569 9 22V18C9 16.3431 7.65685 15 6 15Z" fill="#b6b6b6"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.1 KiB |
12
dist/img/icon/relation/small/multiselect.svg
vendored
12
dist/img/icon/relation/small/multiselect.svg
vendored
|
|
@ -1,8 +1,8 @@
|
|||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="9" height="1.5" transform="matrix(-1 0 0 1 12 4.29956)" fill="#b6b6b6"/>
|
||||
<rect width="9" height="1.5" transform="matrix(-1 0 0 1 12 14.2996)" fill="#b6b6b6"/>
|
||||
<rect width="9" height="1.5" transform="matrix(-1 0 0 1 12 9.29956)" fill="#b6b6b6"/>
|
||||
<circle cx="15.5" cy="5.04956" r="1.5" fill="#b6b6b6"/>
|
||||
<circle cx="15.5459" cy="10.0496" r="1.5" fill="#b6b6b6"/>
|
||||
<circle cx="15.5" cy="15.0496" r="1.5" fill="#b6b6b6"/>
|
||||
<path d="M3 4.25H12V5.74828H3V4.25Z" fill="#B6B6B6"/>
|
||||
<path d="M3 9.25H12V10.7483H3V9.25Z" fill="#B6B6B6"/>
|
||||
<path d="M3 14.25H12V15.7483H3V14.25Z" fill="#B6B6B6"/>
|
||||
<circle cx="15.5" cy="4.99915" r="1.5" fill="#B6B6B6"/>
|
||||
<circle cx="15.5" cy="9.99915" r="1.5" fill="#B6B6B6"/>
|
||||
<circle cx="15.5" cy="14.9991" r="1.5" fill="#B6B6B6"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 531 B After Width: | Height: | Size: 434 B |
4
dist/img/icon/relation/small/select.svg
vendored
Normal file
4
dist/img/icon/relation/small/select.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">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M3.5 10C3.5 13.5899 6.41015 16.5 10 16.5C13.5899 16.5 16.5 13.5899 16.5 10C16.5 6.41015 13.5899 3.5 10 3.5C6.41015 3.5 3.5 6.41015 3.5 10ZM10 2C5.58172 2 2 5.58172 2 10C2 14.4183 5.58172 18 10 18C14.4183 18 18 14.4183 18 10C18 5.58172 14.4183 2 10 2Z" fill="#B6B6B6"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.47225 8.4671C6.76657 8.17563 7.24143 8.17794 7.5329 8.47225L9.97612 10.9393L12.4722 8.46712C12.7665 8.17564 13.2414 8.17793 13.5329 8.47223C13.8244 8.76653 13.8221 9.2414 13.5278 9.53288L9.96586 13.0607L6.4671 9.52775C6.17563 9.23343 6.17794 8.75857 6.47225 8.4671Z" fill="#B6B6B6"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 756 B |
5
dist/img/icon/relation/small/status.svg
vendored
5
dist/img/icon/relation/small/status.svg
vendored
|
|
@ -1,5 +0,0 @@
|
|||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.5 15V11C5.5 10.7239 5.27614 10.5 5 10.5C4.72386 10.5 4.5 10.7239 4.5 11V15C4.5 15.2761 4.72386 15.5 5 15.5C5.27614 15.5 5.5 15.2761 5.5 15ZM5 9C3.89543 9 3 9.89543 3 11V15C3 16.1046 3.89543 17 5 17C6.10457 17 7 16.1046 7 15V11C7 9.89543 6.10457 9 5 9Z" fill="#b6b6b6"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.5 15V8C10.5 7.72386 10.2761 7.5 10 7.5C9.72386 7.5 9.5 7.72386 9.5 8V15C9.5 15.2761 9.72386 15.5 10 15.5C10.2761 15.5 10.5 15.2761 10.5 15ZM10 6C8.89543 6 8 6.89543 8 8V15C8 16.1046 8.89543 17 10 17C11.1046 17 12 16.1046 12 15V8C12 6.89543 11.1046 6 10 6Z" fill="#b6b6b6"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.5 15V5C15.5 4.72386 15.2761 4.5 15 4.5C14.7239 4.5 14.5 4.72386 14.5 5V15C14.5 15.2761 14.7239 15.5 15 15.5C15.2761 15.5 15.5 15.2761 15.5 15ZM15 3C13.8954 3 13 3.89543 13 5V15C13 16.1046 13.8954 17 15 17C16.1046 17 17 16.1046 17 15V5C17 3.89543 16.1046 3 15 3Z" fill="#b6b6b6"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.1 KiB |
4
dist/img/icon/relation/small/tag.svg
vendored
4
dist/img/icon/relation/small/tag.svg
vendored
|
|
@ -1,4 +0,0 @@
|
|||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.6214 3.49995L3.62134 10.5L9.49999 16.3786L16.5 9.37824L16.5 6.12125L13.8787 3.4996L10.6214 3.49995ZM2.56068 9.43933C1.97489 10.0251 1.97489 10.9749 2.56068 11.5607L8.43933 17.4393C9.02513 18.0251 9.9749 18.0251 10.5607 17.4393L17.5607 10.4389C17.842 10.1576 18 9.77605 18 9.37824L18 6.12125C18 5.72346 17.842 5.34196 17.5607 5.06067L14.9394 2.43902C14.6581 2.15763 14.2765 1.99956 13.8785 1.9996L10.6212 1.99995C10.2234 2 9.84198 2.15803 9.56072 2.43929L2.56068 9.43933Z" fill="#b6b6b6"/>
|
||||
<circle cx="13" cy="7" r="1.5" fill="#b6b6b6"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 693 B |
|
|
@ -224,7 +224,7 @@
|
|||
"relationName0": "Text",
|
||||
"relationName1": "Short text",
|
||||
"relationName2": "Number",
|
||||
"relationName3": "Status",
|
||||
"relationName3": "Select",
|
||||
"relationName4": "Date",
|
||||
"relationName5": "File & Media",
|
||||
"relationName6": "Checkbox",
|
||||
|
|
@ -232,7 +232,7 @@
|
|||
"relationName8": "Email",
|
||||
"relationName9": "Phone",
|
||||
"relationName10": "Icon",
|
||||
"relationName11": "Tag",
|
||||
"relationName11": "Multi-select",
|
||||
"relationName100": "Object",
|
||||
"relationName101": "Relations",
|
||||
"relationCheckboxLabel0": "%s is unchecked",
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@
|
|||
.icon.clear:hover { background-image: url('~img/icon/clear1.svg'); }
|
||||
}
|
||||
|
||||
.cell.isEditing.c-select.isStatus {
|
||||
.cell.isEditing.c-select.isSelect {
|
||||
.icon.clear { display: block; }
|
||||
.over { display: inline-block; vertical-align: top; font-size: 0px; width: calc(100% - 30px); }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -59,7 +59,7 @@
|
|||
.placeholder { padding: 6px 8px }
|
||||
#entry { margin-top: 4px; }
|
||||
}
|
||||
.cell.isEditing.c-select.isStatus {
|
||||
.cell.isEditing.c-select.isSelect {
|
||||
.over { width: calc(100% - 26px); }
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -150,31 +150,31 @@ search.active { background: orange !important; }
|
|||
.bgColor-teal { background: #d6f5f3 !important; }
|
||||
.bgColor-lime { background: #e3f7d0 !important; }
|
||||
|
||||
.isTag.archive { color: $colorTextSecondary; background: $colorShapeTertiary; }
|
||||
.isTag.tagColor-default { color: $colorTextPrimary !important; background: $colorBgPrimary !important; box-shadow: 0px 0px 0px 1px $colorShapeSecondary inset; }
|
||||
.isTag.tagColor-grey { color: #8c9ea5 !important; background: #ebeff1 !important; }
|
||||
.isTag.tagColor-yellow { color: #b2a616 !important; background: #fbf5b8 !important; }
|
||||
.isTag.tagColor-orange { color: #d3720d !important; background: #ffEcc8 !important; }
|
||||
.isTag.tagColor-red { color: #e2400c !important; background: #ffe5de !important; }
|
||||
.isTag.tagColor-pink { color: #ca1b8e !important; background: #fddcf2 !important; }
|
||||
.isTag.tagColor-purple { color: #9e30c4 !important; background: #f1dbf8 !important; }
|
||||
.isTag.tagColor-blue { color: $colorBlue !important; background: #dce1fb !important; }
|
||||
.isTag.tagColor-ice { color: #1c8bca !important; background: #cfedfe !important; }
|
||||
.isTag.tagColor-teal { color: #0caaa3 !important; background: #d4f5f3 !important; }
|
||||
.isTag.tagColor-lime { color: #64b90f !important; background: #e3f7d0 !important; }
|
||||
.isMultiSelect.archive { color: $colorTextSecondary; background: $colorShapeTertiary; }
|
||||
.isMultiSelect.tagColor-default { color: $colorTextPrimary !important; background: $colorBgPrimary !important; box-shadow: 0px 0px 0px 1px $colorShapeSecondary inset; }
|
||||
.isMultiSelect.tagColor-grey { color: #8c9ea5 !important; background: #ebeff1 !important; }
|
||||
.isMultiSelect.tagColor-yellow { color: #b2a616 !important; background: #fbf5b8 !important; }
|
||||
.isMultiSelect.tagColor-orange { color: #d3720d !important; background: #ffEcc8 !important; }
|
||||
.isMultiSelect.tagColor-red { color: #e2400c !important; background: #ffe5de !important; }
|
||||
.isMultiSelect.tagColor-pink { color: #ca1b8e !important; background: #fddcf2 !important; }
|
||||
.isMultiSelect.tagColor-purple { color: #9e30c4 !important; background: #f1dbf8 !important; }
|
||||
.isMultiSelect.tagColor-blue { color: $colorBlue !important; background: #dce1fb !important; }
|
||||
.isMultiSelect.tagColor-ice { color: #1c8bca !important; background: #cfedfe !important; }
|
||||
.isMultiSelect.tagColor-teal { color: #0caaa3 !important; background: #d4f5f3 !important; }
|
||||
.isMultiSelect.tagColor-lime { color: #64b90f !important; background: #e3f7d0 !important; }
|
||||
|
||||
.isStatus.tagColor-default { color: $colorTextPrimary !important; }
|
||||
.isStatus.tagColor-black { color: $colorTextPrimary !important; }
|
||||
.isStatus.tagColor-grey { color: $colorControlActive !important; }
|
||||
.isStatus.tagColor-yellow { color: $colorYellow !important; }
|
||||
.isStatus.tagColor-orange { color: $colorOrange !important; }
|
||||
.isStatus.tagColor-red { color: $colorRed !important; }
|
||||
.isStatus.tagColor-pink { color: $colorPink !important; }
|
||||
.isStatus.tagColor-purple { color: $colorPurple !important; }
|
||||
.isStatus.tagColor-blue { color: $colorBlue !important; }
|
||||
.isStatus.tagColor-ice { color: $colorIce !important; }
|
||||
.isStatus.tagColor-teal { color: $colorTeal !important; }
|
||||
.isStatus.tagColor-lime { color: $colorLime !important; }
|
||||
.isSelect.tagColor-default { color: $colorTextPrimary !important; }
|
||||
.isSelect.tagColor-black { color: $colorTextPrimary !important; }
|
||||
.isSelect.tagColor-grey { color: $colorControlActive !important; }
|
||||
.isSelect.tagColor-yellow { color: $colorYellow !important; }
|
||||
.isSelect.tagColor-orange { color: $colorOrange !important; }
|
||||
.isSelect.tagColor-red { color: $colorRed !important; }
|
||||
.isSelect.tagColor-pink { color: $colorPink !important; }
|
||||
.isSelect.tagColor-purple { color: $colorPurple !important; }
|
||||
.isSelect.tagColor-blue { color: $colorBlue !important; }
|
||||
.isSelect.tagColor-ice { color: $colorIce !important; }
|
||||
.isSelect.tagColor-teal { color: $colorTeal !important; }
|
||||
.isSelect.tagColor-lime { color: $colorLime !important; }
|
||||
|
||||
.brokenMedia {
|
||||
@include text-common; position: relative; width: 100%; line-height: 20px; padding: 11px 13px; border-radius: 6px; border: solid 1px $colorShapeSecondary;
|
||||
|
|
|
|||
|
|
@ -23,8 +23,8 @@
|
|||
.icon.relation.c-shortText { background-image: url('~img/icon/relation/small/shortText.svg'); }
|
||||
.icon.relation.c-number { background-image: url('~img/icon/relation/small/number.svg'); }
|
||||
.icon.relation.c-date { background-image: url('~img/icon/relation/small/date.svg'); }
|
||||
.icon.relation.c-select.isTag { background-image: url('~img/icon/relation/small/tag.svg'); }
|
||||
.icon.relation.c-select.isStatus { background-image: url('~img/icon/relation/small/status.svg'); }
|
||||
.icon.relation.c-select.isMultiSelect { background-image: url('~img/icon/relation/small/multiSelect.svg'); }
|
||||
.icon.relation.c-select.isSelect { background-image: url('~img/icon/relation/small/select.svg'); }
|
||||
.icon.relation.c-object { background-image: url('~img/icon/relation/small/object.svg'); }
|
||||
.icon.relation.c-file { background-image: url('~img/icon/relation/small/file.svg'); }
|
||||
.icon.relation.c-checkbox { background-image: url('~img/icon/relation/small/checkbox.svg'); }
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
}
|
||||
}
|
||||
.tagItem.canEdit { padding-right: 18px; }
|
||||
.tagItem.isStatus { padding: 0px; @include text-common; line-height: 18px; box-shadow: 0px 0px !important; }
|
||||
.tagItem.isStatus {
|
||||
.tagItem.isSelect { padding: 0px; @include text-common; line-height: 18px; box-shadow: 0px 0px !important; }
|
||||
.tagItem.isSelect {
|
||||
.tagRemove { display: none; }
|
||||
}
|
||||
|
|
@ -117,7 +117,7 @@
|
|||
.cellContent { padding: 5px 8px; }
|
||||
.placeholder { padding: 5px 8px; }
|
||||
}
|
||||
.cell.isEditing.c-select.isStatus {
|
||||
.cell.isEditing.c-select.isSelect {
|
||||
.over { width: calc(100% - 26px); }
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -39,20 +39,20 @@ html.themeDark {
|
|||
.bgColor-teal { background: rgba(15, 200, 186, 0.25) !important; }
|
||||
.bgColor-lime { background: rgba(93, 212, 0, 0.25) !important; }
|
||||
|
||||
.isTag.archive { background-color: $colorShapeHighlightMedium; color: $colorTextSecondary; }
|
||||
.isTag.tagColor-default { color: $colorTextPrimary !important; background: unset !important; box-shadow: 0px 0px 0px 1px $colorShapePrimary inset; }
|
||||
.isTag.tagColor-grey { color: #8c9ea5 !important; background: rgba(140, 158, 165, 0.25) !important; }
|
||||
.isTag.tagColor-yellow { color: $colorYellow !important; background: rgba(236, 217, 27, 0.25) !important; }
|
||||
.isTag.tagColor-orange { color: $colorOrange !important; background: rgba(255, 181, 34, 0.25) !important; }
|
||||
.isTag.tagColor-red { color: $colorRed !important; background: rgba(245, 85, 34, 0.25) !important; }
|
||||
.isTag.tagColor-pink { color: $colorPink !important; background: rgba(229, 28, 160, 0.25) !important; }
|
||||
.isTag.tagColor-purple { color: $colorPurple !important; background: rgba(171, 80, 204, 0.25) !important; }
|
||||
.isTag.tagColor-blue { color: $colorBlue !important; background: rgba(62, 88, 235, 0.25) !important; }
|
||||
.isTag.tagColor-ice { color: $colorIce !important; background: rgba(42, 167, 238, 0.25) !important; }
|
||||
.isTag.tagColor-teal { color: $colorTeal !important; background: rgba(15, 200, 186, 0.25) !important; }
|
||||
.isTag.tagColor-lime { color: $colorLime !important; background: rgba(93, 212, 0, 0.25) !important; }
|
||||
.isMultiSelect.archive { background-color: $colorShapeHighlightMedium; color: $colorTextSecondary; }
|
||||
.isMultiSelect.tagColor-default { color: $colorTextPrimary !important; background: unset !important; box-shadow: 0px 0px 0px 1px $colorShapePrimary inset; }
|
||||
.isMultiSelect.tagColor-grey { color: #8c9ea5 !important; background: rgba(140, 158, 165, 0.25) !important; }
|
||||
.isMultiSelect.tagColor-yellow { color: $colorYellow !important; background: rgba(236, 217, 27, 0.25) !important; }
|
||||
.isMultiSelect.tagColor-orange { color: $colorOrange !important; background: rgba(255, 181, 34, 0.25) !important; }
|
||||
.isMultiSelect.tagColor-red { color: $colorRed !important; background: rgba(245, 85, 34, 0.25) !important; }
|
||||
.isMultiSelect.tagColor-pink { color: $colorPink !important; background: rgba(229, 28, 160, 0.25) !important; }
|
||||
.isMultiSelect.tagColor-purple { color: $colorPurple !important; background: rgba(171, 80, 204, 0.25) !important; }
|
||||
.isMultiSelect.tagColor-blue { color: $colorBlue !important; background: rgba(62, 88, 235, 0.25) !important; }
|
||||
.isMultiSelect.tagColor-ice { color: $colorIce !important; background: rgba(42, 167, 238, 0.25) !important; }
|
||||
.isMultiSelect.tagColor-teal { color: $colorTeal !important; background: rgba(15, 200, 186, 0.25) !important; }
|
||||
.isMultiSelect.tagColor-lime { color: $colorLime !important; background: rgba(93, 212, 0, 0.25) !important; }
|
||||
|
||||
.isStatus.tagColor-default { color: $colorTextPrimary !important; }
|
||||
.isSelect.tagColor-default { color: $colorTextPrimary !important; }
|
||||
|
||||
.selectable.isSelectionSelected::after,
|
||||
.block.isSelectionSelected > .wrapContent > .selectable::after
|
||||
|
|
|
|||
|
|
@ -87,7 +87,7 @@ const BlockBookmark = observer(class BlockBookmark extends React.Component<I.Blo
|
|||
};
|
||||
|
||||
if (isArchived) {
|
||||
archive = <div className="tagItem isTag archive">{translate('blockLinkArchived')}</div>;
|
||||
archive = <div className="tagItem isMultiSelect archive">{translate('blockLinkArchived')}</div>;
|
||||
};
|
||||
|
||||
element = (
|
||||
|
|
|
|||
|
|
@ -71,8 +71,8 @@ const Cell = observer(class Cell extends React.Component<Props> {
|
|||
CellComponent = CellText;
|
||||
break;
|
||||
|
||||
case I.RelationType.Status:
|
||||
case I.RelationType.Tag:
|
||||
case I.RelationType.Select:
|
||||
case I.RelationType.MultiSelect:
|
||||
CellComponent = CellSelect;
|
||||
break;
|
||||
|
||||
|
|
@ -274,8 +274,8 @@ const Cell = observer(class Cell extends React.Component<Props> {
|
|||
break;
|
||||
};
|
||||
|
||||
case I.RelationType.Status:
|
||||
case I.RelationType.Tag: {
|
||||
case I.RelationType.Select:
|
||||
case I.RelationType.MultiSelect: {
|
||||
param = Object.assign(param, {
|
||||
width: width,
|
||||
commonFilter: true,
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ const CellSelect = observer(class CellSelect extends React.Component<I.Cell, Sta
|
|||
const { relation, getRecord, recordId, elementMapper, arrayLimit } = this.props;
|
||||
const { isEditing } = this.state;
|
||||
const record = getRecord(recordId);
|
||||
const isStatus = relation.format == I.RelationType.Status;
|
||||
const isSelect = relation.format == I.RelationType.Select;
|
||||
const cn = [ 'wrap' ];
|
||||
|
||||
if (!relation || !record) {
|
||||
|
|
@ -66,7 +66,7 @@ const CellSelect = observer(class CellSelect extends React.Component<I.Cell, Sta
|
|||
if (isEditing) {
|
||||
const cni = [ 'itemWrap' ];
|
||||
|
||||
if (!isStatus) {
|
||||
if (!isSelect) {
|
||||
cni.push('isDraggable');
|
||||
};
|
||||
|
||||
|
|
@ -81,7 +81,7 @@ const CellSelect = observer(class CellSelect extends React.Component<I.Cell, Sta
|
|||
key={i}
|
||||
id={`item-${item.id}`}
|
||||
className={cni.join(' ')}
|
||||
draggable={!isStatus}
|
||||
draggable={!isSelect}
|
||||
onContextMenu={e => this.onContextMenu(e, item)}
|
||||
{...UtilCommon.dataProps({ id: item.id, index: i })}
|
||||
>
|
||||
|
|
@ -89,7 +89,7 @@ const CellSelect = observer(class CellSelect extends React.Component<I.Cell, Sta
|
|||
key={item.id}
|
||||
text={item.name}
|
||||
color={item.color}
|
||||
canEdit={!isStatus}
|
||||
canEdit={!isSelect}
|
||||
className={Relation.selectClassName(relation.format)}
|
||||
onRemove={() => { this.onValueRemove(item.id); }}
|
||||
/>
|
||||
|
|
@ -113,7 +113,7 @@ const CellSelect = observer(class CellSelect extends React.Component<I.Cell, Sta
|
|||
{'\n'}
|
||||
</span>
|
||||
|
||||
{isStatus ? <Icon className="clear" onMouseDown={this.onClear} /> : ''}
|
||||
{isSelect ? <Icon className="clear" onMouseDown={this.onClear} /> : ''}
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
|
|
|
|||
|
|
@ -153,7 +153,7 @@ const ViewBoard = observer(class ViewBoard extends React.Component<I.ViewCompone
|
|||
let option: any = null;
|
||||
|
||||
switch (relation.format) {
|
||||
case I.RelationType.Tag:
|
||||
case I.RelationType.MultiSelect:
|
||||
value = Relation.getArrayValue(value);
|
||||
if (value.length) {
|
||||
option = detailStore.get(Constant.subId.option, value[0]);
|
||||
|
|
@ -161,7 +161,7 @@ const ViewBoard = observer(class ViewBoard extends React.Component<I.ViewCompone
|
|||
};
|
||||
break;
|
||||
|
||||
case I.RelationType.Status:
|
||||
case I.RelationType.Select:
|
||||
option = detailStore.get(Constant.subId.option, value);
|
||||
bgColor = option?.color;
|
||||
break;
|
||||
|
|
|
|||
|
|
@ -167,12 +167,12 @@ const Column = observer(class Column extends React.Component<Props> {
|
|||
filter.value = value;
|
||||
break;
|
||||
|
||||
case I.RelationType.Status:
|
||||
case I.RelationType.Select:
|
||||
filter.condition = value ? I.FilterCondition.Equal : I.FilterCondition.Empty;
|
||||
filter.value = value ? value : null;
|
||||
break;
|
||||
|
||||
case I.RelationType.Tag:
|
||||
case I.RelationType.MultiSelect:
|
||||
value = Relation.getArrayValue(value);
|
||||
filter.condition = value.length ? I.FilterCondition.ExactIn : I.FilterCondition.Empty;
|
||||
filter.value = value.length ? value : null;
|
||||
|
|
|
|||
|
|
@ -722,8 +722,8 @@ const BlockFeatured = observer(class BlockFeatured extends React.Component<Props
|
|||
item.name = UtilCommon.shorten(item.name);
|
||||
break;
|
||||
|
||||
case I.RelationType.Tag:
|
||||
case I.RelationType.Status:
|
||||
case I.RelationType.MultiSelect:
|
||||
case I.RelationType.Select:
|
||||
item.text = UtilCommon.shorten(item.text);
|
||||
break;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -99,7 +99,7 @@ const BlockLink = observer(class BlockLink extends React.Component<I.BlockCompon
|
|||
};
|
||||
|
||||
if (isArchived) {
|
||||
archive = <div className="tagItem isTag archive">{translate('blockLinkArchived')}</div>;
|
||||
archive = <div className="tagItem isMultiSelect archive">{translate('blockLinkArchived')}</div>;
|
||||
};
|
||||
|
||||
if (cardStyle == I.LinkCardStyle.Text) {
|
||||
|
|
|
|||
|
|
@ -94,8 +94,8 @@ const MenuDataviewFilterValues = observer(class MenuDataviewFilterValues extends
|
|||
|
||||
switch (relation.format) {
|
||||
|
||||
case I.RelationType.Tag:
|
||||
case I.RelationType.Status: {
|
||||
case I.RelationType.MultiSelect:
|
||||
case I.RelationType.Select: {
|
||||
Item = (element: any) => {
|
||||
return (
|
||||
<div
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ const MenuGroupEdit = observer(class MenuGroupEdit extends React.Component<I.Men
|
|||
<div className="items">
|
||||
{item.children.map((action: any, i: number) => {
|
||||
if (action.isBgColor) {
|
||||
action.inner = <div className={`inner isTag bgColor bgColor-${action.className}`} />;
|
||||
action.inner = <div className={`inner isMultiSelect bgColor bgColor-${action.className}`} />;
|
||||
action.icon = 'color';
|
||||
action.checkbox = action.value == this.color;
|
||||
};
|
||||
|
|
@ -149,7 +149,7 @@ const MenuGroupEdit = observer(class MenuGroupEdit extends React.Component<I.Men
|
|||
C.BlockDataviewViewUpdate(rootId, blockId, view.id, { ...view, groupBackgroundColors: true });
|
||||
};
|
||||
|
||||
if ([ I.RelationType.Tag, I.RelationType.Status ].includes(relation.format)) {
|
||||
if ([ I.RelationType.MultiSelect, I.RelationType.Select ].includes(relation.format)) {
|
||||
const group = groups.find(it => it.id == groupId);
|
||||
const value = Relation.getArrayValue(group.value);
|
||||
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ const MenuOptionEdit = observer(class MenuOptionEdit extends React.Component<I.M
|
|||
<div className="items">
|
||||
{item.children.map((action: any, i: number) => {
|
||||
if (action.isBgColor) {
|
||||
action.inner = <div className={`inner isTag textColor textColor-${action.className}`} />;
|
||||
action.inner = <div className={`inner isMultiSelect textColor textColor-${action.className}`} />;
|
||||
action.icon = 'color';
|
||||
action.checkbox = action.value == this.color;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -319,7 +319,7 @@ const MenuOptionList = observer(class MenuOptionList extends React.Component<I.M
|
|||
const { data } = param;
|
||||
const { canAdd, filterMapper } = data;
|
||||
const relation = data.relation.get();
|
||||
const isStatus = relation.format == I.RelationType.Status;
|
||||
const isSelect = relation.format == I.RelationType.Select;
|
||||
const value = Relation.getArrayValue(data.value);
|
||||
|
||||
let items = Relation.getOptions(dbStore.getRecords(Constant.subId.option, '')).filter(it => it.relationKey == relation.relationKey);
|
||||
|
|
@ -338,7 +338,7 @@ const MenuOptionList = observer(class MenuOptionList extends React.Component<I.M
|
|||
|
||||
if (canAdd && !check.length) {
|
||||
let addItemNameKey = 'menuDataviewOptionListCreateOption';
|
||||
if (isStatus) {
|
||||
if (isSelect) {
|
||||
addItemNameKey = 'menuDataviewOptionListSetStatus';
|
||||
};
|
||||
ret.unshift({ id: 'add', name: UtilCommon.sprintf(translate(addItemNameKey), data.filter) });
|
||||
|
|
|
|||
|
|
@ -83,8 +83,8 @@ const MenuItemFilter = observer(class MenuItemFilter extends React.Component<Pro
|
|||
break;
|
||||
};
|
||||
|
||||
case I.RelationType.Tag:
|
||||
case I.RelationType.Status: {
|
||||
case I.RelationType.MultiSelect:
|
||||
case I.RelationType.Select: {
|
||||
list = Relation.getOptions(value);
|
||||
|
||||
if (list.length) {
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import * as React from 'react';
|
|||
import $ from 'jquery';
|
||||
import { observer } from 'mobx-react';
|
||||
import { IconEmoji } from 'Component';
|
||||
import { I, Preview, UtilSmile, UtilData, UtilFile, UtilObject } from 'Lib';
|
||||
import { I, Preview, UtilSmile, UtilData, UtilFile, UtilObject, UtilCommon } from 'Lib';
|
||||
import { commonStore, menuStore } from 'Store';
|
||||
import Colors from 'json/colors.json';
|
||||
|
||||
|
|
@ -89,44 +89,25 @@ const FontSize = {
|
|||
128: 72,
|
||||
};
|
||||
|
||||
const File = {
|
||||
other: require('img/icon/file/other.svg').default,
|
||||
image: require('img/icon/file/image.svg').default,
|
||||
video: require('img/icon/file/video.svg').default,
|
||||
text: require('img/icon/file/text.svg').default,
|
||||
archive: require('img/icon/file/archive.svg').default,
|
||||
audio: require('img/icon/file/audio.svg').default,
|
||||
pdf: require('img/icon/file/pdf.svg').default,
|
||||
presentation: require('img/icon/file/presentation.svg').default,
|
||||
table: require('img/icon/file/table.svg').default,
|
||||
const File = {};
|
||||
const Relation: any = { small: {}, big: {} };
|
||||
|
||||
for (const key of [ 'other', 'image', 'video', 'text', 'archive', 'audio', 'pdf', 'presentation', 'table' ]) {
|
||||
File[key] = require(`img/icon/file/${key}.svg`).default;
|
||||
};
|
||||
|
||||
const Relation: any = { small: {}, big: {} };
|
||||
Relation.small[I.RelationType.LongText] = require('img/icon/relation/small/longText.svg').default;
|
||||
Relation.small[I.RelationType.ShortText] = require('img/icon/relation/small/shortText.svg').default;
|
||||
Relation.small[I.RelationType.Number] = require('img/icon/relation/small/number.svg').default;
|
||||
Relation.small[I.RelationType.Status] = require('img/icon/relation/small/status.svg').default;
|
||||
Relation.small[I.RelationType.Date] = require('img/icon/relation/small/date.svg').default;
|
||||
Relation.small[I.RelationType.File] = require('img/icon/relation/small/file.svg').default;
|
||||
Relation.small[I.RelationType.Checkbox] = require('img/icon/relation/small/checkbox.svg').default;
|
||||
Relation.small[I.RelationType.Url] = require('img/icon/relation/small/url.svg').default;
|
||||
Relation.small[I.RelationType.Email] = require('img/icon/relation/small/email.svg').default;
|
||||
Relation.small[I.RelationType.Phone] = require('img/icon/relation/small/phone.svg').default;
|
||||
Relation.small[I.RelationType.Tag] = require('img/icon/relation/small/tag.svg').default;
|
||||
Relation.small[I.RelationType.Object] = require('img/icon/relation/small/object.svg').default;
|
||||
for (let i in I.RelationType) {
|
||||
const it = Number(i);
|
||||
|
||||
Relation.big[I.RelationType.LongText] = require('img/icon/relation/big/longText.svg').default;
|
||||
Relation.big[I.RelationType.ShortText] = require('img/icon/relation/big/shortText.svg').default;
|
||||
Relation.big[I.RelationType.Number] = require('img/icon/relation/big/number.svg').default;
|
||||
Relation.big[I.RelationType.Status] = require('img/icon/relation/big/status.svg').default;
|
||||
Relation.big[I.RelationType.Date] = require('img/icon/relation/big/date.svg').default;
|
||||
Relation.big[I.RelationType.File] = require('img/icon/relation/big/file.svg').default;
|
||||
Relation.big[I.RelationType.Checkbox] = require('img/icon/relation/big/checkbox.svg').default;
|
||||
Relation.big[I.RelationType.Url] = require('img/icon/relation/big/url.svg').default;
|
||||
Relation.big[I.RelationType.Email] = require('img/icon/relation/big/email.svg').default;
|
||||
Relation.big[I.RelationType.Phone] = require('img/icon/relation/big/phone.svg').default;
|
||||
Relation.big[I.RelationType.Tag] = require('img/icon/relation/big/tag.svg').default;
|
||||
Relation.big[I.RelationType.Object] = require('img/icon/relation/big/object.svg').default;
|
||||
if (isNaN(Number(it)) || [ I.RelationType.Icon, I.RelationType.Relations ].includes(it)) {
|
||||
continue;
|
||||
};
|
||||
|
||||
const key = UtilCommon.toCamelCase(I.RelationType[i]);
|
||||
|
||||
Relation.small[i] = require(`img/icon/relation/small/${key}.svg`).default;
|
||||
Relation.big[i] = require(`img/icon/relation/big/${key}.svg`).default;
|
||||
};
|
||||
|
||||
const Ghost = require('img/icon/ghost.svg').default;
|
||||
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ export enum RelationType {
|
|||
LongText = 0,
|
||||
ShortText = 1,
|
||||
Number = 2,
|
||||
Status = 3,
|
||||
Select = 3,
|
||||
Date = 4,
|
||||
File = 5,
|
||||
Checkbox = 6,
|
||||
|
|
@ -42,7 +42,7 @@ export enum RelationType {
|
|||
Email = 8,
|
||||
Phone = 9,
|
||||
Icon = 10,
|
||||
Tag = 11,
|
||||
MultiSelect = 11,
|
||||
Object = 100,
|
||||
Relations = 101,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ class Relation {
|
|||
|
||||
public className (v: I.RelationType): string {
|
||||
let c = this.typeName(v);
|
||||
if ([ I.RelationType.Status, I.RelationType.Tag ].indexOf(v) >= 0) {
|
||||
if ([ I.RelationType.Select, I.RelationType.MultiSelect ].indexOf(v) >= 0) {
|
||||
c = 'select ' + this.selectClassName(v);
|
||||
};
|
||||
return 'c-' + c;
|
||||
|
|
@ -51,8 +51,8 @@ class Relation {
|
|||
break;
|
||||
|
||||
case I.RelationType.Object:
|
||||
case I.RelationType.Status:
|
||||
case I.RelationType.Tag:
|
||||
case I.RelationType.Select:
|
||||
case I.RelationType.MultiSelect:
|
||||
ret = ret.concat([
|
||||
{ id: I.FilterCondition.In, name: translate('filterConditionInArray') },
|
||||
{ id: I.FilterCondition.AllIn, name: translate('filterConditionAllIn') },
|
||||
|
|
@ -212,9 +212,9 @@ class Relation {
|
|||
break;
|
||||
};
|
||||
|
||||
case I.RelationType.Status:
|
||||
case I.RelationType.Select:
|
||||
case I.RelationType.File:
|
||||
case I.RelationType.Tag:
|
||||
case I.RelationType.MultiSelect:
|
||||
case I.RelationType.Object:
|
||||
case I.RelationType.Relations: {
|
||||
value = this.getArrayValue(UtilCommon.objectCopy(value));
|
||||
|
|
@ -243,9 +243,9 @@ class Relation {
|
|||
break;
|
||||
};
|
||||
|
||||
case I.RelationType.Status:
|
||||
case I.RelationType.Select:
|
||||
case I.RelationType.File:
|
||||
case I.RelationType.Tag:
|
||||
case I.RelationType.MultiSelect:
|
||||
case I.RelationType.Object:
|
||||
case I.RelationType.Relations: {
|
||||
ret = value.length ? true : false;
|
||||
|
|
@ -344,7 +344,7 @@ class Relation {
|
|||
|
||||
switch (type) {
|
||||
default: {
|
||||
formats = [ I.RelationType.Status, I.RelationType.Tag, I.RelationType.Checkbox ];
|
||||
formats = [ I.RelationType.Select, I.RelationType.MultiSelect, I.RelationType.Checkbox ];
|
||||
break;
|
||||
};
|
||||
|
||||
|
|
@ -362,11 +362,11 @@ class Relation {
|
|||
const f1 = c1.format;
|
||||
const f2 = c2.format;
|
||||
|
||||
if ((f1 == I.RelationType.Status) && (f2 != I.RelationType.Status)) return -1;
|
||||
if ((f1 != I.RelationType.Status) && (f2 == I.RelationType.Status)) return 1;
|
||||
if ((f1 == I.RelationType.Select) && (f2 != I.RelationType.Select)) return -1;
|
||||
if ((f1 != I.RelationType.Select) && (f2 == I.RelationType.Select)) return 1;
|
||||
|
||||
if ((f1 == I.RelationType.Tag) && (f2 != I.RelationType.Tag)) return -1;
|
||||
if ((f1 != I.RelationType.Tag) && (f2 == I.RelationType.Tag)) return 1;
|
||||
if ((f1 == I.RelationType.MultiSelect) && (f2 != I.RelationType.MultiSelect)) return -1;
|
||||
if ((f1 != I.RelationType.MultiSelect) && (f2 == I.RelationType.MultiSelect)) return 1;
|
||||
|
||||
if ((f1 == I.RelationType.Checkbox) && (f2 != I.RelationType.Checkbox)) return -1;
|
||||
if ((f1 != I.RelationType.Checkbox) && (f2 == I.RelationType.Checkbox)) return 1;
|
||||
|
|
|
|||
|
|
@ -298,8 +298,8 @@ class UtilMenu {
|
|||
{ id: I.RelationType.Object },
|
||||
{ id: I.RelationType.LongText },
|
||||
{ id: I.RelationType.Number },
|
||||
{ id: I.RelationType.Status },
|
||||
{ id: I.RelationType.Tag },
|
||||
{ id: I.RelationType.Select },
|
||||
{ id: I.RelationType.MultiSelect },
|
||||
{ id: I.RelationType.Date },
|
||||
{ id: I.RelationType.File },
|
||||
{ id: I.RelationType.Checkbox },
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue