aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/views/MainView.scss165
-rw-r--r--src/client/views/MainView.tsx137
-rw-r--r--src/client/views/PropertiesButtons.scss5
-rw-r--r--src/client/views/PropertiesButtons.tsx4
-rw-r--r--src/client/views/nodes/formattedText/FormattedTextBox.tsx2
5 files changed, 162 insertions, 151 deletions
diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss
index f1042ff50..7318d451b 100644
--- a/src/client/views/MainView.scss
+++ b/src/client/views/MainView.scss
@@ -139,7 +139,6 @@
border-left: solid 1px;
z-index: 100000;
cursor: auto;
- overflow-x: visible;
}
.mainView-flyoutContainer {
@@ -156,99 +155,105 @@
.mainView-menuPanel {
- max-width: 95px;
+ max-width: 60px;
background-color: black;
- padding: 15px;
- /* padding-right: 50px; */
- overflow-y: scroll;
- overflow-x: hidden;
+ //overflow-y: scroll;
+ //overflow-x: hidden;
+
.mainView-menuPanel-button {
- width: 60px;
- padding: 7.5px;
+ padding: 7px;
+ padding-left: 7px;
+ width: 100%;
+ .mainView-menuPanel-button-wrap {
+ width: 45px;
+ /* padding: 5px; */
touch-action: none;
background: black;
transform-origin: top left;
- margin-bottom: 5px;
+ /* margin-bottom: 5px; */
margin-top: 5px;
margin-right: 25px;
border-radius: 8px;
+
+ &:hover {
+ background: rgb(61, 61, 61);
+ cursor: pointer;
+ }
+ }
+ }
+
+ .mainView-menuPanel-button-label {
+ color: white;
+ margin-left: px;
+ margin-right: 4px;
+ border-radius: 8px;
+ width: 42px;
+ position: relative;
+ text-align: center;
+ font-size: 8px;
+ margin-top: 1px;
+ letter-spacing: normal;
+ padding: 3px;
+ background-color: inherit;
+ }
- .mainView-menuPanel-button-label {
- color: white;
- margin-left: -6px;
- border-radius: 8px;
- width: 55px;
- position: relative;
- text-align: center;
- font-size: 9.5px;
- margin-top: 1px;
- letter-spacing: normal;
- padding: 3px;
- background-color: inherit;
- }
-
- .mainView-menuPanel-button-icon {
- width: auto;
- height: 35px;
- padding: 5px;
- }
-
- svg {
- width: 95% !important;
- height: 95%;
- }
-
- &:hover {
- background: rgb(61, 61, 61);
- cursor: pointer;
- }
+ .mainView-menuPanel-button-icon {
+ width: auto;
+ height: 35px;
+ padding: 5px;
}
- // .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%;
- // }
- // }
+ svg {
+ width: 95% !important;
+ height: 95%;
+ }
}
+// .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 {
width: 100%;
height: 33px;
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 153df7d9d..e06bfd0b0 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -423,7 +423,8 @@ export class MainView extends React.Component {
doc.dockingConfig ? this.openWorkspace(doc) :
CollectionDockingView.AddRightSplit(doc, libraryPath);
}
- sidebarScreenToLocal = () => new Transform(0, (RichTextMenu.Instance.Pinned ? -35 : 0) + (CollectionMenu.Instance.Pinned ? -35 : 0), 1);
+ sidebarScreenToLocal = () => new Transform(0, (CollectionMenu.Instance.Pinned ? -35 : 0), 1);
+ //sidebarScreenToLocal = () => new Transform(0, (RichTextMenu.Instance.Pinned ? -35 : 0) + (CollectionMenu.Instance.Pinned ? -35 : 0), 1);
mainContainerXf = () => this.sidebarScreenToLocal().translate(0, -this._buttonBarHeight);
@computed get flyout() {
@@ -499,82 +500,85 @@ export class MainView extends React.Component {
@computed get menuPanel() {
return <div className="mainView-menuPanel">
- <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 className="mainView-menuPanel-button" style={{ backgroundColor: this.panelContent === "workspace" ? "lightgrey" : "" }}>
+ <div className="mainView-menuPanel-button-wrap"
+ 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>
</div>
- <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 className="mainView-menuPanel-button" style={{ backgroundColor: this.panelContent === "catalog" ? "lightgrey" : "" }}>
+ <div className="mainView-menuPanel-button-wrap"
+ 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>
</div>
- <div className="mainView-menuPanel-button"
- style={{ backgroundColor: this.panelContent === "deleted" ? "lightgrey" : "" }}
- onPointerDown={e => this.selectPanel("deleted")}>
- <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="archive"
- color={this.panelContent === "deleted" ? "black" : "white"} size="lg" />
- <div className="mainView-menuPanel-button-label"
- style={{ color: this.panelContent === "deleted" ? "black" : "white" }}> Recently Used </div>
+ <div className="mainView-menuPanel-button" style={{ backgroundColor: this.panelContent === "deleted" ? "lightgrey" : "" }}>
+ <div className="mainView-menuPanel-button-wrap"
+ style={{ backgroundColor: this.panelContent === "deleted" ? "lightgrey" : "" }}
+ onPointerDown={e => this.selectPanel("deleted")}>
+ <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="archive"
+ color={this.panelContent === "deleted" ? "black" : "white"} size="lg" />
+ <div className="mainView-menuPanel-button-label"
+ style={{ color: this.panelContent === "deleted" ? "black" : "white" }}> Recently Used </div>
+ </div>
</div>
- <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>
+ <div className="mainView-menuPanel-button">
+ <div className="mainView-menuPanel-button-wrap"
+ 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>
+ </div>
</div>
- <div className="mainView-menuPanel-button"
- //onPointerDown={e => this.selectPanel("sharing")}
- onClick={() => GroupManager.Instance.open()}>
- <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="users" color="white" size="lg" />
- <div className="mainView-menuPanel-button-label"> Sharing </div>
+ <div className="mainView-menuPanel-button">
+ <div className="mainView-menuPanel-button-wrap"
+ //onPointerDown={e => this.selectPanel("sharing")}
+ onClick={() => GroupManager.Instance.open()}>
+ <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="users" color="white" size="lg" />
+ <div className="mainView-menuPanel-button-label"> Sharing </div>
+ </div>
</div>
- <div className="mainView-menuPanel-button"
- onPointerDown={e => this.selectPanel("tools")}
- style={{
- backgroundColor: this.panelContent === "tools" ? "lightgrey" : "",
- marginBottom: "70px"
- }}>
- <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 className="mainView-menuPanel-button" style={{ marginBottom: "110px", backgroundColor: this.panelContent === "tools" ? "lightgrey" : "", }}>
+ <div className="mainView-menuPanel-button-wrap"
+ onPointerDown={e => this.selectPanel("tools")}
+ style={{
+ backgroundColor: this.panelContent === "tools" ? "lightgrey" : "",
+ }}>
+ <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>
</div>
- {/* <button className="mainView-menuPanel-button"
- onPointerDown={e => this.selectPanel("search")}
- style={{
- padding: "5px",
- background: "black",
- boxShadow: "4px 4px 12px black",
- //marginBottom: "45px"
- }}>
- <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="search" color="white" size="lg" />
- <div className="mainView-menuPanel-button-label"> Search </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 className="mainView-menuPanel-button">
+ <div className="mainView-menuPanel-button-wrap"
+ // 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>
</div>
- <div className="mainView-menuPanel-button"
- // onPointerDown={e => this.selectPanel("settings")}
- 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 className="mainView-menuPanel-button">
+ <div className="mainView-menuPanel-button-wrap"
+ // onPointerDown={e => this.selectPanel("settings")}
+ 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>
</div>;
}
@@ -628,7 +632,8 @@ export class MainView extends React.Component {
}
@computed get mainContent() {
- const n = (RichTextMenu.Instance?.Pinned ? 0 : 0) + (CollectionMenu.Instance?.Pinned ? 1 : 0);
+ //const n = (RichTextMenu.Instance?.Pinned ? 1 : 0) + (CollectionMenu.Instance?.Pinned ? 1 : 0);
+ const n = (CollectionMenu.Instance?.Pinned ? 1 : 0);
const height = `calc(100% - ${n * Number(ANTIMODEMENU_HEIGHT.replace("px", ""))}px)`;
const rightFlyout = this.selectedDocumentView ? this._propertiesWidth - 1 : this.propertiesWidth() > 10 ? 151.5 : 0;
@@ -684,7 +689,7 @@ export class MainView extends React.Component {
});
@computed get expandButton() {
- return !this._flyoutTranslate ? (<div className="mainView-expandFlyoutButton" title="Re-attach sidebar" onPointerDown={MainView.expandFlyout}><FontAwesomeIcon icon="chevron-right" color="black" size="lg" /></div>) : (null);
+ return !this._flyoutTranslate ? (<div className="mainView-expandFlyoutButton" title="Re-attach sidebar" onPointerDown={MainView.expandFlyout}></div>) : (null);
}
addButtonDoc = (doc: Doc | Doc[]) => (doc instanceof Doc ? [doc] : doc).reduce((flg: boolean, doc) => flg && Doc.AddDocToList(Doc.UserDoc().dockedBtns as Doc, "data", doc), true);
@@ -799,7 +804,7 @@ export class MainView extends React.Component {
{/* {this.search} */}
<CollectionMenu />
<FormatShapePane />
- {/* <RichTextMenu key="rich" /> */}
+ <div style={{ display: "none" }}><RichTextMenu key="rich" /></div>
{LinkDescriptionPopup.descriptionPopup ? <LinkDescriptionPopup /> : null}
{DocumentLinksButton.EditLink ? <LinkMenu location={DocumentLinksButton.EditLinkLoc} docView={DocumentLinksButton.EditLink} addDocTab={DocumentLinksButton.EditLink.props.addDocTab} changeFlyout={emptyFunction} /> : (null)}
{LinkDocPreview.LinkInfo ? <LinkDocPreview location={LinkDocPreview.LinkInfo.Location} backgroundColor={this.defaultBackgroundColors}
diff --git a/src/client/views/PropertiesButtons.scss b/src/client/views/PropertiesButtons.scss
index c3fea5e29..037b6b155 100644
--- a/src/client/views/PropertiesButtons.scss
+++ b/src/client/views/PropertiesButtons.scss
@@ -22,7 +22,7 @@ $linkGap : 3px;
.propertiesButtons-linkButton-nonempty {
height: 20px;
width: 20px;
- border-radius: 50%;
+ border-radius: 5px;
opacity: 0.9;
pointer-events: auto;
background-color: $dark-color;
@@ -66,13 +66,14 @@ $linkGap : 3px;
pointer-events: auto;
padding-right: 5px;
width: 25px;
+ border-radius: 5px;
}
.propertiesButtons-linker {
height: 20px;
width: 20px;
text-align: center;
- border-radius: 50%;
+ border-radius: 5px;
pointer-events: auto;
color: $dark-color;
border: $dark-color 1px solid;
diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx
index f1cb24425..1f13d0b07 100644
--- a/src/client/views/PropertiesButtons.tsx
+++ b/src/client/views/PropertiesButtons.tsx
@@ -81,7 +81,7 @@ export class PropertiesButtons extends React.Component<{}, {}> {
@computed get selectedDoc() { return this.selectedDocumentView?.rootDoc; }
@computed get dataDoc() { return this.selectedDocumentView?.dataDoc; }
- @observable public onClick = this.selectedDoc?.onClickBehavior ? this.selectedDoc?.onClickBehavior : "nothing";
+ @computed get onClick() { return this.selectedDoc?.onClickBehavior ? this.selectedDoc?.onClickBehavior : "nothing"; }
public startPullOutcome = action((success: boolean) => {
if (!this._pullAnimating) {
@@ -379,7 +379,7 @@ export class PropertiesButtons extends React.Component<{}, {}> {
@action
handleOptionChange = (e: any) => {
const value = e.target.value;
- this.onClick = e.target.value;
+ this.selectedDoc?.onClickBehavior = e.target.value;
if (value === "nothing") {
this.selectedDocumentView?.noOnClick;
} else if (value === "enterPortal") {
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
index 6b6fc5da2..974dabd5c 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
@@ -1268,7 +1268,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp
this.doLinkOnDeselect();
// move the richtextmenu offscreen
- if (!RichTextMenu.Instance.Pinned) RichTextMenu.Instance.delayHide();
+ //if (!RichTextMenu.Instance.Pinned) RichTextMenu.Instance.delayHide();
}
_lastTimedMark: Mark | undefined = undefined;
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-09 17:46:16 +0000