From ee3d12fbf6306da958ae6546260921f5fee5553b Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Fri, 24 Jul 2020 16:32:45 -0500 Subject: changing menu layout --- src/client/views/MainView.scss | 121 ++++++++++--------- src/client/views/MainView.tsx | 132 +++++++++------------ .../collectionFreeForm/PropertiesView.scss | 8 +- 3 files changed, 123 insertions(+), 138 deletions(-) (limited to 'src') diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss index 10e7f471b..51548bf58 100644 --- a/src/client/views/MainView.scss +++ b/src/client/views/MainView.scss @@ -156,45 +156,39 @@ .mainView-menuPanel { max-width: 95px; - background-color: #323232; - padding: 20px; - padding-right: 50px; - + background-color: black; + padding: 15px; + /* padding-right: 50px; */ overflow-y: scroll; - overflow-x: clip; + overflow-x: hidden; .mainView-menuPanel-button { - width: 45px; - height: 45px; - padding: 10px; - pointer-events: all; + width: 60px; + padding: 7.5px; touch-action: none; - border-radius: inherit; background: black; - border-radius: 100%; transform-origin: top left; - margin-bottom: 23px; + margin-bottom: 5px; margin-top: 5px; - margin-right: 25px; + border-radius: 8px; .mainView-menuPanel-button-label { - background: rgb(168, 168, 168); - color: black; - margin-left: -13px; + color: white; + margin-left: -6px; border-radius: 8px; - width: 65px; + width: 55px; position: relative; text-align: center; font-size: 9.5px; - margin-top: 4px; + margin-top: 1px; letter-spacing: normal; padding: 3px; - //margin-bottom: 23px; + background-color: inherit; } .mainView-menuPanel-button-icon { - width: 35px; + width: auto; height: 35px; padding: 5px; } @@ -203,50 +197,55 @@ width: 95% !important; height: 95%; } - } - - .mainView-menuPanel-bottomButton { - width: 50px; - height: 50px; - padding: 10px; - pointer-events: all; - touch-action: none; - border-radius: inherit; - background: #323232; - background-color: #323232; - border-radius: 100%; - transform-origin: top left; - margin-bottom: 20px; - margin-top: 5px; - - margin-right: 25px; - - .mainView-menuPanel-bottomButton-label { - background: #323232; - color: white; - margin-left: -10px; - border-radius: 8px; - width: 65px; - position: absolute; - text-align: center; - font-size: 9.5px; - margin-top: 2px; - letter-spacing: normal; - padding: 3px; - //margin-bottom: 23px; - } - .mainView-menuPanel-bottomButton-icon { - width: 50px; - height: 50px; - color: white; - } - - svg { - width: 95% !important; - height: 95%; + &:hover { + background: rgb(61, 61, 61); + cursor: pointer; } } + + // .mainView-menuPanel-bottomButton { + // width: 45px; + // height: 45px; + // padding: 10px; + // pointer-events: all; + // touch-action: none; + // //border-radius: inherit; + // background: black; + // background-color: black; + // //border-radius: 100%; + // transform-origin: top left; + // margin-bottom: 20px; + // margin-top: 5px; + + // margin-right: 25px; + + // .mainView-menuPanel-bottomButton-label { + // background: black; + // color: white; + // margin-left: -10px; + // border-radius: 8px; + // width: 65px; + // position: absolute; + // text-align: center; + // font-size: 9.5px; + // margin-top: 2px; + // letter-spacing: normal; + // padding: 3px; + // //margin-bottom: 23px; + // } + + // .mainView-menuPanel-bottomButton-icon { + // width: 50px; + // height: 50px; + // color: white; + // } + + // svg { + // width: 95% !important; + // height: 95%; + // } + // } } .mainView-searchPanel { diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 4a80f57b3..c08717947 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -71,6 +71,7 @@ import { PropertiesView } from './collections/collectionFreeForm/PropertiesView' import { SelectionManager } from '../util/SelectionManager'; import { PrefetchProxy } from '../../fields/Proxy'; import { DragManager } from '../util/DragManager'; +import { discovery_v1, dialogflow_v2beta1 } from 'googleapis'; @observer export class MainView extends React.Component { @@ -84,7 +85,7 @@ export class MainView extends React.Component { @observable private _panelWidth: number = 0; @observable private _panelHeight: number = 0; @observable private _flyoutTranslate: boolean = false; - @observable public flyoutWidth: number = 275; + @observable public flyoutWidth: number = 0; private get darkScheme() { return BoolCast(Cast(this.userDoc?.activeWorkspace, Doc, null)?.darkScheme); } @computed private get userDoc() { return Doc.UserDoc(); } @@ -377,8 +378,11 @@ export class MainView extends React.Component { } _canClick = false; + + @action onPointerDown = (e: React.PointerEvent) => { if (this._flyoutTranslate) { + this.panelContent = "none"; this._canClick = true; this._flyoutSizeOnDown = e.clientX; document.removeEventListener("pointermove", this.onPointerMove); @@ -494,76 +498,59 @@ export class MainView extends React.Component { @computed get menuPanel() { return
- +
this.selectPanel("workspace")}> + +
Workspace
+
- +
this.selectPanel("catalog")}> + +
Catalog
+
- +
this.selectPanel("deleted")}> + +
Recently Closed
+
- +
- + - + +
Tools
+ - + */} - +
this.selectPanel("help")} > + +
Help
+
- + onClick={() => SettingsManager.Instance.open()}> + +
Settings
+ ; } diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.scss b/src/client/views/collections/collectionFreeForm/PropertiesView.scss index e6bc3f15a..b40a08086 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.scss +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.scss @@ -5,7 +5,7 @@ font-family: "Noto Sans"; cursor: auto; - //overflow-y: scroll; + overflow-y: scroll; .propertiesView-title { background-color: rgb(159, 159, 159); @@ -76,6 +76,7 @@ &:hover { background-color: rgb(158, 158, 158); + cursor: pointer; } } @@ -87,6 +88,7 @@ &:hover { color: rgb(131, 131, 131); + cursor: pointer; } } @@ -124,6 +126,10 @@ border: none; background-color: inherit; width: 75px; + + &:hover { + cursor: pointer; + } } } -- cgit v1.2.3-70-g09d2