aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/Utils.ts4
-rw-r--r--src/client/views/GlobalKeyHandler.ts1
-rw-r--r--src/client/views/MainView.scss55
-rw-r--r--src/client/views/MainView.tsx201
-rw-r--r--src/client/views/PropertiesView.scss4
-rw-r--r--src/client/views/PropertiesView.tsx5
-rw-r--r--src/client/views/globalCssVariables.scss6
-rw-r--r--src/client/views/globalCssVariables.scss.d.ts1
-rw-r--r--src/client/views/search/SearchBox.scss442
-rw-r--r--src/client/views/search/SearchBox.tsx42
10 files changed, 248 insertions, 513 deletions
diff --git a/src/Utils.ts b/src/Utils.ts
index 5b5a06839..6582e43ef 100644
--- a/src/Utils.ts
+++ b/src/Utils.ts
@@ -549,8 +549,8 @@ export function setupMoveUpEvents(
target: object,
e: React.PointerEvent,
moveEvent: (e: PointerEvent, down: number[], delta: number[]) => boolean,
- upEvent: (e: PointerEvent, movement: number[]) => void,
- clickEvent: (e: PointerEvent, doubleTap?: boolean) => void,
+ upEvent: (e: PointerEvent, movement: number[]) => any,
+ clickEvent: (e: PointerEvent, doubleTap?: boolean) => any,
stopPropagation: boolean = true,
stopMovePropagation: boolean = true
) {
diff --git a/src/client/views/GlobalKeyHandler.ts b/src/client/views/GlobalKeyHandler.ts
index 40353b1b7..a79973aee 100644
--- a/src/client/views/GlobalKeyHandler.ts
+++ b/src/client/views/GlobalKeyHandler.ts
@@ -193,7 +193,6 @@ export class KeyManager {
break;
case "t":
PromiseValue(Cast(Doc.UserDoc()["tabs-button-tools"], Doc)).then(pv => pv && (pv.onClick as ScriptField).script.run({ this: pv }));
- MainView.Instance.flyoutWidth = MainView.Instance.flyoutWidth === 240 ? 0 : 240;
break;
case "f":
SearchBox.Instance._searchFullDB = "My Stuff";
diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss
index 6cec5995c..43264d2e0 100644
--- a/src/client/views/MainView.scss
+++ b/src/client/views/MainView.scss
@@ -1,6 +1,7 @@
@import "globalCssVariables";
@import "nodeModuleOverrides";
+
.dash-tooltip {
font-size: 11px;
padding: 2px;
@@ -14,11 +15,15 @@
margin-top: 10px;
}
+.mainContent-div-flyout,
.mainContent-div {
position: relative;
width: 100%;
height: 100%;
}
+.mainContent-div-flyout {
+ left: calc(-1 * var(--flyoutHandleWidth));
+}
// add nodes menu. Note that the + button is actually an input label, not an actual button.
.mainView-docButtons {
@@ -116,7 +121,10 @@
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
border-right: unset;
- z-index: 2;
+ z-index: 1;
+ display: flex;
+ align-items: center;
+ padding: 4px;
.mainView-propertiesDragger-icon {
width: 10px;
@@ -158,16 +166,26 @@
background: lightgrey;
}
}
+ .propertiesView {
+ right: 0;
+ position: absolute;
+ z-index: 2;
+ }
}
.mainView-menuPanel {
-
- width: 60px;
+ min-width: var(--menuPanelWidth);
background-color: #121721;
height: calc(100% - $searchpanel-height);
//overflow-y: scroll;
//overflow-x: hidden;
+ .collectionStackingView {
+ scrollbar-width: none;
+ }
+ ::-webkit-scrollbar {
+ width:0;
+ }
.mainView-menuPanel-button {
padding: 7px;
@@ -274,7 +292,7 @@
.mainView-libraryFlyout {
height: 100%;
width: 100%;
- position: absolute;
+ position: relative;
display: flex;
flex-direction: column;
z-index: 2;
@@ -296,39 +314,26 @@
}
}
.mainView-libraryFlyout-out {
- transition: width .5s;
+ transition: width .25s;
box-shadow: rgb(156, 147, 150) 0.2vw 0.2vw 0.2vw;
}
-.mainView-expandFlyoutButton {
- position: absolute;
- top: 120px;
- right: 55px;
- cursor: pointer;
-}
.mainView-libraryHandle {
- width: 28px;
- left: calc(100% - 10px);
+ width: var(--flyoutHandleWidth);
height: 55px;
top: 50%;
+ left: -10px;
border: 1px solid black;
border-radius: 8px;
- position: absolute;
- z-index: 2;
+ position: relative;
+ z-index: 1;
touch-action: none;
background-color: lightgrey;
cursor: grab;
-
- .mainView-libraryDragger {
- width: 100%;
- position: absolute;
- }
- .mainView-libraryDragger-out {
- width: 3vw;
- position: fixed;
- top: 0;
- }
+ display: flex;
+ align-items: center;
+ padding: 12px;
.mainView-libraryHandle-icon {
width: 10px;
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 52c598d7d..d30179f1c 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -39,7 +39,7 @@ import { DictationOverlay } from './DictationOverlay';
import { DocumentDecorations } from './DocumentDecorations';
import { FormatShapePane } from "./FormatShapePane";
import { GestureOverlay } from './GestureOverlay';
-import { SEARCH_PANEL_HEIGHT } from './globalCssVariables.scss';
+import { SEARCH_PANEL_HEIGHT, MENU_PANEL_WIDTH } from './globalCssVariables.scss';
import { KeyManager } from './GlobalKeyHandler';
import { LinkMenu } from './linking/LinkMenu';
import "./MainView.scss";
@@ -61,17 +61,15 @@ import { SearchBox } from './search/SearchBox';
@observer
export class MainView extends React.Component {
public static Instance: MainView;
- private _buttonBarHeight = 36;
private _docBtnRef = React.createRef<HTMLDivElement>();
private _mainViewRef = React.createRef<HTMLDivElement>();
private _lastButton: Doc | undefined;
@observable private _panelWidth: number = 0;
@observable private _panelHeight: number = 0;
- @observable private _flyoutTranslate: boolean = false;
- @observable private _sidebarContent: any = this.userDoc?.sidebar;
@observable private _panelContent: string = "none";
- @observable public flyoutWidth: number = 0;
+ @observable private _sidebarContent: any = this.userDoc?.sidebar;
+ @observable private _flyoutWidth: number = 0;
@computed private get topOffset() { return (CollectionMenu.Instance?.Pinned ? 35 : 0) + Number(SEARCH_PANEL_HEIGHT.replace("px", "")); }
@computed private get userDoc() { return Doc.UserDoc(); }
@@ -79,6 +77,7 @@ export class MainView extends React.Component {
@computed private get mainContainer() { return this.userDoc ? CurrentUserUtils.ActiveDashboard : CurrentUserUtils.GuestDashboard; }
@computed public get mainFreeform(): Opt<Doc> { return (docs => (docs && docs.length > 1) ? docs[1] : undefined)(DocListCast(this.mainContainer!.data)); }
+ menuPanelWidth = () => Number(MENU_PANEL_WIDTH.replace("px", ""));
propertiesWidth = () => Math.max(0, Math.min(this._panelWidth - 50, CurrentUserUtils.propertiesWidth || 0));
componentDidMount() {
@@ -165,7 +164,7 @@ export class MainView extends React.Component {
}
if (SearchBox.Instance._searchbarOpen) {
const check = targets.some((thing) =>
- (thing.className === "collectionSchemaView-searchContainer" || (thing as any)?.dataset["icon"] === "filter" ||
+ (thing.className === "collectionSchemaView-searchContainer" || (thing as any)?.dataset.icon === "filter" ||
thing.className === "collectionSchema-header-menuOptions"));
!check && SearchBox.Instance.resetSearch(true);
}
@@ -221,16 +220,9 @@ export class MainView extends React.Component {
e.preventDefault();
e.stopPropagation();
}
-
- @action
- onResize = (r: any) => {
- this._panelWidth = r.offset.width;
- this._panelHeight = r.offset.height;
- }
-
getPWidth = () => this._panelWidth - this.propertiesWidth();
getPHeight = () => this._panelHeight;
- getContentsHeight = () => this._panelHeight - this._buttonBarHeight;
+ getContentsHeight = () => this._panelHeight - Number(SEARCH_PANEL_HEIGHT.replace("px", ""));
defaultBackgroundColors = (doc: Opt<Doc>, renderDepth: number) => {
if (doc?.type === DocumentType.COL) {
@@ -292,39 +284,29 @@ export class MainView extends React.Component {
@computed get dockingContent() {
TraceMobx();
- const width = this.flyoutWidth + this.propertiesWidth();
- return <div className="mainContent-div" onDrop={this.onDrop} style={{ width: `calc(100% - ${width}px)`, height: "100%" }}>
+ return <div className={`mainContent-div${this._flyoutWidth ? "-flyout" : ""}`} onDrop={this.onDrop}
+ style={{ minWidth: `calc(100% - ${this._flyoutWidth + this.menuPanelWidth() + this.propertiesWidth()}px)`, width: `calc(100% - ${this._flyoutWidth + this.menuPanelWidth() + this.propertiesWidth()}px)` }}>
{!this.mainContainer ? (null) : this.mainDocView}
</div>;
}
@action
onPropertiesPointerDown = (e: React.PointerEvent) => {
- setupMoveUpEvents(this, e, action((e: PointerEvent, down: number[], delta: number[]) => {
- CurrentUserUtils.propertiesWidth = this._panelWidth - e.clientX;
- return false;
- }), returnFalse, action(() => CurrentUserUtils.propertiesWidth = this.propertiesWidth() < 15 ? Math.min(this._panelWidth - 50, 250) : 0), false);
+ setupMoveUpEvents(this, e,
+ action(e => (CurrentUserUtils.propertiesWidth = Math.max(0, this._panelWidth - e.clientX)) ? false : false),
+ action(() => CurrentUserUtils.propertiesWidth < 5 && (CurrentUserUtils.propertiesWidth = 0)),
+ action(() => CurrentUserUtils.propertiesWidth = this.propertiesWidth() < 15 ? Math.min(this._panelWidth - 50, 250) : 0), false);
}
@action
onFlyoutPointerDown = (e: React.PointerEvent) => {
- if (this._flyoutTranslate) {
- setupMoveUpEvents(this, e, action((e: PointerEvent) => {
- this.flyoutWidth = Math.max(e.clientX - 58, 0);
- if (this.flyoutWidth < 5) {
- this._panelContent = "none";
- this._lastButton && (this._lastButton.color = "white");
- this._lastButton && (this._lastButton._backgroundColor = "");
- }
- return false;
- }), emptyFunction, action(() => {
- if (this.flyoutWidth < 15) this.expandFlyout();
- else this.closeFlyout();
- }));
- }
+ setupMoveUpEvents(this, e,
+ action(e => (this._flyoutWidth = Math.max(e.clientX - 58, 0)) ? false : false),
+ () => this._flyoutWidth < 5 && this.closeFlyout(),
+ this.toggleFlyout);
}
- flyoutWidthFunc = () => this.flyoutWidth;
+ flyoutWidthFunc = () => this._flyoutWidth;
addDocTabFunc = (doc: Doc, where: string, libraryPath?: Doc[]): boolean => {
return where === "close" ? CollectionDockingView.CloseSplit(doc) :
doc.dockingConfig ? CurrentUserUtils.openDashboard(Doc.UserDoc(), doc) : CollectionDockingView.AddSplit(doc, "right");
@@ -333,41 +315,41 @@ export class MainView extends React.Component {
mainContainerXf = () => this.sidebarScreenToLocal().translate(-58, 0);
@computed get flyout() {
- if (!this._sidebarContent) return null;
- return <div className="mainView-libraryFlyout">
- <div className="mainView-contentArea">
- <DocumentView
- Document={this._sidebarContent}
- DataDoc={undefined}
- LibraryPath={emptyPath}
- addDocument={undefined}
- addDocTab={this.addDocTabFunc}
- pinToPres={emptyFunction}
- NativeHeight={returnZero}
- NativeWidth={returnZero}
- rootSelected={returnTrue}
- removeDocument={returnFalse}
- onClick={undefined}
- ScreenToLocalTransform={this.mainContainerXf}
- ContentScaling={returnOne}
- PanelWidth={this.flyoutWidthFunc}
- PanelHeight={this.getContentsHeight}
- renderDepth={0}
- focus={emptyFunction}
- backgroundColor={this.defaultBackgroundColors}
- parentActive={returnTrue}
- whenActiveChanged={emptyFunction}
- bringToFront={emptyFunction}
- docFilters={returnEmptyFilter}
- searchFilterDocs={returnEmptyDoclist}
- ContainingCollectionView={undefined}
- ContainingCollectionDoc={undefined}
- relative={true}
- forcedBackgroundColor={() => "lightgrey"}
- />
- </div>
- {this.docButtons}
- </div>;
+ return !this._sidebarContent || !this._flyoutWidth ? (null) :
+ <div className={`mainView-libraryFlyout${this._flyoutWidth ? "" : "-out"}`} style={{ minWidth: this._flyoutWidth, width: this._flyoutWidth }} >
+ <div className="mainView-contentArea">
+ <DocumentView
+ Document={this._sidebarContent}
+ DataDoc={undefined}
+ LibraryPath={emptyPath}
+ addDocument={undefined}
+ addDocTab={this.addDocTabFunc}
+ pinToPres={emptyFunction}
+ NativeHeight={returnZero}
+ NativeWidth={returnZero}
+ rootSelected={returnTrue}
+ removeDocument={returnFalse}
+ onClick={undefined}
+ ScreenToLocalTransform={this.mainContainerXf}
+ ContentScaling={returnOne}
+ PanelWidth={this.flyoutWidthFunc}
+ PanelHeight={this.getContentsHeight}
+ renderDepth={0}
+ focus={emptyFunction}
+ backgroundColor={this.defaultBackgroundColors}
+ parentActive={returnTrue}
+ whenActiveChanged={emptyFunction}
+ bringToFront={emptyFunction}
+ docFilters={returnEmptyFilter}
+ searchFilterDocs={returnEmptyDoclist}
+ ContainingCollectionView={undefined}
+ ContainingCollectionDoc={undefined}
+ relative={true}
+ forcedBackgroundColor={() => "lightgrey"}
+ />
+ </div>
+ {this.docButtons}
+ </div>;
}
@computed get menuPanel() {
@@ -386,7 +368,7 @@ export class MainView extends React.Component {
onClick={undefined}
ScreenToLocalTransform={this.sidebarScreenToLocal}
ContentScaling={returnOne}
- PanelWidth={() => 60}
+ PanelWidth={this.menuPanelWidth}
PanelHeight={this.getContentsHeight}
renderDepth={0}
focus={emptyFunction}
@@ -404,34 +386,22 @@ export class MainView extends React.Component {
</div>;
}
-
- @action
- closeFlyout = () => {
- this._lastButton && (this._lastButton.color = "white");
- this._lastButton && (this._lastButton._backgroundColor = "");
- this._panelContent = "none";
- this.flyoutWidth = 0;
- }
-
@action
selectMenu = (button: Doc) => {
const title = StrCast(Doc.GetProto(button).title);
- this._lastButton && (this._lastButton.color = "white");
- this._lastButton && (this._lastButton._backgroundColor = "");
- if (this._panelContent === title && this.flyoutWidth !== 0) {
- this._panelContent = "none";
- this.flyoutWidth = 0;
+ if (this._panelContent === title && this._flyoutWidth) {
+ this.closeFlyout();
} else {
switch (this._panelContent = title) {
case "Settings":
SettingsManager.Instance.open();
- this.flyoutWidth = 0;
+ this.closeFlyout();
break;
case "Catalog":
SearchBox.Instance._searchFullDB = "My Stuff";
SearchBox.Instance.newsearchstring = "";
SearchBox.Instance.enter(undefined);
- this.flyoutWidth = 0;
+ this.closeFlyout();
break;
default:
this._sidebarContent.proto = button.target as any;
@@ -446,38 +416,26 @@ export class MainView extends React.Component {
@computed get propertiesView() {
TraceMobx();
- return <div className="mainView-propertiesView">
- <PropertiesView
- width={this.propertiesWidth()}
- height={this.getContentsHeight()}
- renderDepth={1}
- ScreenToLocalTransform={Transform.Identity}
- onDown={action(() => CurrentUserUtils.propertiesWidth = 0)} />
- </div>;
+ return <PropertiesView
+ width={this.propertiesWidth()}
+ height={this.getContentsHeight()}
+ renderDepth={1}
+ ScreenToLocalTransform={Transform.Identity} />;
}
@computed get mainInnerContent() {
return <>
{this.menuPanel}
<div className="mainView-innerContent" >
- <div className="mainView-flyoutContainer" style={{ width: this.flyoutWidth }}>
- {this.flyoutWidth === 0 ? (null) :
- <div className="mainView-libraryHandle" onPointerDown={this.onFlyoutPointerDown} >
- <span className={`mainView-libraryDragger${this._flyoutTranslate ? "" : "-out"}`} />
- <div className="mainview-libraryHandle-icon">
- <FontAwesomeIcon icon="chevron-left" color="black" size="sm" />
- </div>
- </div>}
- <div className={`mainView-libraryFlyout${this._flyoutTranslate ? "" : "-out"}`} >
- {this.flyout}
- {this.expandButton}
- </div>
+ {this.flyout}
+ <div className="mainView-libraryHandle" style={{ display: !this._flyoutWidth ? "none" : undefined }} onPointerDown={this.onFlyoutPointerDown} >
+ <FontAwesomeIcon icon="chevron-left" color="black" size="sm" />
</div>
+
{this.dockingContent}
+
<div className="mainView-propertiesDragger" onPointerDown={this.onPropertiesPointerDown} style={{ right: this.propertiesWidth() - 1 }}>
- <div className="mainView-propertiesDragger-icon">
- <FontAwesomeIcon icon={this.propertiesWidth() < 10 ? "chevron-left" : "chevron-right"} color="black" size="sm" />
- </div>
+ <FontAwesomeIcon icon={this.propertiesWidth() < 10 ? "chevron-left" : "chevron-right"} color="black" size="sm" />
</div>
{this.propertiesWidth() < 10 ? (null) : this.propertiesView}
</div>
@@ -489,12 +447,15 @@ export class MainView extends React.Component {
const pinned = FormatShapePane.Instance?.Pinned;
const innerContent = this.mainInnerContent;
return !this.userDoc ? (null) : (
- <Measure offset onResize={this.onResize}>
+ <Measure offset onResize={action((r: any) => {
+ this._panelWidth = r.offset.width;
+ this._panelHeight = r.offset.height;
+ })}>
{({ measureRef }) =>
<div className="mainView-mainContent" ref={measureRef} style={{
color: this.darkScheme ? "rgb(205,205,205)" : "black",
height,
- width: pinned ? `calc(100% - 200px)` : "100%"
+ width: pinned ? `calc(100% - 200px)` : "100%",
}} >
{innerContent}
</div>
@@ -502,15 +463,15 @@ export class MainView extends React.Component {
</Measure>);
}
- expandFlyout = action(() => {
- this._flyoutTranslate = true;
- this.flyoutWidth = (this.flyoutWidth || 250);
+ expandFlyout = action(() => this._flyoutWidth = (this._flyoutWidth || 250));
+ toggleFlyout = action(() => this._flyoutWidth < 15 ? this.expandFlyout() : this.closeFlyout());
+ closeFlyout = action(() => {
+ this._lastButton && (this._lastButton.color = "white");
+ this._lastButton && (this._lastButton._backgroundColor = "");
+ this._panelContent = "none";
+ this._flyoutWidth = 0;
});
- @computed get expandButton() {
- return !this._flyoutTranslate ? (<div className="mainView-expandFlyoutButton" title="Re-attach sidebar" onPointerDown={this.expandFlyout}></div>) : (null);
- }
-
addButtonDoc = (doc: Doc | Doc[]) => (doc instanceof Doc ? [doc] : doc).reduce((flg: boolean, doc) => {
const ret = flg && Doc.AddDocToList(Doc.UserDoc().dockedBtns as Doc, "data", doc);
ret && (doc._stayInCollection = undefined);
@@ -728,7 +689,7 @@ export class MainView extends React.Component {
</div>;
</span>, ele);
- var success = false;
+ let success = false;
const onSuccess = () => {
success = true;
clearTimeout(interval);
diff --git a/src/client/views/PropertiesView.scss b/src/client/views/PropertiesView.scss
index 254afeb0a..80f116029 100644
--- a/src/client/views/PropertiesView.scss
+++ b/src/client/views/PropertiesView.scss
@@ -6,7 +6,7 @@
cursor: auto;
overflow-x: hidden;
- overflow-y: scroll;
+ overflow-y: auto;
.propertiesView-title {
background-color: rgb(159, 159, 159);
@@ -271,7 +271,7 @@
// display: inline-table;
background-color: #ececec;
max-height: 130px;
- overflow-y: scroll;
+ overflow-y: auto;
width: 92%;
.propertiesView-sharingTable-item {
diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx
index 792db3e85..2df367502 100644
--- a/src/client/views/PropertiesView.tsx
+++ b/src/client/views/PropertiesView.tsx
@@ -37,7 +37,6 @@ interface PropertiesViewProps {
height: number;
renderDepth: number;
ScreenToLocalTransform: () => Transform;
- onDown: (event: any) => void;
}
@observer
@@ -867,13 +866,11 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
if (this.selectedDoc && !this.isPres) {
return <div className="propertiesView" style={{
width: this.props.width,
+ minWidth: this.props.width
//overflowY: this.scrolling ? "scroll" : "visible"
}} >
<div className="propertiesView-title" style={{ width: this.props.width }}>
Properties
- {/* <div className="propertiesView-title-icon" onPointerDown={this.props.onDown}>
- <FontAwesomeIcon icon="times" color="black" size="sm" />
- </div> */}
</div>
<div className="propertiesView-name">
{this.editableTitle}
diff --git a/src/client/views/globalCssVariables.scss b/src/client/views/globalCssVariables.scss
index 70a7946ba..d0c90edcb 100644
--- a/src/client/views/globalCssVariables.scss
+++ b/src/client/views/globalCssVariables.scss
@@ -37,6 +37,11 @@ $COLLECTION_BORDER_WIDTH: 1;
$MINIMIZED_ICON_SIZE:25;
$MAX_ROW_HEIGHT: 44px;
$DFLT_IMAGE_NATIVE_DIM: 900px;
+$MENU_PANEL_WIDTH: 60px;
+:root {
+ --flyoutHandleWidth: 28px;
+ --menuPanelWidth: 60px;
+}
:export {
contextMenuZindex: $contextMenu-zindex;
@@ -47,4 +52,5 @@ $DFLT_IMAGE_NATIVE_DIM: 900px;
ANTIMODEMENU_HEIGHT: $antimodemenu-height;
SEARCH_PANEL_HEIGHT: $searchpanel-height;
DFLT_IMAGE_NATIVE_DIM: $DFLT_IMAGE_NATIVE_DIM;
+ MENU_PANEL_WIDTH: $MENU_PANEL_WIDTH;
} \ No newline at end of file
diff --git a/src/client/views/globalCssVariables.scss.d.ts b/src/client/views/globalCssVariables.scss.d.ts
index 531b38d68..fb3a327d0 100644
--- a/src/client/views/globalCssVariables.scss.d.ts
+++ b/src/client/views/globalCssVariables.scss.d.ts
@@ -8,6 +8,7 @@ interface IGlobalScss {
ANTIMODEMENU_HEIGHT: string;
SEARCH_PANEL_HEIGHT: string;
DFLT_IMAGE_NATIVE_DIM: string;
+ MENU_PANEL_WIDTH: string;
}
declare const globalCssVariables: IGlobalScss;
diff --git a/src/client/views/search/SearchBox.scss b/src/client/views/search/SearchBox.scss
index aa5180c96..13d4a6d5a 100644
--- a/src/client/views/search/SearchBox.scss
+++ b/src/client/views/search/SearchBox.scss
@@ -15,120 +15,123 @@
overflow: visible;
z-index: 10000;
- .searchBox-lozenge-user,
- .searchBox-lozenge-dashboard,
- .searchBox-lozenge {
- background-color: #313131;
- border-radius: 5px;
- height: 18px;
- padding: 4px;
- box-shadow: lightgrey 0.15em 0.15em 0.1em;
- margin: 2px;
- margin-bottom: 4px;
- border-top: dimgrey 1px solid;
- border-left: dimgrey 1px solid;
+ .searchBox-bar {
+ height: $searchpanel-height;
display: flex;
- .searchBox-logoff,
- .searchBox-dashboards {
- border-radius: 3px;
- background: olivedrab;
- color: white;
- position: relative;
- display: none;
- margin-left: 3px;
- padding-left: 2px;
- padding-right: 2px;
- padding-bottom: 11px;
- cursor: default;
- }
- .searchBox-logoff {
- background: red;
- }
+ justify-content: center;
+ align-items: center;
+ background-color: black;
- .searchBox-dashSelect{
- background-color: black;
- color: white;
- font-size: 9;
- margin-right: 6;
- border-radius: 5px;
- position: relative;
- height: 15px;
- transform: translate(0,-3px);
+ .searchBox-lozenges {
+ position: absolute;
+ left: 15;
+ display: flex;
- &:hover {
- cursor: pointer;
+ .searchBox-lozenge-user,
+ .searchBox-lozenge-dashboard,
+ .searchBox-lozenge {
+ background-color: #313131;
+ border-radius: 5px;
+ height: 18px;
+ padding: 4px;
+ box-shadow: lightgrey 0.15em 0.15em 0.1em;
+ margin: 2px;
+ margin-bottom: 4px;
+ border-top: dimgrey 1px solid;
+ border-left: dimgrey 1px solid;
+ display: flex;
+ .searchBox-logoff,
+ .searchBox-dashboards {
+ border-radius: 3px;
+ background: olivedrab;
+ color: white;
+ position: relative;
+ display: none;
+ margin-left: 3px;
+ padding-left: 2px;
+ padding-right: 2px;
+ padding-bottom: 11px;
+ cursor: default;
+ }
+ .searchBox-logoff {
+ background: red;
+ }
+
+ .searchBox-dashSelect{
+ background-color: black;
+ color: white;
+ font-size: 9;
+ margin-right: 6;
+ border-radius: 5px;
+ position: relative;
+ height: 15px;
+ transform: translate(0,-3px);
+
+ &:hover {
+ cursor: pointer;
+ }
+ }
+ }
+ .searchBox-lozenge-user:hover {
+ .searchBox-logoff {
+ display:inline-block;
+ }
+ }
+ .searchBox-lozenge-dashboard:hover {
+ .searchBox-dashboards {
+ display:inline-block;
+ }
}
}
- }
- .searchBox-lozenge-user:hover {
- .searchBox-logoff {
- display:inline-block;
- }
- }
- .searchBox-lozenge-dashboard:hover {
- .searchBox-dashboards {
- display:inline-block;
- }
- }
-}
-
-.searchBox-bar {
- height: 32px;
- display: flex;
- justify-content: center;
- align-items: center;
- background-color: black;
- .searchBox-barChild {
-
- &.searchBox-collection {
- flex: 0 1 auto;
- margin-left: 2px;
- margin-right: 2px
- }
-
- &.searchBox-input {
- margin:5px;
- border-radius:20px;
- border:black;
- display: block;
- width: 130px;
- -webkit-transition: width 0.4s;
- transition: width 0.4s;
- align-self: stretch;
- outline:none;
+ .searchBox-query {
+ position: relative;
+ display: flex;
+ width: 450;
}
+ .searchBox-barChild {
- .searchBox-input:focus {
- width: 500px;
- outline:none;
- }
+ &.searchBox-collection {
+ flex: 0 1 auto;
+ margin-left: 2px;
+ margin-right: 2px
+ }
- &.searchBox-filter {
- align-self: stretch;
- button{
- transform:none;
+ &.searchBox-input {
+ margin:5px;
+ border-radius:20px;
+ border:black;
+ display: block;
+ width: 130px;
+ -webkit-transition: width 0.4s;
+ transition: width 0.4s;
+ align-self: stretch;
+ outline:none;
+ &:focus {
+ width: 500px;
+ outline:none;
+ }
}
- button:hover{
- transform:none;
+ &.searchBox-filter {
+ align-self: stretch;
+ button{
+ transform:none;
+ &:hover {
+ transform: none;
+ }
+ }
}
- }
- &.searchBox-submit {
- margin-left: 2px;
- margin-right: 2px
- }
+ &.searchBox-submit {
+ margin-left: 2px;
+ margin-right: 2px
+ }
- &.searchBox-close {
- color: $light-color;
- max-height: 32px;
+ &.searchBox-close {
+ color: $light-color;
+ max-height: $searchpanel-height;
+ }
}
- }
-}
-
-.searchBox-quickFilter {
- width: 100%;
- height: 40px;
- margin-top: 10px;
+ }
}
.searchBox-results {
@@ -149,241 +152,4 @@
text-align: left;
font-weight: bold;
}
-}
-
-.filter-form {
- position: relative;
- background: #121721;
- flex-direction: column;
- transform-origin: top;
- transition: height 0.3s ease, display 0.6s ease, overflow 0.6s ease;
- height:0px;
- overflow:hidden;
-
-
- .filter-header {
- //display: flex;
- position: relative;
- //flex-wrap:wrap;
- right: 1px;
- color: grey;
- //flex-direction: row-reverse;
- transform-origin: top;
- //justify-content: space-evenly;
- margin-bottom: 5px;
- overflow:hidden;
- transition:height 0.3s ease-out;
-
-
-
- .filter-item {
- position: relative;
- border:1px solid grey;
- border-radius: 16px;
-
- }
- }
-
- .filter-body {
- position: relative;
- right: 1px;
- color: grey;
- transform-origin: top;
- border-top: 0px;
-
- overflow:hidden;
- transition:height 0.3s ease-out;
- height:0px;
-
- }
- .filter-key {
- position: relative;
- right: 1px;
- color: grey;
- transform-origin: top;
- border-top: 0px;
- overflow:hidden;
- transition:height 0.3s ease-out;
- height:0px;
-
- // .filter-keybar {
- // display: flex;
- // flex-wrap: wrap;
- // justify-content: space-evenly;
- // height: auto;
- // width: 100%;
- // flex-direction: row-reverse;
- // margin-top:5px;
-
- // .filter-item {
- // position: relative;
- // border:1px solid grey;
- // border-radius: 16px;
- // }
- // }
- }
-}
-
-// .top-filter-header {
-
-// #header {
-// text-transform: uppercase;
-// letter-spacing: 2px;
-// font-size: 13;
-// width: 80%;
-// }
-
-// .close-icon {
-// width: 20%;
-// opacity: .6;
-// position: relative;
-// display: block;
-
-// .line {
-// display: block;
-// background: $alt-accent;
-// width: 20;
-// height: 3;
-// position: absolute;
-// right: 0;
-// border-radius: ($height-line / 2);
-
-// &.line-1 {
-// transform: rotate(45deg);
-// top: 45%;
-// }
-
-// &.line-2 {
-// transform: rotate(-45deg);
-// top: 45%;
-// }
-// }
-// }
-
-// .close-icon:hover {
-// opacity: 1;
-// }
-
-// }
-
-// .filter-options {
-
-// .filter-div {
-// margin-top: 10px;
-// margin-bottom: 10px;
-// display: inline-block;
-// width: 100%;
-// border-color: rgba(178, 206, 248, .2); // $darker-alt-accent
-// border-top-style: solid;
-
-// .filter-header {
-// display: flex;
-// align-items: center;
-// margin-bottom: 10px;
-// letter-spacing: 2px;
-
-// .filter-title {
-// font-size: 13;
-// text-transform: uppercase;
-// margin-top: 10px;
-// margin-bottom: 10px;
-// -webkit-transition: all 0.2s ease-in-out;
-// -moz-transition: all 0.2s ease-in-out;
-// -o-transition: all 0.2s ease-in-out;
-// transition: all 0.2s ease-in-out;
-// }
-// }
-
-// .filter-header:hover .filter-title {
-// transform: scale(1.05);
-// }
-
-// .filter-panel {
-// max-height: 0px;
-// width: 100%;
-// overflow: hidden;
-// opacity: 0;
-// transform-origin: top;
-// -webkit-transition: all 0.2s ease-in-out;
-// -moz-transition: all 0.2s ease-in-out;
-// -o-transition: all 0.2s ease-in-out;
-// transition: all 0.2s ease-in-out;
-// text-align: center;
-// }
-// }
-// }
-
-// .filter-buttons {
-// border-color: rgba(178, 206, 248, .2); // $darker-alt-accent
-// border-top-style: solid;
-// padding-top: 10px;
-// }
-
-
-.active-filters {
- display: flex;
- flex-direction: row-reverse;
- justify-content: flex-end;
- width: 100%;
- margin-right: 30px;
- position: relative;
-
- .active-icon {
- max-width: 40px;
- flex: initial;
-
- &.icon {
- width: 40px;
- text-align: center;
- margin-bottom: 5px;
- position: absolute;
- }
-
- &.container {
- display: flex;
- flex-direction: column;
- width: 40px;
- }
-
- &.description {
- text-align: center;
- top: 40px;
- position: absolute;
- width: 40px;
- font-size: 9px;
- opacity: 0;
- -webkit-transition: all 0.2s ease-in-out;
- -moz-transition: all 0.2s ease-in-out;
- -o-transition: all 0.2s ease-in-out;
- transition: all 0.2s ease-in-out;
- }
-
- &.icon:hover+.description {
- opacity: 1;
- }
- }
-
- .col-icon {
- height: 35px;
- margin-left: 5px;
- width: 35px;
- background-color: black;
- color: white;
- border-radius: 50%;
- display: flex;
- align-items: center;
- justify-content: center;
-
- .save-filter,
- .reset-filter,
- .all-filter {
- background-color: gray;
- }
-
- .save-filter:hover,
- .reset-filter:hover,
- .all-filter:hover {
- background-color: $darker-alt-accent;
- }
- }
} \ No newline at end of file
diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx
index 3926208ae..ee38046be 100644
--- a/src/client/views/search/SearchBox.tsx
+++ b/src/client/views/search/SearchBox.tsx
@@ -495,31 +495,31 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
const myDashboards = DocListCast(CurrentUserUtils.MyDashboards.data);
return (
<div style={{ pointerEvents: "all" }} className="searchBox-container">
- <div style={{ position: "absolute", left: 15, height: 32, alignItems: "center", display: "flex" }}>
- <div className="searchBox-lozenge-user">
- {`${Doc.CurrentUserEmail}`}
- <div className="searchBox-logoff" onClick={() => window.location.assign(Utils.prepend("/logout"))}>
- Logoff
+ <div className="searchBox-bar">
+ <div className="searchBox-lozenges" >
+ <div className="searchBox-lozenge-user">
+ {`${Doc.CurrentUserEmail}`}
+ <div className="searchBox-logoff" onClick={() => window.location.assign(Utils.prepend("/logout"))}>
+ Logoff
</div>
- </div>
- <div className="searchBox-lozenge">
- {`UI project`}
- </div>
- <div className="searchBox-lozenge-dashboard" >
- <select className="searchBox-dashSelect" onChange={e => CurrentUserUtils.openDashboard(Doc.UserDoc(), myDashboards[Number(e.target.value)])}
- value={myDashboards.indexOf(CurrentUserUtils.ActiveDashboard)}>
- {myDashboards.map((dash, i) => <option key={dash[Id]} value={i}> {StrCast(dash.title)} </option>)}
- </select>
- <div className="searchBox-dashboards" onClick={undoBatch(() => CurrentUserUtils.createNewDashboard(Doc.UserDoc()))}>
- New
</div>
- <div className="searchBox-dashboards" onClick={undoBatch(() => CurrentUserUtils.snapshotDashboard(Doc.UserDoc()))}>
- Snapshot
+ <div className="searchBox-lozenge">
+ {`UI project`}
+ </div>
+ <div className="searchBox-lozenge-dashboard" >
+ <select className="searchBox-dashSelect" onChange={e => CurrentUserUtils.openDashboard(Doc.UserDoc(), myDashboards[Number(e.target.value)])}
+ value={myDashboards.indexOf(CurrentUserUtils.ActiveDashboard)}>
+ {myDashboards.map((dash, i) => <option key={dash[Id]} value={i}> {StrCast(dash.title)} </option>)}
+ </select>
+ <div className="searchBox-dashboards" onClick={undoBatch(() => CurrentUserUtils.createNewDashboard(Doc.UserDoc()))}>
+ New
+ </div>
+ <div className="searchBox-dashboards" onClick={undoBatch(() => CurrentUserUtils.snapshotDashboard(Doc.UserDoc()))}>
+ Snapshot
+ </div>
</div>
</div>
- </div>
- <div className="searchBox-bar">
- <div style={{ position: "relative", display: "flex", width: 450 }}>
+ <div className="searchBox-query" >
<input value={this.newsearchstring} autoComplete="off" onChange={this.onChange} type="text" placeholder="Search..." id="search-input" ref={this._inputRef}
className="searchBox-barChild searchBox-input" onPointerDown={this.openSearch} onKeyPress={this.enter} onFocus={this.openSearch}
style={{ padding: 1, paddingLeft: 20, paddingRight: 60, color: "black", height: 20, width: 250 }} />
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-07 17:07:42 +0000