#106 Annotation sharing icons

mitaai · Dec 30, 2020 · d888c28 · d888c28
1 parent 780fd3e
commit d888c28
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 75 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -42,7 +42,7 @@
     "popper.js": "^1.16.1",
     "react": "^16.13.1",
     "react-bootstrap": "^1.3.0",
-    "react-bootstrap-icons": "^1.0.0",
+    "react-bootstrap-icons": "^1.2.2",
     "react-bootstrap-typeahead": "^5.1.2",
     "react-device-detect": "^1.14.0",
     "react-dom": "^16.13.1",

diff --git a/src/components/AnnotationCard/AnnotationCard.js b/src/components/AnnotationCard/AnnotationCard.js
@@ -1,34 +1,29 @@
+/* eslint-disable no-underscore-dangle */
 import { useEffect, useState, useContext } from 'react';
 import $ from 'jquery';
 import moment from 'moment';
 import {
-  Row,
-  Col,
   Card,
   Form,
   Button,
   Badge,
   Dropdown,
   ListGroup,
-  Spinner,
   OverlayTrigger,
   Tooltip,
-  ButtonGroup,
-  Popover,
-  Modal,
-  InputGroup,
   DropdownButton,
-  FormControl,
 } from 'react-bootstrap';
-
 import {
-  CheckCircleFill, TrashFill, QuestionCircle,
+  TrashFill,
+  QuestionCircle,
+  PeopleFill,
+  PersonFill,
+  PersonPlusFill,
 } from 'react-bootstrap-icons';
 import {
   Typeahead, Menu, MenuItem, Token,
 } from 'react-bootstrap-typeahead';
 import { postAnnotation, updateAnnotationById, deleteAnnotationById } from '../../utils/annotationUtil';
-
 import { DocumentAnnotationsContext, DocumentFiltersContext, DocumentActiveAnnotationsContext } from '../../contexts/DocumentContext';
 import { FirstNameLastInitial } from '../../utils/nameUtil';
 
@@ -50,48 +45,6 @@ function DeepCopyObj(obj) {
   return JSON.parse(JSON.stringify(obj));
 }
 
