From adad36606a17642fffdcb492a5ed1326f9adb010 Mon Sep 17 00:00:00 2001 From: Hannah Chow Date: Mon, 11 Mar 2019 18:09:33 -0400 Subject: starting on linking UI --- src/client/views/DocumentDecorations.scss | 26 ++++++++++++++++++++++++-- 1 file changed, 24 insertions(+), 2 deletions(-) (limited to 'src/client/views/DocumentDecorations.scss') diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss index a29bf36fa..a9621efa5 100644 --- a/src/client/views/DocumentDecorations.scss +++ b/src/client/views/DocumentDecorations.scss @@ -67,6 +67,18 @@ grid-column: 1/4 } +.linkButton-empty:hover { + background: $main-accent; + transform: scale(1.05); + cursor: pointer; +} + +.linkButton-nonempty:hover { + background: $main-accent; + transform: scale(1.05); + cursor: pointer; +} + .linkButton-empty { height: 20px; width: 20px; @@ -74,7 +86,12 @@ border-radius: 50%; opacity: 0.6; pointer-events: auto; - background-color: #2B6091; + background-color: $dark-color; + color: $light-color; + text-transform: uppercase; + letter-spacing: 2px; + font-size: 75%; + transition: transform 0.2s; } .linkButton-nonempty { @@ -84,5 +101,10 @@ border-radius: 50%; opacity: 0.6; pointer-events: auto; - background-color: rgb(35, 165, 42); + background-color: $dark-color; + color: $light-color; + text-transform: uppercase; + letter-spacing: 2px; + font-size: 75%; + transition: transform 0.2s; } \ No newline at end of file -- cgit v1.2.3-70-g09d2 From 31c9722ed5e587d3ae294db83c134b8e6ad050f8 Mon Sep 17 00:00:00 2001 From: Hannah Chow Date: Mon, 11 Mar 2019 18:32:28 -0400 Subject: added tooltips --- src/client/views/DocumentDecorations.scss | 12 ++++++------ src/client/views/DocumentDecorations.tsx | 2 +- src/client/views/nodes/LinkBox.scss | 22 +++++++++++++++++----- src/client/views/nodes/LinkBox.tsx | 6 +++--- src/client/views/nodes/LinkMenu.tsx | 4 ++-- 5 files changed, 29 insertions(+), 17 deletions(-) (limited to 'src/client/views/DocumentDecorations.scss') diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss index a9621efa5..9e3034829 100644 --- a/src/client/views/DocumentDecorations.scss +++ b/src/client/views/DocumentDecorations.scss @@ -80,11 +80,11 @@ } .linkButton-empty { - height: 20px; - width: 20px; + height: 16px; + width: 16px; margin-top: 10px; border-radius: 50%; - opacity: 0.6; + opacity: 0.9; pointer-events: auto; background-color: $dark-color; color: $light-color; @@ -95,11 +95,11 @@ } .linkButton-nonempty { - height: 20px; - width: 20px; + height: 16px; + width: 16px; margin-top: 10px; border-radius: 50%; - opacity: 0.6; + opacity: 0.9; pointer-events: auto; background-color: $dark-color; color: $light-color; diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index b75644ecd..313b35ca8 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -234,7 +234,7 @@ export class DocumentDecorations extends React.Component {
e.preventDefault()}>
e.preventDefault()}>
-
{linkButton}
+
{linkButton}
) diff --git a/src/client/views/nodes/LinkBox.scss b/src/client/views/nodes/LinkBox.scss index 00e5ebb3d..bdedbc103 100644 --- a/src/client/views/nodes/LinkBox.scss +++ b/src/client/views/nodes/LinkBox.scss @@ -1,3 +1,4 @@ +@import "../global_variables"; .link-container { width: 100%; height: 30px; @@ -29,11 +30,22 @@ } .button { - height: 15px; - width: 15px; - margin: 8px 5px; + height: 16px; + width: 16px; + margin: 8px 4px; border-radius: 50%; - opacity: 0.6; + opacity: 0.9; pointer-events: auto; - background-color: #2B6091; + background-color: $dark-color; + color: $light-color; + text-transform: uppercase; + letter-spacing: 2px; + font-size: 75%; + transition: transform 0.2s; +} + +.button:hover { + background: $main-accent; + transform: scale(1.05); + cursor: pointer; } \ No newline at end of file diff --git a/src/client/views/nodes/LinkBox.tsx b/src/client/views/nodes/LinkBox.tsx index 69df676ff..44b3dccb7 100644 --- a/src/client/views/nodes/LinkBox.tsx +++ b/src/client/views/nodes/LinkBox.tsx @@ -79,9 +79,9 @@ export class LinkBox extends React.Component {
-
-
-
+
+
+
) diff --git a/src/client/views/nodes/LinkMenu.tsx b/src/client/views/nodes/LinkMenu.tsx index 5c6b06d00..5eeb40772 100644 --- a/src/client/views/nodes/LinkMenu.tsx +++ b/src/client/views/nodes/LinkMenu.tsx @@ -39,8 +39,8 @@ export class LinkMenu extends React.Component {
- {this.renderLinkItems(linkTo, KeyStore.LinkedToDocs, "Source: ")} - {this.renderLinkItems(linkFrom, KeyStore.LinkedFromDocs, "Destination: ")} + {this.renderLinkItems(linkTo, KeyStore.LinkedToDocs, "Destination: ")} + {this.renderLinkItems(linkFrom, KeyStore.LinkedFromDocs, "Source: ")}
) -- cgit v1.2.3-70-g09d2 From f4b5033a7a8ad356fd607f5f3248ac8b741d1d5c Mon Sep 17 00:00:00 2001 From: Hannah Chow Date: Mon, 11 Mar 2019 19:30:14 -0400 Subject: finished linking button styling --- src/client/views/DocumentDecorations.scss | 4 ++-- src/client/views/nodes/LinkBox.scss | 28 +++++++++++++++++++++------- src/client/views/nodes/LinkBox.tsx | 19 ++++++++++++++++--- 3 files changed, 39 insertions(+), 12 deletions(-) (limited to 'src/client/views/DocumentDecorations.scss') diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss index 9e3034829..5912d5901 100644 --- a/src/client/views/DocumentDecorations.scss +++ b/src/client/views/DocumentDecorations.scss @@ -95,8 +95,8 @@ } .linkButton-nonempty { - height: 16px; - width: 16px; + height: 20px; + width: 20px; margin-top: 10px; border-radius: 50%; opacity: 0.9; diff --git a/src/client/views/nodes/LinkBox.scss b/src/client/views/nodes/LinkBox.scss index bdedbc103..5d5f782d2 100644 --- a/src/client/views/nodes/LinkBox.scss +++ b/src/client/views/nodes/LinkBox.scss @@ -1,14 +1,14 @@ @import "../global_variables"; .link-container { width: 100%; - height: 30px; + height: 35px; display: flex; flex-direction: row; border-top: 0.5px solid #bababa; } .info-container { - width: 60%; + width: 55%; padding-top: 5px; padding-left: 5px; display: flex; @@ -24,14 +24,14 @@ } .button-container { - width: 40%; + width: 45%; display: flex; flex-direction: row; } .button { - height: 16px; - width: 16px; + height: 20px; + width: 20px; margin: 8px 4px; border-radius: 50%; opacity: 0.9; @@ -40,12 +40,26 @@ color: $light-color; text-transform: uppercase; letter-spacing: 2px; - font-size: 75%; + font-size: 60%; transition: transform 0.2s; } .button:hover { background: $main-accent; - transform: scale(1.05); cursor: pointer; +} + +.fa-icon-view { + margin-left: 3px; + margin-top: 5px; +} + +.fa-icon-edit { + margin-left: 5px; + margin-top: 5px; +} + +.fa-icon-delete { + margin-left: 6px; + margin-top: 5px; } \ No newline at end of file diff --git a/src/client/views/nodes/LinkBox.tsx b/src/client/views/nodes/LinkBox.tsx index 44b3dccb7..430c1b694 100644 --- a/src/client/views/nodes/LinkBox.tsx +++ b/src/client/views/nodes/LinkBox.tsx @@ -11,6 +11,16 @@ import { ListField } from "../../../fields/ListField"; import { DocumentManager } from "../../util/DocumentManager"; import { LinkEditor } from "./LinkEditor"; import { CollectionDockingView } from "../collections/CollectionDockingView"; +import { library } from '@fortawesome/fontawesome-svg-core'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { faEye } from '@fortawesome/free-solid-svg-icons'; +import { faEdit } from '@fortawesome/free-solid-svg-icons'; +import { faTimes } from '@fortawesome/free-solid-svg-icons'; + + +library.add(faEye); +library.add(faEdit); +library.add(faTimes); interface Props { linkDoc: Document; @@ -79,9 +89,12 @@ export class LinkBox extends React.Component {
-
-
-
+
+
+
+
+
+
) -- cgit v1.2.3-70-g09d2 From d3c5e42de48f59695952af85e1af84251d7d6988 Mon Sep 17 00:00:00 2001 From: Hannah Chow Date: Mon, 11 Mar 2019 19:41:20 -0400 Subject: got buttons to be responsive to number of links --- src/client/views/DocumentDecorations.scss | 13 +++++++++++-- src/client/views/DocumentDecorations.tsx | 5 ++++- 2 files changed, 15 insertions(+), 3 deletions(-) (limited to 'src/client/views/DocumentDecorations.scss') diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss index 5912d5901..e77e22c5d 100644 --- a/src/client/views/DocumentDecorations.scss +++ b/src/client/views/DocumentDecorations.scss @@ -80,8 +80,8 @@ } .linkButton-empty { - height: 16px; - width: 16px; + height: 20px; + width: 20px; margin-top: 10px; border-radius: 50%; opacity: 0.9; @@ -92,6 +92,11 @@ letter-spacing: 2px; font-size: 75%; transition: transform 0.2s; + text-align: center; + display: flex; + vertical-align: middle; + justify-content: center; + align-items: center; } .linkButton-nonempty { @@ -107,4 +112,8 @@ letter-spacing: 2px; font-size: 75%; transition: transform 0.2s; + text-align: center; + display: flex; + justify-content: center; + align-items: center; } \ No newline at end of file diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index 313b35ca8..3bdb7d5b3 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -208,13 +208,16 @@ export class DocumentDecorations extends React.Component { let linkButton = null; if (SelectionManager.SelectedDocuments().length > 0) { let selFirst = SelectionManager.SelectedDocuments()[0]; + let linkToSize = selFirst.props.Document.GetData(KeyStore.LinkedToDocs, ListField, []).length; + let linkFromSize = selFirst.props.Document.GetData(KeyStore.LinkedFromDocs, ListField, []).length; + let linkCount = linkToSize + linkFromSize; linkButton = ( }> -
+
{linkCount}
); } return ( -- cgit v1.2.3-70-g09d2 From 3f7ff76768e0ff74e6a5d6e092f82e96661b3a2a Mon Sep 17 00:00:00 2001 From: Hannah Chow Date: Mon, 11 Mar 2019 20:16:18 -0400 Subject: pen tools styling and tooltips --- src/client/views/DocumentDecorations.scss | 1 - src/client/views/InkingCanvas.scss | 265 +++++++++++++++--------------- src/client/views/InkingControl.tsx | 16 +- 3 files changed, 141 insertions(+), 141 deletions(-) (limited to 'src/client/views/DocumentDecorations.scss') diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss index e77e22c5d..11595aa01 100644 --- a/src/client/views/DocumentDecorations.scss +++ b/src/client/views/DocumentDecorations.scss @@ -94,7 +94,6 @@ transition: transform 0.2s; text-align: center; display: flex; - vertical-align: middle; justify-content: center; align-items: center; } diff --git a/src/client/views/InkingCanvas.scss b/src/client/views/InkingCanvas.scss index d132504fc..d76861be1 100644 --- a/src/client/views/InkingCanvas.scss +++ b/src/client/views/InkingCanvas.scss @@ -1,147 +1,148 @@ @import "global_variables"; .inking-canvas { - position: fixed; - top: -50000px; - left: -50000px; // z-index: 99; //overlays ink on top of everything - svg { - width: 100000px; - height: 100000px; - .highlight { - mix-blend-mode: multiply; + position: fixed; + top: -50000px; + left: -50000px; // z-index: 99; //overlays ink on top of everything + svg { + width: 100000px; + height: 100000px; + .highlight { + mix-blend-mode: multiply; + } } - } } .inking-control { - position: absolute; - left: 70px; - bottom: 70px; - margin: 0; - padding: 0; - display: flex; - label, - input, - option { - font-size: 12px; - } - input[type="range"] { - -webkit-appearance: none; - background-color: transparent; - vertical-align: middle; - margin-top: 8px; - &:focus { - outline: none; - } - &::-webkit-slider-runnable-track { - width: 100%; - height: 3px; - border-radius: 1.5px; - cursor: pointer; - background: $intermediate-color; - } - &::-webkit-slider-thumb { - height: 12px; - width: 12px; - border: 1px solid $intermediate-color; - border-radius: 6px; - background: $light-color; - cursor: pointer; - -webkit-appearance: none; - margin-top: -4px; - } - &::-moz-range-track { - width: 100%; - height: 3px; - border-radius: 1.5px; - cursor: pointer; - background: $light-color; - } - &::-moz-range-thumb { - height: 12px; - width: 12px; - border: 1px solid $intermediate-color; - border-radius: 6px; - background: $light-color; - cursor: pointer; - -webkit-appearance: none; - margin-top: -4px; - } - } - input[type="text"] { - border: none; - padding: 0 3px; - background: transparent; - color: $light-color; - } - .ink-panel { - margin: 6px 12px 6px 0; - height: 30px; - vertical-align: middle; - line-height: 36px; - padding: 0 10px; - color: $intermediate-color; - &:first { - margin-top: 0; - } - } - .ink-tools { - display: flex; - background-color: transparent; - border-radius: 0; + position: absolute; + left: 70px; + bottom: 70px; + margin: 0; padding: 0; - button { - height: 36px; - padding: 0px; - padding-bottom: 3px; - margin-left: 10px; - background-color: transparent; - color: $intermediate-color; + display: flex; + label, + input, + option { + font-size: 12px; } - button:hover { - transform: scale(1.15); + input[type="range"] { + -webkit-appearance: none; + background-color: transparent; + vertical-align: middle; + margin-top: 8px; + &:focus { + outline: none; + } + &::-webkit-slider-runnable-track { + width: 100%; + height: 3px; + border-radius: 1.5px; + cursor: pointer; + background: $intermediate-color; + } + &::-webkit-slider-thumb { + height: 12px; + width: 12px; + border: 1px solid $intermediate-color; + border-radius: 6px; + background: $light-color; + cursor: pointer; + -webkit-appearance: none; + margin-top: -4px; + } + &::-moz-range-track { + width: 100%; + height: 3px; + border-radius: 1.5px; + cursor: pointer; + background: $light-color; + } + &::-moz-range-thumb { + height: 12px; + width: 12px; + border: 1px solid $intermediate-color; + border-radius: 6px; + background: $light-color; + cursor: pointer; + -webkit-appearance: none; + margin-top: -4px; + } } - } - .ink-size { - display: flex; - justify-content: space-between; input[type="text"] { - width: 42px; + border: none; + padding: 0 0px; + background: transparent; + color: $dark-color; + font-size: 12px; + margin-top: 4px; } - > * { - margin-right: 6px; - &:last-child { - margin-right: 0; - } + .ink-panel { + margin: 6px 12px 6px 0; + height: 30px; + vertical-align: middle; + line-height: 36px; + padding: 0 10px; + color: $intermediate-color; + &:first { + margin-top: 0; + } } - } - .ink-color { - display: flex; - position: relative; - padding-right: 0; - label { - margin-right: 6px; + .ink-tools { + display: flex; + background-color: transparent; + border-radius: 0; + padding: 0; + button { + height: 36px; + padding: 0px; + padding-bottom: 3px; + margin-left: 10px; + background-color: transparent; + color: $intermediate-color; + } + button:hover { + transform: scale(1.15); + } } - .ink-color-display { - border-radius: 11px; - width: 22px; - height: 22px; - margin-top: 6px; - cursor: pointer; - text-align: center; - // span { - // color: $light-color; - // font-size: 8px; - // user-select: none; - // } + .ink-size { + display: flex; + justify-content: space-between; + input[type="text"] { + width: 42px; + } + >* { + margin-right: 6px; + &:last-child { + margin-right: 0; + } + } } - .ink-color-picker { - background-color: $light-color; - border-radius: 5px; - padding: 12px; - position: absolute; - bottom: 36px; - left: -3px; - box-shadow: $intermediate-color 0.2vw 0.2vw 0.8vw; + .ink-color { + display: flex; + position: relative; + padding-right: 0; + label { + margin-right: 6px; + } + .ink-color-display { + border-radius: 11px; + width: 22px; + height: 22px; + margin-top: 6px; + cursor: pointer; + text-align: center; // span { + // color: $light-color; + // font-size: 8px; + // user-select: none; + // } + } + .ink-color-picker { + background-color: $light-color; + border-radius: 5px; + padding: 12px; + position: absolute; + bottom: 36px; + left: -3px; + box-shadow: $intermediate-color 0.2vw 0.2vw 0.8vw; + } } - } -} +} \ No newline at end of file diff --git a/src/client/views/InkingControl.tsx b/src/client/views/InkingControl.tsx index bf633b034..fb75ef2a5 100644 --- a/src/client/views/InkingControl.tsx +++ b/src/client/views/InkingControl.tsx @@ -78,14 +78,14 @@ export class InkingControl extends React.Component {
  • - - - - + + + +
  • - +
    this.toggleColorPicker()}> {/* {this._colorPickerDisplay ? ▼ : ▲} */} @@ -95,9 +95,9 @@ export class InkingControl extends React.Component {
  • - - {/* ) => this.switchWidth(e.target.value)} /> */} + + ) => this.switchWidth(e.target.value)} /> ) => this.switchWidth(e.target.value)} />
    • -- cgit v1.2.3-70-g09d2