Feature/JS-3019: Search

src/json/constant.json

@@ -159,7 +159,8 @@
  "restrictions",
  "defaultTemplateId",
  "identityProfileLink",
- "createdDate"
+ "createdDate",
+ "backlinks"
  ],
 
  "sidebarRelationKeys": [

src/json/text.json

@@ -143,6 +143,7 @@
  "commonUpdate": "Update",
  "commonOwner": "Owner",
  "commonUpdateProgress": "Downloading update... %s/%s",
+ "commonActions": "Actions",
 
  "commonLCCollection": "Collection",
  "commonLCSet": "Set",
@@ -1036,6 +1037,8 @@
  "popupSearchRecentObjects": "Recent Objects",
  "popupSearchCreateObject": "Create Object",
  "popupSearchAddRelation": "Add Relation",
+ "popupSearchTooltipSearchByBacklinks": "Search by backlinks ->",
+ "popupSearchBacklinksFrom": "Backlinks from: %s",
 
  "popupAboutTitle": "Anytype",
  "popupAboutDescription": "Next generation software that breaks down barriers between applications, gives back privacy and data ownership to users.",
@@ -1095,7 +1098,6 @@
  "popupShortcutMainSelection4": "Expand your selection up or down",
  "popupShortcutMainSelection5": "On block will select or de-select an entire block",
  "popupShortcutMainSelection6": "Select block and all blocks in between",
- "popupShortcutMainActions": "Actions",
  "popupShortcutMainActions1": "Activate command menu",
  "popupShortcutMainActions2": "Open action menu",
  "popupShortcutMainActions3": "Deletes the words left to the cursor",
@@ -1245,7 +1247,6 @@
  "menuBlockActionsSectionsListStyle": "List style",
  "menuBlockActionsSectionsDividerStyle": "Divider style",
  "menuBlockActionsSectionsFileStyle": "File style",
- "menuBlockActionsSectionsActions": "Actions",
  "menuBlockActionsSectionsBackground": "Background",
  "menuBlockActionsSectionsColor": "Color",
  "menuBlockActionsSectionsDataview": "Dataview",

src/scss/popup/search.scss

@@ -2,7 +2,7 @@
 
 .popups {
  .popup.popupSearch {
- .ReactVirtualized__List { padding: 8px 0px; }
+ .ReactVirtualized__List { padding: 8px 0px 4px; }
 
  .content { height: 432px; overflow: visible; transition: none; transform: translate3d(0px,0px,0px); }
  .wrap { height: 100%; display: flex; flex-direction: column; }
@@ -23,7 +23,7 @@
  .filter {
  .inner { height: auto; }
  .input { 
- padding: 0px; height: 54px; vertical-align: middle; width: calc(100% - 32px); vertical-align: top; @include text-paragraph; font-weight: 500;
+ padding: 0px; height: 54px; width: calc(100% - 32px); vertical-align: top; @include text-paragraph; font-weight: 500;
  }
  .placeholder { @include text-paragraph; font-weight: 500; }
  .line { display: none; }
@@ -33,36 +33,59 @@
  .items { height: 100%; flex-grow: 1; }
  .items {
  .pad { height: 12px; }
+ .row { padding: 0 4px; }
 
- .sectionName { @include text-small; height: 26px; line-height: 18px; padding: 5px 20px; font-weight: 500; color: var(--color-text-secondary); }
+ .sectionName { @include text-small; display: flex; justify-content: space-between; height: 26px; line-height: 18px; padding: 5px 20px; font-weight: 500; color: var(--color-text-secondary); }
 
- .item { 
- position: relative; height: 48px; line-height: 22px; padding: 13px 20px; white-space: nowrap; display: flex; gap: 0px 10px; 
- align-items: center;
+ .item { position: relative; line-height: 22px; padding: 8px 8px 8px 12px; white-space: nowrap; display: flex; gap: 0px 12px; border-radius: 8px; }
+ .item#item-add,
+ .item#item-relation { height: 48px; align-items: center; }
+ .item#item-add,
+ .item#item-relation {
+ .sides { align-items: center; }
  }
+
  .item {
  .icon { width: 20px; height: 20px; flex-shrink: 0; }
  .icon.plus { background-image: url('~img/icon/popup/search/plus.svg'); }
  .icon.relation { background-image: url('~img/icon/menu/action/relation0.svg'); }
  .icon.graph { background-image: url('~img/icon/menu/action/graph0.svg'); }
  .icon.navigation { background-image: url('~img/icon/menu/action/navigation0.svg'); }
+ .icon.advanced { width: 28px; height: 28px; background: url('~img/arrow/forward.svg'); opacity: 0; }
 
  .iconObject { transition: $transitionAllCommon; vertical-align: top; flex-shrink: 0; flex-grow: 0; }
- .name { 
- @include text-overflow-nw; font-weight: 500; line-height: 18px; display: inline-block; vertical-align: top; flex-shrink: 0; flex-grow: 1; 
- width: calc(66% - 30px); 
- }
- .caption { @include text-small; @include text-overflow-nw; color: var(--color-text-secondary); flex-shrink: 0; width: 33%; flex-grow: 0; text-align: right; }
- .caption {
- .label { 
- padding: 0px 2px; border-radius: 4px; background: var(--color-shape-highlight-medium); display: inline-block; vertical-align: middle; min-width: 18px; 
- text-align: center; margin-right: 4px;
+ .iconObject:not(.isHuman),
+ .iconObject:not(.isParticipant) { background: var(--color-shape-tertiary); border-radius: 8px; }
+ .iconObject.isTask { background: none; }
+
+ .sides { width: 100%; display: flex; justify-content: space-between; gap: 0px 12px; }
+ .sides {
+ .side.left { width: calc(100% - 40px); overflow: hidden; }
+ .side.right { min-width: 40px; flex-shrink: 0; display: flex; justify-content: right; }
+ .side.right {
+ .label {
+ padding: 0px 2px; border-radius: 4px; background: var(--color-shape-highlight-medium); display: inline-block; vertical-align: middle; min-width: 18px;
+ text-align: center; margin-right: 4px;
+ }
+ .label:last-child { margin: 0px; }
  }
- .label:last-child { margin: 0px; }
  }
+ .name { @include text-overflow-nw; }
+ .context { @include text-small; padding: 2px 0px; white-space: normal; display: flex; gap: 0 4px; }
+
+ .context {
+ .key { text-transform: capitalize; }
+ .value { border-radius: 2px; }
+ .key + .value { padding: 0 3px; }
+ }
+
+ .caption { @include text-small; @include text-overflow-nw; color: var(--color-text-secondary); }
  }
 
  .item.active { background-color: var(--color-shape-highlight-medium); }
+ .item.active {
+ .icon.advanced { opacity: 1; }
+ }
  }
  }
-}
+}

src/ts/component/menu/block/action.tsx

@@ -252,7 +252,7 @@ class MenuBlockAction extends React.Component<I.Menu, State> {
  const turnPage = { id: 'turnPage', icon: '', name: translate('commonTurnIntoObject'), children: UtilMenu.getTurnPage() };
  const turnDiv = { id: 'turnDiv', icon: '', name: translate('menuBlockActionsSectionsDividerStyle'), children: UtilMenu.getTurnDiv() };
  const turnFile = { id: 'turnFile', icon: '', name: translate('menuBlockActionsSectionsFileStyle'), children: UtilMenu.getTurnFile() };
- const action = { id: 'action', icon: '', name: translate('menuBlockActionsSectionsActions'), children: UtilMenu.getActions(actionParam) };
+ const action = { id: 'action', icon: '', name: translate('commonActions'), children: UtilMenu.getActions(actionParam) };
  const align = { id: 'align', icon: '', name: translate('commonAlign'), children: UtilMenu.getHAlign(restrictedAlign) };
  const bgColor = { id: 'bgColor', icon: '', name: translate('commonBackground'), children: UtilMenu.getBgColors() };
  const color = { id: 'color', icon: 'color', name: translate('commonColor'), arrow: true, children: UtilMenu.getTextColors() };

src/ts/component/menu/block/add.tsx

@@ -317,7 +317,7 @@ const MenuBlockAdd = observer(class MenuBlockAdd extends React.Component<I.Menu>
  };
 
  sections = sections.concat([
- { id: 'action', icon: 'action', name: translate('menuBlockActionsSectionsActions'), color: '', children: actions },
+ { id: 'action', icon: 'action', name: translate('commonActions'), color: '', children: actions },
  ]);
 
  if (block.canHaveAlign()) {