Merge pull request #713 from anyproto/feature/search

Feature/JS-3019: Search

src/json/text.json

@@ -143,11 +143,10 @@
  "commonUpdate": "Update",
  "commonOwner": "Owner",
  "commonUpdateProgress": "Downloading update... %s/%s",
+ "commonActions": "Actions",
  "commonAddRelation": "Add Relation",
  "commonCollection": "Collection",
  "commonSet": "Set",
- "commonDeletionWarningTitle": "Are you sure you want to delete %s %s?",
- "commonDeletionWarningText": "These objects will be deleted irrevocably. You can't undo this action.",
 
  "pluralDay": "day|days",
  "pluralObject": "Object|Objects",
@@ -997,6 +996,9 @@
 
  "popupConfirmRelationOptionRemoveText": "Deleting relation options can affect your objects. Once confirmed, the action cannot be undone.",
 
+ "popupConfirmDeleteWarningTitle": "Are you sure you want to delete %s %s?",
+ "popupConfirmDeleteWarningText": "These objects will be deleted irrevocably. You can't undo this action.",
+
  "popupInviteRequestTitle": "Join a space",
  "popupInviteRequestText": "You've been invited to join <b>%s</b> space, created by <b>%s</b>. Send a request so space owner can let you in.",
  "popupInviteRequestMessagePlaceholder": "Leave a private comment for a space owner",
@@ -1033,6 +1035,9 @@
  "popupSearchEmptyFilter": "<b>There are no Objects named <span>\"%s\"<\/span><\/b>Try creating a new one or search for something else",
  "popupSearchRecentObjects": "Recent Objects",
  "popupSearchCreateObject": "Create Object",
+ "popupSearchAddRelation": "Add Relation",
+ "popupSearchTooltipSearchByBacklinks": "Show related objects",
+ "popupSearchBacklinksFrom": "Related to: %s",
 
  "popupAboutTitle": "Anytype",
  "popupAboutDescription": "Next generation software that breaks down barriers between applications, gives back privacy and data ownership to users.",
@@ -1092,7 +1097,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",
@@ -1244,7 +1248,6 @@
  "menuBlockActionsSectionsListStyle": "List style",
  "menuBlockActionsSectionsDividerStyle": "Divider style",
  "menuBlockActionsSectionsFileStyle": "File style",
- "menuBlockActionsSectionsActions": "Actions",
  "menuBlockActionsSectionsBackground": "Background",
  "menuBlockActionsSectionsColor": "Color",
  "menuBlockActionsSectionsDataview": "Dataview",

src/scss/common.scss

@@ -103,8 +103,8 @@ html.platformWindows, html.platformLinux {
 .editableWrap { position: relative; }
 
 a { color: var(--color-text-primary); }
-search { background: yellow !important; color: var(--color-text-primary) !important; border-radius: 2px; display: inline; }
-search.active { background: orange !important; }
+search, markuphighlight { background: yellow !important; color: var(--color-text-primary) !important; border-radius: 2px; display: inline; }
+search.active, markuphighlight.active { background: orange !important; }
 
 .dropTarget.isOver.middle { background: var(--color-system-drop-zone) !important; }
 .dropTarget.isOver.top { box-shadow: 0px -2px 0px var(--color-system-accent-100); }

src/scss/popup/search.scss

@@ -2,11 +2,11 @@
 
 .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); }
+ .innerWrap { width: 684px; height: 684px; overflow: hidden; }
+ .content { overflow: visible; transition: none; transform: translate3d(0px,0px,0px); height: 100%; }
  .wrap { height: 100%; display: flex; flex-direction: column; }
- .innerWrap { width: 600px; overflow: hidden; }
  #loader { top: 55px; height: calc(100% - 55px); }
 
  .head { 
@@ -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,58 @@
  .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 16px; 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.isSmall { height: 38px; align-items: center; }
+ .item.isSmall {
+ .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: 0px 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()) {

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

@@ -226,6 +226,7 @@ const MenuBlockCover = observer(class MenuBlockCover extends React.Component<I.M
  ];
  const sorts = [ 
  { relationKey: 'lastOpenedDate', type: I.SortType.Desc },
+ { relationKey: 'lastModifiedDate', type: I.SortType.Desc },
  ];
 
  this.setState({ isLoading: true });

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

@@ -214,6 +214,7 @@ const MenuBlockMention = observer(class MenuBlockMention extends React.Component
  ];
  const sorts = [
  { relationKey: 'lastOpenedDate', type: I.SortType.Desc },
+ { relationKey: 'lastModifiedDate', type: I.SortType.Desc },
  { relationKey: 'type', type: I.SortType.Asc },
  ];
 

src/ts/component/menu/dataview/object/list.tsx

@@ -257,6 +257,7 @@ const MenuDataviewObjectList = observer(class MenuDataviewObjectList extends Rea
  ].concat(data.filters || []);
  const sorts = [
  { relationKey: 'lastOpenedDate', type: I.SortType.Desc },
+ { relationKey: 'lastModifiedDate', type: I.SortType.Desc },
  ];
 
  if (types && types.length) {

src/ts/component/menu/smile.tsx

@@ -399,6 +399,7 @@ class MenuSmile extends React.Component<I.Menu, State> {
  ];
  const sorts = [ 
  { relationKey: 'lastOpenedDate', type: I.SortType.Desc },
+ { relationKey: 'lastModifiedDate', type: I.SortType.Desc },
  ];
 
  this.setState({ isLoading: true });

src/ts/component/popup/index.tsx

@@ -4,7 +4,6 @@ import raf from 'raf';
 import { I, UtilCommon, analytics, Storage, Preview, translate } from 'Lib';
 import { Dimmer } from 'Component';
 import { menuStore, popupStore, commonStore } from 'Store';
-const Constant = require('json/constant.json');
 
 import PopupSettings from './settings';
 import PopupSettingsOnboarding from './settings/onboarding';
@@ -221,7 +220,7 @@ class Popup extends React.Component<I.Popup> {
  };
 
  onDimmer () {
- if (!this.props.param.preventClose) {
+ if (!this.props.param.preventCloseByClick) {
  this.close();
  };
  };