From 8019926f41d0be85a21dfa9ad0d1a0d9e7160935 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Mon, 3 Aug 2020 18:10:55 -0500 Subject: menu buttons and other UI changes --- src/client/views/MainView.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'src/client/views/MainView.tsx') diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index ca5154ef7..93cc95ba4 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -415,10 +415,10 @@ export class MainView extends React.Component { if (!this.sidebarContent) return null; return
- {this.flyoutWidth > 0 ?
0 ?
-
: null} +
: null} */} Date: Mon, 3 Aug 2020 20:09:36 -0500 Subject: flyout undo fix --- src/client/views/MainView.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'src/client/views/MainView.tsx') diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index e7e5e837a..a544c52d2 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -485,7 +485,7 @@ export class MainView extends React.Component { } - @action @undoBatch + @action closeFlyout = () => { this._lastButton && (this._lastButton.color = "white"); this._lastButton && (this._lastButton._backgroundColor = ""); @@ -496,7 +496,7 @@ export class MainView extends React.Component { get groupManager() { return GroupManager.Instance; } _lastButton: Doc | undefined; - @action @undoBatch + @action selectMenu = (button: Doc, str: string) => { this._lastButton && (this._lastButton.color = "white"); this._lastButton && (this._lastButton._backgroundColor = ""); @@ -525,7 +525,7 @@ export class MainView extends React.Component { return true; } - @action @undoBatch + @action closeProperties = () => { CurrentUserUtils.propertiesWidth = 0; } -- cgit v1.2.3-70-g09d2 From 4051758f3cef5e353cb24c699f4594fa4be81758 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Tue, 4 Aug 2020 13:10:13 -0500 Subject: several UI changes and consistency updates around the system --- src/client/views/ContextMenu.scss | 5 ++++- src/client/views/DocumentButtonBar.scss | 8 ++++++-- src/client/views/DocumentButtonBar.tsx | 2 +- src/client/views/MainView.tsx | 4 ++-- src/client/views/PropertiesButtons.tsx | 2 +- src/client/views/collections/CollectionLinearView.scss | 2 +- src/client/views/collections/CollectionMenu.tsx | 2 +- src/client/views/collections/CollectionTreeView.scss | 15 +++++++++++---- .../collections/collectionFreeForm/PropertiesView.scss | 11 +++++++++++ .../collections/collectionFreeForm/PropertiesView.tsx | 4 ++-- src/client/views/linking/LinkEditor.scss | 3 ++- src/client/views/linking/LinkEditor.tsx | 6 +++--- src/client/views/nodes/DocumentLinksButton.scss | 8 +++++++- src/client/views/nodes/DocumentLinksButton.tsx | 8 ++++---- src/client/views/nodes/FontIconBox.scss | 5 +++++ src/client/views/nodes/FontIconBox.tsx | 18 ++++++++---------- 16 files changed, 69 insertions(+), 34 deletions(-) (limited to 'src/client/views/MainView.tsx') diff --git a/src/client/views/ContextMenu.scss b/src/client/views/ContextMenu.scss index 86e0a568a..7467bc043 100644 --- a/src/client/views/ContextMenu.scss +++ b/src/client/views/ContextMenu.scss @@ -7,7 +7,7 @@ box-shadow: $intermediate-color 0.2vw 0.2vw 0.4vw; flex-direction: column; background: whitesmoke; - padding-top: 10px; + padding-top: 10px; padding-bottom: 10px; border-radius: 15px; border: solid #BBBBBBBB 1px; @@ -72,6 +72,7 @@ margin-left: 5px; } } + .contextMenu-description { // width: 11vw; //10vw background: whitesmoke; @@ -100,6 +101,8 @@ border-color: $intermediate-color; // rgb(187, 186, 186); border-bottom-style: solid; border-top-style: solid; + + cursor: pointer; } .contextMenu-itemSelected { diff --git a/src/client/views/DocumentButtonBar.scss b/src/client/views/DocumentButtonBar.scss index c2ca93900..09ae14016 100644 --- a/src/client/views/DocumentButtonBar.scss +++ b/src/client/views/DocumentButtonBar.scss @@ -64,9 +64,13 @@ $linkGap : 3px; text-align: center; border-radius: 50%; pointer-events: auto; - color: $dark-color; - border: $dark-color 1px solid; + background-color: $dark-color; + border: none; transition: 0.2s ease all; + + &:hover { + background-color: $main-accent; + } } .documentButtonBar-linker:hover { diff --git a/src/client/views/DocumentButtonBar.tsx b/src/client/views/DocumentButtonBar.tsx index d45531b76..8748b1880 100644 --- a/src/client/views/DocumentButtonBar.tsx +++ b/src/client/views/DocumentButtonBar.tsx @@ -198,7 +198,7 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV const isPinned = targetDoc && Doc.isDocPinned(targetDoc); return !targetDoc ? (null) :
{Doc.isDocPinned(targetDoc) ? "Unpin from presentation" : "Pin to presentation"}
}>
DockedFrameRenderer.PinDoc(targetDoc, isPinned)}> diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index a544c52d2..e9b9be49d 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -553,7 +553,7 @@ export class MainView extends React.Component {
{this.flyoutWidth !== 0 ?
+ style={{ backgroundColor: '#8c8b8b' }}>
- +
: null}
{ title={<>
{this.selectedDoc?._fitToBox ? "Stop Fitting Content" : "Fit Content"}
} placement="top">
{ { button['target-docFilters'] = this.target._docFilters instanceof ObjectField ? ObjectField.MakeCopy(this.target._docFilters as any as ObjectField) : ""; }, }; - @computed get _freeform_commands() { return Doc.UserDoc().noviceMode ? [this._viewCommand, this._saveFilterCommand] : [this._viewCommand, this._saveFilterCommand, this._contentCommand, this._templateCommand, this._narrativeCommand]; } + @computed get _freeform_commands() { return Doc.UserDoc().noviceMode ? [this._viewCommand] : [this._viewCommand, this._saveFilterCommand, this._contentCommand, this._templateCommand, this._narrativeCommand]; } @computed get _stacking_commands() { return Doc.UserDoc().noviceMode ? undefined : [this._contentCommand, this._templateCommand]; } @computed get _masonry_commands() { return Doc.UserDoc().noviceMode ? undefined : [this._contentCommand, this._templateCommand]; } @computed get _schema_commands() { return Doc.UserDoc().noviceMode ? undefined : [this._templateCommand, this._narrativeCommand]; } diff --git a/src/client/views/collections/CollectionTreeView.scss b/src/client/views/collections/CollectionTreeView.scss index 50f0534bd..c9bf82406 100644 --- a/src/client/views/collections/CollectionTreeView.scss +++ b/src/client/views/collections/CollectionTreeView.scss @@ -22,7 +22,7 @@ ul { list-style: none; padding-left: 20px; - margin-bottom: 1px;// otherwise vertical scrollbars may pop up for no apparent reason.... + margin-bottom: 1px; // otherwise vertical scrollbars may pop up for no apparent reason.... } @@ -35,7 +35,7 @@ width: 15px; color: $intermediate-color; margin-top: 3px; - transform: scale(1.3, 1.3); + transform: scale(1.3, 1.3); border: #80808030 1px solid; border-radius: 4px; } @@ -67,8 +67,10 @@ margin-left: 3px; display: none; } + .collectionTreeView-keyHeader:hover { background: #797777; + cursor: pointer; } .collectionTreeView-subtitle { @@ -89,8 +91,10 @@ height: 17px; width: 15px; } + .treeViewItem-openRight:hover { background: #797777; + cursor: pointer; } .treeViewItem-border { @@ -106,10 +110,12 @@ .editableView-container-editing-oneLine { min-width: 15px; } + .documentView-node-topmost { width: unset; } - > svg { + + >svg { display: none; } @@ -119,7 +125,8 @@ .collectionTreeView-keyHeader { display: inherit; } - > svg { + + >svg { display: inherit; } diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.scss b/src/client/views/collections/collectionFreeForm/PropertiesView.scss index aede3842e..9560de2f5 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.scss +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.scss @@ -641,4 +641,15 @@ margin-top: 2px; } } +} + +.editable-title { + border: none; + padding: 6px; + padding-bottom: 2px; + + + &:hover { + border: 0.75px solid rgb(122, 28, 28); + } } \ No newline at end of file diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx index f04c5159c..e2e026ca2 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx @@ -358,13 +358,13 @@ export class PropertiesView extends React.Component { } @computed get editableTitle() { - return StrCast(this.selectedDoc?.title)} - SetValue={this.setTitle} />; + SetValue={this.setTitle} />
; } @undoBatch diff --git a/src/client/views/linking/LinkEditor.scss b/src/client/views/linking/LinkEditor.scss index d26b7920a..7e6999cdc 100644 --- a/src/client/views/linking/LinkEditor.scss +++ b/src/client/views/linking/LinkEditor.scss @@ -89,7 +89,7 @@ /* float: right; */ border-radius: 7px; font-size: 9px; - background-color: black; + background: black; /* padding: 3px; */ padding-top: 4px; padding-left: 7px; @@ -100,6 +100,7 @@ &:hover { cursor: pointer; + background: grey; } } } diff --git a/src/client/views/linking/LinkEditor.tsx b/src/client/views/linking/LinkEditor.tsx index 660afd4b9..75fc8bf85 100644 --- a/src/client/views/linking/LinkEditor.tsx +++ b/src/client/views/linking/LinkEditor.tsx @@ -287,7 +287,7 @@ export class LinkEditor extends React.Component { @observable openDropdown: boolean = false; @observable showInfo: boolean = false; @computed get infoIcon() { if (this.showInfo) { return "chevron-up"; } return "chevron-down"; } - @observable private buttonColor: string = "black"; + @observable private buttonColor: string = ""; //@observable description = this.props.linkDoc.description ? StrCast(this.props.linkDoc.description) : "DESCRIPTION"; @@ -303,7 +303,7 @@ export class LinkEditor extends React.Component { if (LinkManager.currentLink) { LinkManager.currentLink.description = value; this.buttonColor = "rgb(62, 133, 55)"; - setTimeout(action(() => this.buttonColor = "black"), 750); + setTimeout(action(() => this.buttonColor = ""), 750); return true; } } @@ -345,7 +345,7 @@ export class LinkEditor extends React.Component { >
Set
; } diff --git a/src/client/views/nodes/DocumentLinksButton.scss b/src/client/views/nodes/DocumentLinksButton.scss index 97e714cd5..9328fb96b 100644 --- a/src/client/views/nodes/DocumentLinksButton.scss +++ b/src/client/views/nodes/DocumentLinksButton.scss @@ -28,7 +28,13 @@ } .documentLinksButton { - background-color: $link-color; + background-color: black; + + &:hover { + background: $main-accent; + transform: scale(1.05); + cursor: pointer; + } } .documentLinksButton-endLink { diff --git a/src/client/views/nodes/DocumentLinksButton.tsx b/src/client/views/nodes/DocumentLinksButton.tsx index 4713ce447..7899ff0f0 100644 --- a/src/client/views/nodes/DocumentLinksButton.tsx +++ b/src/client/views/nodes/DocumentLinksButton.tsx @@ -181,7 +181,7 @@ export class DocumentLinksButton extends React.Component
- {DocumentLinksButton.StartLink && this.props.InMenu && !this.props.StartLink && - DocumentLinksButton.StartLink !== this.props.View ?
; return (!links.length) && !this.props.AlwaysOn ? (null) : - this.props.InMenu ? + this.props.InMenu && (DocumentLinksButton.StartLink || this.props.StartLink) ?
{title}
}> {linkButton}
: !!!DocumentLinksButton.EditLink && !this.props.InMenu ? diff --git a/src/client/views/nodes/FontIconBox.scss b/src/client/views/nodes/FontIconBox.scss index 5bdafd857..9709e1dbd 100644 --- a/src/client/views/nodes/FontIconBox.scss +++ b/src/client/views/nodes/FontIconBox.scss @@ -15,12 +15,17 @@ .menuButton-round { border-radius: 100%; + background-color: black; .fontIconBox-label { margin-left: -10px; // button padding is 10px; bottom: 0; position: absolute; } + + &:hover { + background-color: #aaaaa3; + } } .menuButton-square { diff --git a/src/client/views/nodes/FontIconBox.tsx b/src/client/views/nodes/FontIconBox.tsx index eff5a4160..c0eb78d98 100644 --- a/src/client/views/nodes/FontIconBox.tsx +++ b/src/client/views/nodes/FontIconBox.tsx @@ -63,16 +63,14 @@ export class FontIconBox extends DocComponent( const color = StrCast(this.layoutDoc.color, this._foregroundColor); const backgroundColor = StrCast(this.layoutDoc._backgroundColor, StrCast(this.rootDoc.backgroundColor, this.props.backgroundColor?.(this.rootDoc))); const shape = StrCast(this.layoutDoc.iconShape, "round"); - const button = <> - - ; + const button = ; return !this.layoutDoc.toolTip ? button : {StrCast(this.layoutDoc.toolTip)}
}> {button} -- cgit v1.2.3-70-g09d2 From 7f8cea1a3b5aa261144abe20ca0d7129be1fb1f5 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Tue, 4 Aug 2020 22:53:44 -0500 Subject: finishing touches on settings --- src/client/util/CurrentUserUtils.ts | 1 + src/client/util/SettingsManager.scss | 71 +++++++------------------- src/client/util/SettingsManager.tsx | 98 ++++++++++++------------------------ src/client/views/MainView.tsx | 4 ++ 4 files changed, 54 insertions(+), 120 deletions(-) (limited to 'src/client/views/MainView.tsx') diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index 8023df8b4..95e02b5fd 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -890,6 +890,7 @@ export class CurrentUserUtils { doc.fontFamily = StrCast(doc.fontFamily, "Arial"); doc.fontColor = StrCast(doc.fontColor, "black"); doc.fontHighlight = StrCast(doc.fontHighlight, ""); + doc.defaultColor = StrCast(doc.defaultColor, "white"); doc["constants-snapThreshold"] = NumCast(doc["constants-snapThreshold"], 10); // doc["constants-dragThreshold"] = NumCast(doc["constants-dragThreshold"], 4); // Utils.DRAG_THRESHOLD = NumCast(doc["constants-dragThreshold"]); diff --git a/src/client/util/SettingsManager.scss b/src/client/util/SettingsManager.scss index 075879198..2a4a4241c 100644 --- a/src/client/util/SettingsManager.scss +++ b/src/client/util/SettingsManager.scss @@ -93,6 +93,10 @@ margin-right: 65px; color: black; border-radius: 5px; + + &:hover{ + cursor: pointer; + } } .modes-playground { @@ -100,6 +104,9 @@ .playground-check { margin-right: 5px; + &:hover{ + cursor: pointer; + } } .playground-text { @@ -112,6 +119,10 @@ margin-top: 2px; margin-right: 25px; + &:hover{ + cursor: pointer; + } + .colorFlyout-button { width: 20px; height: 20px; @@ -151,6 +162,9 @@ font-size: 9; margin-right: 6; border-radius: 5px; + &:hover{ + cursor: pointer; + } } .size-select { @@ -158,6 +172,9 @@ color: black; font-size: 9; border-radius: 5px; + &:hover{ + cursor: pointer; + } } } } @@ -190,10 +207,6 @@ cursor: pointer; } - // .settings-heading { - // letter-spacing: .5em; - // } - .settings-content { background: #e4e4e4; border-radius: 6px; @@ -206,56 +219,6 @@ margin-bottom: 10px; } - // .settings-body { - // display: flex; - // justify-content: space-between; - // margin-top: -10; - - // .settings-type { - // display: flex; - // flex-direction: column; - // flex-basis: 45%; - - // } - - // .settings-content { - // background: whitesmoke; - // border-radius: 6px; - - // // padding-left: 1em; - // // padding-right: 1em; - // // display: flex; - // // flex-direction: column; - // // flex-basis: 70%; - // // justify-content: space-around; - // // text-align: left; - - // ::placeholder { - // color: $intermediate-color; - // } - - // input { - // border-radius: 5px; - // border: none; - // padding: 4px; - // min-width: 100%; - // margin: 2px 0; - // } - - // .error-text { - // color: #C40233; - // } - - // .success-text { - // color: #009F6B; - // } - - // p { - // padding: 0 0 .1em .2em; - // } - - // } - // } .error-text { color: #C40233; diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx index 9282559e2..a12cc2cb6 100644 --- a/src/client/util/SettingsManager.tsx +++ b/src/client/util/SettingsManager.tsx @@ -1,4 +1,4 @@ -import { observable, runInAction, action } from "mobx"; +import { observable, runInAction, action, computed } from "mobx"; import * as React from "react"; import MainViewModal from "../views/MainViewModal"; import { observer } from "mobx-react"; @@ -15,7 +15,7 @@ import GroupManager from "./GroupManager"; import HypothesisAuthenticationManager from "../apis/HypothesisAuthenticationManager"; import GoogleAuthenticationManager from "../apis/GoogleAuthenticationManager"; import { DocServer } from "../DocServer"; -import { BoolCast } from "../../fields/Types"; +import { BoolCast, StrCast, NumCast } from "../../fields/Types"; import { undoBatch } from "./UndoManager"; import { ColorState, SketchPicker } from "react-color"; const higflyout = require("@hig/flyout"); @@ -40,7 +40,7 @@ export default class SettingsManager extends React.Component<{}> { private new_confirm_ref = React.createRef(); - @observable private backgroundColor = "white"; + @computed get backgroundColor() { return Doc.UserDoc().defaultColor; } public open = action(() => { SelectionManager.DeselectAll(); @@ -125,57 +125,25 @@ export default class SettingsManager extends React.Component<{}> { } } + @action + changeFontFamily = (e: any) => { + Doc.UserDoc().fontFamily = e.currentTarget.value; + } + + @action + changeFontSize = (e: any) => { + Doc.UserDoc().fontSize = e.currentTarget.value; + } + @action @undoBatch switchColor = (color: ColorState) => { const val = String(color.hex); - this.backgroundColor = val; + Doc.UserDoc().defaultColor = val; return true; } private get settingsInterface() { - const oldSettings =
-
-

Settings

-
- -
-
-
-
- - - - - - - -
- {this.settingsContent === "password" ? -
- - - - {this.errorText ?
{this.errorText}
: undefined} - {this.successText ?
{this.successText}
: undefined} - - forgot password? - -
- : undefined} - {this.settingsContent === "data" ? -
-

WARNING:
- THIS WILL ERASE ALL YOUR CURRENT DOCUMENTS STORED ON DASH. IF YOU WISH TO PROCEED, CLICK THE BUTTON BELOW.

- -
- : undefined} -
- -
; - const passwordContent =
@@ -220,20 +188,23 @@ export default class SettingsManager extends React.Component<{}> { presetColors={['#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505', '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B', '#FFFFFF', '#f1efeb', 'transparent']} - color={this.backgroundColor} />; + color={StrCast(this.backgroundColor)} />; const colorFlyout =
-
e.stopPropagation()} > - +
; + const fontFamilies: string[] = ["Times New Roman", "Arial", "Georgia", "Comic Sans MS", "Tahoma", "Impact", "Crimson Text"]; + const fontSizes: number[] = [7, 8, 9, 10, 12, 14, 16, 18, 20, 24, 32, 48, 72]; + const preferencesContent =
Background Color
{colorFlyout} @@ -241,25 +212,20 @@ export default class SettingsManager extends React.Component<{}> {
Default Font
; diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index e9b9be49d..bbf36a04f 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -313,6 +313,10 @@ export class MainView extends React.Component { defaultBackgroundColors = (doc: Opt) => { if (this.panelContent === doc?.title) return "lightgrey"; + + if (doc?.type === DocumentType.COL) { + return StrCast(Doc.UserDoc().defaultColor); + } if (this.darkScheme) { switch (doc?.type) { case DocumentType.FONTICON: return "white"; -- cgit v1.2.3-70-g09d2 From 0d6a6991ae39406f80530bcaaa6e5b328bd64b67 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Wed, 5 Aug 2020 12:59:07 -0500 Subject: UI changes and bug fixes found with UV --- src/client/util/CurrentUserUtils.ts | 3 ++- src/client/util/SettingsManager.scss | 20 ++++++++++++---- src/client/util/SettingsManager.tsx | 13 +++++----- src/client/views/MainView.tsx | 7 ++++++ src/client/views/MainViewModal.tsx | 6 +---- src/client/views/PropertiesButtons.tsx | 28 +++++++++++++++++----- src/client/views/collections/CollectionMenu.tsx | 9 +++---- .../collectionFreeForm/PropertiesView.tsx | 3 +-- 8 files changed, 60 insertions(+), 29 deletions(-) (limited to 'src/client/views/MainView.tsx') diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index 95e02b5fd..630952ccf 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -8,7 +8,7 @@ import { Doc, DocListCast, DocListCastAsync, DataSym } from "../../fields/Doc"; import { List } from "../../fields/List"; import { listSpec } from "../../fields/Schema"; import { ScriptField, ComputedField } from "../../fields/ScriptField"; -import { Cast, PromiseValue, StrCast, NumCast } from "../../fields/Types"; +import { Cast, PromiseValue, StrCast, NumCast, BoolCast } from "../../fields/Types"; import { nullAudio } from "../../fields/URLField"; import { DragManager } from "./DragManager"; import { Scripting } from "./Scripting"; @@ -891,6 +891,7 @@ export class CurrentUserUtils { doc.fontColor = StrCast(doc.fontColor, "black"); doc.fontHighlight = StrCast(doc.fontHighlight, ""); doc.defaultColor = StrCast(doc.defaultColor, "white"); + doc.noviceMode = BoolCast(doc.noviceMode, true); doc["constants-snapThreshold"] = NumCast(doc["constants-snapThreshold"], 10); // doc["constants-dragThreshold"] = NumCast(doc["constants-dragThreshold"], 4); // Utils.DRAG_THRESHOLD = NumCast(doc["constants-dragThreshold"]); diff --git a/src/client/util/SettingsManager.scss b/src/client/util/SettingsManager.scss index 2a4a4241c..41bce8a1b 100644 --- a/src/client/util/SettingsManager.scss +++ b/src/client/util/SettingsManager.scss @@ -25,8 +25,15 @@ .settings-title { font-size: 25px; font-weight: bold; + padding-right: 10px; + color: black; +} + +.settings-username { + font-size: 14px; padding-right: 15px; color: black; + margin-top: 10px; } .settings-section { @@ -94,7 +101,7 @@ color: black; border-radius: 5px; - &:hover{ + &:hover { cursor: pointer; } } @@ -104,7 +111,8 @@ .playground-check { margin-right: 5px; - &:hover{ + + &:hover { cursor: pointer; } } @@ -119,7 +127,7 @@ margin-top: 2px; margin-right: 25px; - &:hover{ + &:hover { cursor: pointer; } @@ -162,7 +170,8 @@ font-size: 9; margin-right: 6; border-radius: 5px; - &:hover{ + + &:hover { cursor: pointer; } } @@ -172,7 +181,8 @@ color: black; font-size: 9; border-radius: 5px; - &:hover{ + + &:hover { cursor: pointer; } } diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx index a12cc2cb6..fce28a466 100644 --- a/src/client/util/SettingsManager.tsx +++ b/src/client/util/SettingsManager.tsx @@ -147,9 +147,9 @@ export default class SettingsManager extends React.Component<{}> { const passwordContent =
- - - + + +
{this.errorText ?
{this.errorText}
: undefined} @@ -233,7 +233,9 @@ export default class SettingsManager extends React.Component<{}> { return (
Settings
-
@@ -268,8 +270,7 @@ export default class SettingsManager extends React.Component<{}> { isDisplayed={this.isOpen} interactive={true} closeOnExternalClick={this.close} - width={600} - height={340} + dialogueBoxStyle={{ width: "600px", height: "340px" }} /> ); } diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index bbf36a04f..4bbcddd79 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -315,6 +315,12 @@ export class MainView extends React.Component { if (this.panelContent === doc?.title) return "lightgrey"; if (doc?.type === DocumentType.COL) { + if (doc.title === "Basic Item Creators" || doc.title === "sidebar-tools" + || doc.title === "sidebar-recentlyClosed" || doc.title === "sidebar-catalog" + || doc.title === "Mobile Uploads" || doc.title === "COLLECTION_PROTO" + || doc.title === "Advanced Item Prototypes" || doc.title === "all Creators") { + return "lightgrey"; + } return StrCast(Doc.UserDoc().defaultColor); } if (this.darkScheme) { @@ -450,6 +456,7 @@ export class MainView extends React.Component { ContainingCollectionView={undefined} ContainingCollectionDoc={undefined} relative={true} + forcedBackgroundColor={() => "lightgrey"} />
{this.docButtons}
; diff --git a/src/client/views/MainViewModal.tsx b/src/client/views/MainViewModal.tsx index c7b752b60..19387f619 100644 --- a/src/client/views/MainViewModal.tsx +++ b/src/client/views/MainViewModal.tsx @@ -10,8 +10,6 @@ export interface MainViewOverlayProps { overlayStyle?: React.CSSProperties; dialogueBoxDisplayedOpacity?: number; overlayDisplayedOpacity?: number; - width?: number; - height?: number; closeOnExternalClick?: () => void; // the close method of a MainViewModal, triggered if there is a click on the overlay (closing the modal) } @@ -31,9 +29,7 @@ export default class MainViewModal extends React.Component style={{ borderColor: "black", ...(p.dialogueBoxStyle || {}), - opacity: p.isDisplayed ? dialogueOpacity : 0, - width: this.props.width ? this.props.width : "auto", - height: this.props.height ? this.props.height : "auto" + opacity: p.isDisplayed ? dialogueOpacity : 0 }} >{p.contents}
{ } }}> { switch (this.openHover) { @@ -207,7 +208,7 @@ export class PropertiesButtons extends React.Component<{}, {}> { })()} />
-
Fetch
+
Fetch
; } @@ -226,7 +227,11 @@ export class PropertiesButtons extends React.Component<{}, {}> { />
-
{Doc.isDocPinned(targetDoc) ? "Unpin" : "Pin"}
+
{Doc.isDocPinned(targetDoc) ? "Unpin" : "Pin"}
; } @@ -339,11 +344,16 @@ export class PropertiesButtons extends React.Component<{}, {}> { "Unlock Position" : "Lock Position"}
} placement="top">
{}
-
Position
+
Position
; } @@ -535,13 +545,16 @@ export class PropertiesButtons extends React.Component<{}, {}> { title={<>
{this.selectedDoc?.useClusters ? "Stop Showing Clusters" : "Show Clusters"}
} placement="top">
{}
-
clusters
+
clusters
; } @@ -569,7 +582,10 @@ export class PropertiesButtons extends React.Component<{}, {}> { color={this.selectedDoc?._fitToBox ? "black" : "white"} icon="expand" size="lg" />}
-
{this.selectedDoc?._fitToBox ? "unfit" : "fit"}
+
{this.selectedDoc?._fitToBox ? "unfit" : "fit"}
; } diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx index 511735f2d..6eed4eba1 100644 --- a/src/client/views/collections/CollectionMenu.tsx +++ b/src/client/views/collections/CollectionMenu.tsx @@ -673,15 +673,16 @@ export class CollectionStackingViewChrome extends React.Component key.indexOf("title") >= 0 || key.indexOf("author") >= 0 || key.indexOf("creationDate") >= 0 || key.indexOf("lastModified") >= 0 || - (key[0].toUpperCase() === key[0] && key.substring(0, 3) !== "ACL")); - return keys.filter(key => key.toLowerCase().startsWith(value)); + (key[0].toUpperCase() === key[0] && key.substring(0, 3) !== "ACL" && key !== "UseCors" && key[0] !== "_")); + return keys.filter(key => key.toLowerCase().indexOf(value.toLowerCase()) > -1); } else { const keys = new Set(); docs.forEach(doc => Doc.allKeys(doc).forEach(key => keys.add(key))); const noviceKeys = Array.from(keys).filter(key => key.indexOf("title") >= 0 || key.indexOf("author") >= 0 || key.indexOf("creationDate") >= 0 || - key.indexOf("lastModified") >= 0 || (key[0].toUpperCase() === key[0] && key.substring(0, 3) !== "ACL")); - return noviceKeys.filter(key => key.toLowerCase().startsWith(value)); + key.indexOf("lastModified") >= 0 || (key[0].toUpperCase() === key[0] && + key.substring(0, 3) !== "ACL" && key !== "UseCors" && key[0] !== "_")); + return noviceKeys.filter(key => key.toLowerCase().indexOf(value.toLowerCase()) > -1); } } diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx index a6b1849b1..7f21c63da 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx @@ -161,7 +161,7 @@ export class PropertiesView extends React.Component { doc && Object.keys(doc).forEach(key => !(key in ids) && doc[key] !== ComputedField.undefined && (ids[key] = key)); const rows: JSX.Element[] = []; for (const key of Object.keys(ids).slice().sort()) { - if ((key[0] === key[0].toUpperCase() && key.substring(0, 3) !== "ACL") + if ((key[0] === key[0].toUpperCase() && key.substring(0, 3) !== "ACL" && key !== "UseCors") || key[0] === "#" || key === "author" || key === "creationDate" || key.indexOf("lastModified") !== -1) { @@ -354,7 +354,6 @@ export class PropertiesView extends React.Component { />; } - @undoBatch @action toggleCheckbox = () => { this.layoutFields = !this.layoutFields; -- cgit v1.2.3-70-g09d2 From 94a97864c657a546965df32fa30900600fa8084b Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Wed, 5 Aug 2020 15:42:51 -0500 Subject: UI consistencies --- src/client/views/MainView.scss | 4 +++- src/client/views/MainView.tsx | 7 ++++--- .../views/collections/collectionFreeForm/PropertiesView.scss | 3 ++- src/client/views/collections/collectionFreeForm/PropertiesView.tsx | 1 + 4 files changed, 10 insertions(+), 5 deletions(-) (limited to 'src/client/views/MainView.tsx') diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss index e9e700ba8..388d4b369 100644 --- a/src/client/views/MainView.scss +++ b/src/client/views/MainView.scss @@ -103,7 +103,8 @@ } .mainView-propertiesDragger { - background-color: rgb(140, 139, 139); + //background-color: rgb(140, 139, 139); + background-color: lightgrey; height: 55px; width: 17px; position: absolute; @@ -298,6 +299,7 @@ position: absolute; z-index: 2; touch-action: none; + background-color: lightgrey; cursor: grab; .mainView-libraryHandle-icon { diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 4bbcddd79..a6a33d9f7 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -564,7 +564,8 @@ export class MainView extends React.Component {
{this.flyoutWidth !== 0 ?
+ //style={{ backgroundColor: '#8c8b8b' }} + >
- +
: null}
-
+
} {this.propertiesWidth() < 10 ? (null) : diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.scss b/src/client/views/collections/collectionFreeForm/PropertiesView.scss index 9560de2f5..71b6d3ce9 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.scss +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.scss @@ -596,6 +596,7 @@ display: flex; margin-bottom: 3px; + margin-left: 4px; .arrows-head { @@ -629,7 +630,7 @@ .dashed { display: flex; - margin-left: 74px; + margin-left: 64px; margin-bottom: 6px; .dashed-title { diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx index 8b78a05fe..a67f53cea 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx @@ -267,6 +267,7 @@ export class PropertiesView extends React.Component { bringToFront={returnFalse} ContentScaling={returnOne} dontRegisterView={true} + dropAction={undefined} />
; } else { -- cgit v1.2.3-70-g09d2