From 2b1af3fab4cc51f8cbb577ed51842cec1774a355 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Wed, 8 Jul 2020 13:22:49 -0500 Subject: restructured textbox comment, cleaned menu UI --- src/client/views/linking/LinkEditor.scss | 15 ++++--- src/client/views/linking/LinkEditor.tsx | 3 +- src/client/views/linking/LinkMenu.scss | 71 ++++++++++++++++++++---------- src/client/views/linking/LinkMenu.tsx | 18 ++++---- src/client/views/linking/LinkMenuItem.scss | 29 ++++++------ src/client/views/linking/LinkMenuItem.tsx | 10 ++++- 6 files changed, 91 insertions(+), 55 deletions(-) (limited to 'src/client/views/linking') diff --git a/src/client/views/linking/LinkEditor.scss b/src/client/views/linking/LinkEditor.scss index 937427e46..87afc99eb 100644 --- a/src/client/views/linking/LinkEditor.scss +++ b/src/client/views/linking/LinkEditor.scss @@ -40,6 +40,10 @@ font-size: 9px; //font-style: italic; text-decoration-color: grey; + + .button { + color: black; + } } .linkEditor-description { @@ -61,7 +65,7 @@ //border-radius: 4px; padding-left: 2px; padding-right: 2px; - margin-right: 4px; + //margin-right: 4px; color: black; text-decoration-color: grey; } @@ -69,14 +73,14 @@ .linkEditor-description-add-button { display: inline; /* float: right; */ - border-radius: 9px; + border-radius: 7px; font-size: 9px; background-color: black; /* padding: 3px; */ padding-top: 4px; - padding-left: 3px; + padding-left: 7px; padding-bottom: 4px; - padding-right: 5px; + padding-right: 8px; height: 80%; color: white; } @@ -102,10 +106,11 @@ padding-left: 2px; padding-right: 2px; text-decoration-color: black; - color: black; + color: rgb(94, 94, 94); .linkEditor-followingDropdown-icon { float: right; + color: black; } } diff --git a/src/client/views/linking/LinkEditor.tsx b/src/client/views/linking/LinkEditor.tsx index 7af11bca1..a26685318 100644 --- a/src/client/views/linking/LinkEditor.tsx +++ b/src/client/views/linking/LinkEditor.tsx @@ -339,6 +339,7 @@ export class LinkEditor extends React.Component {
{ destination.proto?.title ?? destination.title ?? "untitled"}

