aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/views/MainView.scss121
-rw-r--r--src/client/views/MainView.tsx132
-rw-r--r--src/client/views/collections/collectionFreeForm/PropertiesView.scss8
3 files changed, 123 insertions, 138 deletions
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 <div className="mainView-menuPanel">
- <button className="mainView-menuPanel-button"
- onPointerDown={e => this.selectPanel("workspace")}
- style={{
- padding: "5px",
- background: "black",
- boxShadow: "4px 4px 12px black"
- }}>
- <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="desktop" color="white" size="lg" />
- <div className="mainView-menuPanel-button-label"> Workspace </div>
- </button>
+ <div className="mainView-menuPanel-button"
+ style={{ backgroundColor: this.panelContent === "workspace" ? "lightgrey" : "" }}
+ onPointerDown={e => this.selectPanel("workspace")}>
+ <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="desktop"
+ color={this.panelContent === "workspace" ? "black" : "white"} size="lg" />
+ <div className="mainView-menuPanel-button-label"
+ style={{ color: this.panelContent === "workspace" ? "black" : "white" }}> Workspace </div>
+ </div>
- <button className="mainView-menuPanel-button"
- onPointerDown={e => this.selectPanel("catalog")}
- style={{
- padding: "5px",
- background: "black",
- boxShadow: "4px 4px 12px black"
- }}>
- <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="file" color="white" size="lg" />
- <div className="mainView-menuPanel-button-label"> Catalog </div>
- </button>
+ <div className="mainView-menuPanel-button"
+ style={{ backgroundColor: this.panelContent === "catalog" ? "lightgrey" : "" }}
+ onPointerDown={e => this.selectPanel("catalog")}>
+ <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="file"
+ color={this.panelContent === "catalog" ? "black" : "white"} size="lg" />
+ <div className="mainView-menuPanel-button-label"
+ style={{ color: this.panelContent === "catalog" ? "black" : "white" }}> Catalog </div>
+ </div>
- <button className="mainView-menuPanel-button"
- onPointerDown={e => this.selectPanel("deleted")}
- style={{
- padding: "5px",
- background: "black",
- boxShadow: "4px 4px 12px black",
- marginBottom: "30px"
- }}>
- <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="trash-alt" color="white" size="lg" />
- <div className="mainView-menuPanel-button-label"> Recently Closed </div>
- </button>
+ <div className="mainView-menuPanel-button"
+ style={{ backgroundColor: this.panelContent === "deleted" ? "lightgrey" : "" }}
+ onPointerDown={e => this.selectPanel("deleted")}>
+ <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="trash-alt"
+ color={this.panelContent === "deleted" ? "black" : "white"} size="lg" />
+ <div className="mainView-menuPanel-button-label"
+ style={{ color: this.panelContent === "deleted" ? "black" : "white" }}> Recently Closed </div>
+ </div>
- <button className="mainView-menuPanel-button"
- onPointerDown={e => this.selectPanel("upload")}
- style={{
- padding: "5px",
- background: "black",
- boxShadow: "4px 4px 12px black",
- }}>
+ <div className="mainView-menuPanel-button"
+ onPointerDown={e => this.selectPanel("upload")}>
<FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="upload" color="white" size="lg" />
<div className="mainView-menuPanel-button-label"> Import </div>
- </button>
+ </div>
- <button className="mainView-menuPanel-button"
+ <div className="mainView-menuPanel-button"
//onPointerDown={e => this.selectPanel("sharing")}
- onClick={() => GroupManager.Instance.open()}
- style={{
- padding: "5px",
- background: "black",
- boxShadow: "4px 4px 12px black"
- }}>
+ onClick={() => GroupManager.Instance.open()}>
<FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="users" color="white" size="lg" />
<div className="mainView-menuPanel-button-label"> Sharing </div>
- </button>
+ </div>
- <button className="mainView-menuPanel-button"
+ <div className="mainView-menuPanel-button"
onPointerDown={e => this.selectPanel("tools")}
style={{
- padding: "5px",
- background: "black",
- boxShadow: "4px 4px 12px black",
- //marginBottom: "45px"
+ backgroundColor: this.panelContent === "tools" ? "lightgrey" : "",
+ marginBottom: "70px"
}}>
- <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="wrench" color="white" size="lg" />
- <div className="mainView-menuPanel-button-label"> Tools </div>
- </button>
+ <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="wrench"
+ color={this.panelContent === "tools" ? "black" : "white"} size="lg" />
+ <div className="mainView-menuPanel-button-label"
+ style={{ color: this.panelContent === "tools" ? "black" : "white" }}> Tools </div>
+ </div>
- <button className="mainView-menuPanel-button"
+ {/* <button className="mainView-menuPanel-button"
onPointerDown={e => this.selectPanel("search")}
style={{
padding: "5px",
@@ -573,28 +560,21 @@ export class MainView extends React.Component {
}}>
<FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="search" color="white" size="lg" />
<div className="mainView-menuPanel-button-label"> Search </div>
- </button>
+ </button> */}
- <button className="mainView-menuPanel-bottomButton"
- onPointerDown={e => this.selectPanel("help")}
- style={{
- padding: "5px",
- background: "323232",
- }}>
- <FontAwesomeIcon className="mainView-menuPanel-bottomButton-icon" icon="question-circle" color="white" size="lg" />
- <div className="mainView-menuPanel-bottomButton-label"> Help </div>
- </button>
+ <div className="mainView-menuPanel-button"
+ // style={{backgroundColor: this.panelContent= "help" ? "lightgrey" : "black"}}
+ onPointerDown={e => this.selectPanel("help")} >
+ <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="question-circle" color="white" size="lg" />
+ <div className="mainView-menuPanel-button-label"> Help </div>
+ </div>
- <button className="mainView-menuPanel-bottomButton"
+ <div className="mainView-menuPanel-button"
// onPointerDown={e => this.selectPanel("settings")}
- onClick={() => SettingsManager.Instance.open()}
- style={{
- padding: "5px",
- background: "323232",
- }}>
- <FontAwesomeIcon className="mainView-menuPanel-bottomButton-icon" icon="cog" color="white" size="lg" />
- <div className="mainView-menuPanel-bottomButton-label"> Settings </div>
- </button>
+ onClick={() => SettingsManager.Instance.open()}>
+ <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="cog" color="white" size="lg" />
+ <div className="mainView-menuPanel-button-label"> Settings </div>
+ </div>
</div>;
}
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;
+ }
}
}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-08 16:29:08 +0000