-
-/*
-
-"annotation data structure"
-
-{
-  "id": <String> (valid ObjectID),
-  "type": "Annotation",
-  "creator": {
-    "name": <String>,
-    "email": <String> (valid email)
-  },
-  "permissions": {
-    "groups": Array<String> (valid ObjectID)> or undefined,
-    "sharedTo": Array<String> (valid ObjectID)> or undefined,
-  }
-  "created": <Date>,
-  "modified": <Date>,
-  "body": {
-    "type": "TextualBody",
-    "value": <String> (valid HTML),
-    "tags": Array<String>,
-    "format": "text/html",
-    "language": <String> (valid W3C language tag)
-  },
-  "target": {
-    "document": {
-      "slug": <String> (valid slug),
-      "format": "text/html",
-      ...metadata
-    },
-    "selector": {
-      "type": "TextQuoteSelector",
-      "exact": <String>,
-      "prefix": <String>,
-      "suffix": <String>,
-    }
-  }
-}
-*/
-
-
 function AnnotationCard({
   side,
   annotation,
@@ -121,7 +74,31 @@ function AnnotationCard({
     selectedUsersToShare = annotationData.permissions.sharedTo === undefined ? [] : annotationData.permissions.sharedTo.map((id) => membersIntersection.find((m) => m.id === id)).filter((v) => v !== undefined);
   }
 
-  const permissionText = ['Private', 'Shared with group(s)', selectedUsersToShare.length === 1 ? 'Shared with 1 user' : `Shared with ${selectedUsersToShare.length} users`];
+  const permissionText = [
+    (
+      <>
+        <PersonFill />
+        {' '}
+        Private
+      </>
+    ),
+    (
+      <>
+        <PeopleFill />
+        {' '}
+        Shared with group(s)
+      </>
+    ),
+    (
+      <>
+        <PersonPlusFill />
+        {' '}
+        {selectedUsersToShare.length === 1
+          ? 'Shared with 1 user'
+          : `Shared with ${selectedUsersToShare.length} users`}
+      </>
+    ),
+  ];
 
   function AddClassActive(id) {
     // changing color of highlighted text
@@ -456,9 +433,27 @@ function AnnotationCard({
                       <ListGroup.Item className="annotation-permissions">
                         <div id="dropdown-permission-options-container">
                           <DropdownButton drop="down" variant="outline-primary" id="dropdown-permission-options" title={permissionText[showPermissionNumber()]} disabled={savingAnnotation}>
-                            <Dropdown.Item onClick={() => { handleAnnotationPermissionsChange(0); }}>Private</Dropdown.Item>
-                            <Dropdown.Item onClick={() => { handleAnnotationPermissionsChange(1); }}>Share with group(s)</Dropdown.Item>
-                            <Dropdown.Item onClick={() => { handleAnnotationPermissionsChange(2); }}>Share with user(s)</Dropdown.Item>
+                            <Dropdown.Item
+                              onClick={() => { handleAnnotationPermissionsChange(0); }}
+                            >
+                              <PersonFill />
+                              {' '}
+                              Private
+                            </Dropdown.Item>
+                            <Dropdown.Item
+                              onClick={() => { handleAnnotationPermissionsChange(1); }}
+                            >
+                              <PeopleFill />
+                              {' '}
+                              Share with group(s)
+                            </Dropdown.Item>
+                            <Dropdown.Item
+                              onClick={() => { handleAnnotationPermissionsChange(2); }}
+                            >
+                              <PersonPlusFill />
+                              {' '}
+                              Share with user(s)
+                            </Dropdown.Item>
                           </DropdownButton>
                         </div>
                         <QuestionCircle style={{ fontSize: 14, color: '#007bff', marginLeft: 4 }} onClick={() => { setShowMoreInfoShareModal(true); }} />

diff --git a/src/components/FilterPopover/FilterPopover.js b/src/components/FilterPopover/FilterPopover.js
@@ -4,23 +4,22 @@
 import React, { useState, useContext, useEffect } from 'react';
 import $ from 'jquery';
 import {
-  Nav,
   Row,
   Col,
-  Navbar,
-  Breadcrumb,
-  Container,
   Button,
   OverlayTrigger,
   Popover,
   Form,
   Card,
   ButtonGroup,
-  Badge,
-  Spinner,
 } from 'react-bootstrap';
 
-import { Filter, FileEarmarkLock2, FileEarmarkPerson, FileEarmarkFill } from 'react-bootstrap-icons';
+import {
+  Filter,
+  PeopleFill,
+  PersonFill,
+  PersonPlusFill,
+} from 'react-bootstrap-icons';
 
 import {
   Typeahead, Menu, MenuItem, Token,
@@ -235,21 +234,21 @@ function FilterPopover({ session }) {
           variant={documentFilters.filters.permissions === 0 ? 'primary' : 'outline-primary'}
           onClick={() => { updateFilters('permissions', 0); }}
         >
-          <FileEarmarkLock2 size="1.2em" />
+          <PersonFill size="1.2em" />
           <div className="mine">Mine</div>
         </Button>
         <Button
           variant={documentFilters.filters.permissions === 1 ? 'primary' : 'outline-primary'}
           onClick={() => { updateFilters('permissions', 1); }}
         >
-          <FileEarmarkFill size="1.2em" />
+          <PeopleFill size="1.2em" />
           <div className="shared-with-groups">Shared with group(s)</div>
         </Button>
         <Button
           variant={documentFilters.filters.permissions === 2 ? 'primary' : 'outline-primary'}
           onClick={() => { updateFilters('permissions', 2); }}
         >
-          <FileEarmarkPerson size="1.2em" />
+          <PersonPlusFill size="1.2em" />
           <div className="shared-with-me">Shared with me</div>
         </Button>
       </ButtonGroup>
@@ -315,7 +314,7 @@ function FilterPopover({ session }) {
                           }}
                           onInputChange={() => { setByTagsTypeheadMarginBottom($('#typehead-by-tags').height() + 20); }}
                           options={filterOptions.byTags}
-                          placeholder="Select on or more tag(s)"
+                          placeholder="Select one or more tag(s)"
                         />
                       </Form.Group>
                     </Col>
@@ -369,17 +368,20 @@ function FilterPopover({ session }) {
         }
 
         .permissions-buttons .btn.btn-primary div.mine {
-          width: 60px;
+          margin-left: 10px;
+          width: 40px;
           opacity: 1;
         }
 
         .permissions-buttons .btn.btn-primary div.shared-with-groups {
-          width: 160px;
+          width: 145px;
+          margin-left:10px;
           opacity: 1;
         }
 
         .permissions-buttons .btn.btn-primary div.shared-with-me {
-          width: 130px;
+          width: 115px;
+          margin-left: 10px;
           opacity: 1;
         }