{/* */} - +
{this.showInfo ?
{this.props.linkDoc.author ?
Author: {this.props.linkDoc.author}
: null}
diff --git a/src/client/views/linking/LinkMenu.scss b/src/client/views/linking/LinkMenu.scss index 422ab0430..4f7ac3275 100644 --- a/src/client/views/linking/LinkMenu.scss +++ b/src/client/views/linking/LinkMenu.scss @@ -1,37 +1,59 @@ @import "../globalCssVariables"; .linkMenu { - width: 100%; + width: auto; height: auto; - border: 1px solid black; - // &:hover { - // width: calc(auto + 26px); - // } -} + .linkMenu-list { -.linkMenu-list { + display: inline-block; - border: 1px solid black; + border: 1px solid black; - box-shadow: 3px 3px 1.5px grey; + box-shadow: 3px 3px 1.5px grey; - max-height: 170px; - overflow-y: scroll; - position: absolute; - z-index: 10; - background: white; - min-width: 150px; - //border-radius: 5px; - //padding-top: 6.5px; - //padding-bottom: 6.5px; - //padding-left: 6.5px; - //padding-right: 2px; - width: calc(auto + 50px); + max-height: 170px; + overflow-y: scroll; + position: relative; + z-index: 10; + background: white; + min-width: 170px; + //border-radius: 5px; + //padding-top: 6.5px; + //padding-bottom: 6.5px; + //padding-left: 6.5px; + //padding-right: 2px; + //width: calc(auto + 50px); - &:last-child { - border-bottom: none; + white-space: nowrap; + + overflow-x: hidden; + + &:last-child { + border-bottom: none; + } + + &:hover { + padding-right: 65px; + display: inline-block; + } + } + + .linkMenu-listEditor { + + display: inline-block; + + border: 1px solid black; + + box-shadow: 3px 3px 1.5px grey; + + max-height: 170px; + overflow-y: scroll; + position: relative; + z-index: 10; + background: white; + min-width: 170px; } } @@ -39,6 +61,7 @@ border-bottom: 0.5px solid lightgray; //@extend: 5px 0; + &:last-child { border-bottom: none; } @@ -54,7 +77,7 @@ } p.expand-one { - width: calc(100% + 26px); + width: calc(100% + 20px); } .linkEditor-tableButton { diff --git a/src/client/views/linking/LinkMenu.tsx b/src/client/views/linking/LinkMenu.tsx index 478ac3fe6..234cd5e07 100644 --- a/src/client/views/linking/LinkMenu.tsx +++ b/src/client/views/linking/LinkMenu.tsx @@ -90,16 +90,16 @@ export class LinkMenu extends React.Component { const sourceDoc = this.props.docView.props.Document; const groups: Map = LinkManager.Instance.getRelatedGroupedLinks(sourceDoc); return
-
- {!this._editingLink ? - this.renderAllGroups(groups) : + {!this._editingLink ?
+ {this.renderAllGroups(groups)} +
:
this._editingLink = undefined)} /> - } -
; +
+ } + +
; } } \ No newline at end of file diff --git a/src/client/views/linking/LinkMenuItem.scss b/src/client/views/linking/LinkMenuItem.scss index 8578d0b75..9f1f82ce2 100644 --- a/src/client/views/linking/LinkMenuItem.scss +++ b/src/client/views/linking/LinkMenuItem.scss @@ -26,6 +26,8 @@ color: rgb(85, 120, 196); font-size: 14px; padding-bottom: 2px; + padding-right: 4px; + margin-right: 4px; } .linkMenu-description { @@ -36,12 +38,16 @@ } p { - //padding: 4px 2px; + padding-right: 4px; line-height: 12px; border-radius: 5px; - overflow-wrap: break-word; + //overflow-wrap: break-word; user-select: none; } + + &:hover { + padding-right: 8px; + } } } @@ -60,6 +66,7 @@ &:hover { + width: calc(100% + 58px); .linkMenu-item-buttons { display: flex; @@ -74,19 +81,13 @@ text-overflow: break; } - &.expand-two p { - width: calc(100% - 52px); - //text-decoration: underline; - //color: rgb(15, 57, 148); - //background-color: lightgray; - } + // &.expand-two p { + // width: calc(100% - 63px); + // } - &.expand-three p { - width: calc(100% - 84px); - //text-decoration: underline; - //color: rgb(15, 57, 148); - //background-color: lightgray; - } + // &.expand-three p { + // width: calc(100% - 93px); + // } } } } diff --git a/src/client/views/linking/LinkMenuItem.tsx b/src/client/views/linking/LinkMenuItem.tsx index 59a88a1d9..57993d240 100644 --- a/src/client/views/linking/LinkMenuItem.tsx +++ b/src/client/views/linking/LinkMenuItem.tsx @@ -1,5 +1,5 @@ import { library } from '@fortawesome/fontawesome-svg-core'; -import { faArrowRight, faChevronDown, faChevronUp, faEdit, faEye, faTimes, faPencilAlt } from '@fortawesome/free-solid-svg-icons'; +import { faArrowRight, faChevronDown, faChevronUp, faEdit, faEye, faTimes, faPencilAlt, faEyeSlash } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { action, observable } from 'mobx'; import { observer } from "mobx-react"; @@ -15,7 +15,7 @@ import { setupMoveUpEvents, emptyFunction } from '../../../Utils'; import { DocumentView } from '../nodes/DocumentView'; import { DocumentLinksButton } from '../nodes/DocumentLinksButton'; import { LinkDocPreview } from '../nodes/LinkDocPreview'; -library.add(faEye, faEdit, faTimes, faArrowRight, faChevronDown, faChevronUp, faPencilAlt); +library.add(faEye, faEdit, faTimes, faArrowRight, faChevronDown, faChevronUp, faPencilAlt, faEyeSlash); interface LinkMenuItemProps { @@ -179,6 +179,8 @@ export class LinkMenuItem extends React.Component { const keys = LinkManager.Instance.getMetadataKeysInGroup(this.props.groupType);//groupMetadataKeys.get(this.props.groupType); const canExpand = keys ? keys.length > 0 : false; + const eyeIcon = this.props.linkDoc.shown ? "eye-slash" : "eye"; + return (
@@ -203,6 +205,10 @@ export class LinkMenuItem extends React.Component { {canExpand ?
this.toggleShowMore(e)}>
: <>} +
+
+ +
-- cgit v1.2.3-70-g09d2