aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--src/client/documents/Documents.ts4
-rw-r--r--src/client/views/MainView.scss1
-rw-r--r--src/client/views/MainView.tsx42
-rw-r--r--src/client/views/StyleProvider.tsx6
-rw-r--r--src/client/views/collections/CollectionTreeView.tsx2
-rw-r--r--src/client/views/collections/TreeView.scss27
-rw-r--r--src/client/views/collections/TreeView.tsx19
-rw-r--r--src/client/views/nodes/DocumentView.tsx3
-rw-r--r--src/client/views/nodes/FilterBox.tsx13
-rw-r--r--src/client/views/nodes/SliderBox.scss4
-rw-r--r--src/client/views/nodes/SliderBox.tsx10
-rw-r--r--src/client/views/search/SearchBox.scss29
-rw-r--r--src/client/views/search/SearchBox.tsx2
13 files changed, 103 insertions, 59 deletions
diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 8fd906dc7..c457fb722 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -113,6 +113,7 @@ export interface DocumentOptions {
page?: number;
description?: string; // added for links
_viewScale?: number;
+ _overflow?: string;
forceActive?: boolean;
layout?: string | Doc; // default layout string for a document
contentPointerEvents?: string; // pointer events allowed for content of a document view. eg. set to "none" in menuSidebar for sharedDocs so that you can select a document, but not interact with its contents
@@ -1250,14 +1251,13 @@ export namespace DocUtils {
});
});
if (x !== undefined && y !== undefined) {
- const newCollection = Docs.Create.PileDocument(docList, { title: "pileup", x: x - 55, y: y - 55, _width: 110, _height: 100 });
+ const newCollection = Docs.Create.PileDocument(docList, { title: "pileup", x: x - 55, y: y - 55, _width: 110, _height: 100, _overflow: "visible" });
newCollection.x = NumCast(newCollection.x) + NumCast(newCollection._width) / 2 - 55;
newCollection.y = NumCast(newCollection.y) + NumCast(newCollection._height) / 2 - 55;
newCollection._width = newCollection._height = 110;
//newCollection.borderRounding = "40px";
newCollection._jitterRotation = 10;
newCollection._backgroundColor = "gray";
- newCollection._overflow = "visible";
return newCollection;
}
}
diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss
index 33bd7e77e..d6a455a22 100644
--- a/src/client/views/MainView.scss
+++ b/src/client/views/MainView.scss
@@ -369,7 +369,6 @@
height: 55px;
top: 50%;
left: -10px;
- border: 1px solid black;
border-radius: 8px;
position: relative;
z-index: 41; // lm_maximised has a z-index of 40 and this needs to be above that
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 5eb8429f0..f301d6c51 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -3,7 +3,7 @@ import { faBuffer, faHireAHelper } from '@fortawesome/free-brands-svg-icons';
import * as far from '@fortawesome/free-regular-svg-icons';
import * as fa from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { action, computed, configure, observable, reaction } from 'mobx';
+import { action, computed, configure, observable, reaction, runInAction } from 'mobx';
import { observer } from 'mobx-react';
import "normalize.css";
import * as React from 'react';
@@ -28,7 +28,7 @@ import { SettingsManager } from '../util/SettingsManager';
import { SharingManager } from '../util/SharingManager';
import { SnappingManager } from '../util/SnappingManager';
import { Transform } from '../util/Transform';
-import { UndoManager } from '../util/UndoManager';
+import { UndoManager, undoBatch } from '../util/UndoManager';
import { TimelineMenu } from './animationtimeline/TimelineMenu';
import { CollectionDockingView } from './collections/CollectionDockingView';
import { MarqueeOptionsMenu } from './collections/collectionFreeForm/MarqueeOptionsMenu';
@@ -46,7 +46,7 @@ import { LinkMenu } from './linking/LinkMenu';
import "./MainView.scss";
import { AudioBox } from './nodes/AudioBox';
import { DocumentLinksButton } from './nodes/DocumentLinksButton';
-import { DocumentView } from './nodes/DocumentView';
+import { DocumentView, DocumentViewProps } from './nodes/DocumentView';
import { FormattedTextBox } from './nodes/formattedText/FormattedTextBox';
import { LinkDescriptionPopup } from './nodes/LinkDescriptionPopup';
import { LinkDocPreview } from './nodes/LinkDocPreview';
@@ -58,7 +58,8 @@ import { PDFMenu } from './pdf/PDFMenu';
import { PreviewCursor } from './PreviewCursor';
import { PropertiesView } from './PropertiesView';
import { SearchBox } from './search/SearchBox';
-import { DefaultStyleProvider } from './StyleProvider';
+import { DefaultStyleProvider, StyleProp } from './StyleProvider';
+import { FieldViewProps } from './nodes/FieldView';
const _global = (window /* browser */ || global /* node */) as any;
@observer
@@ -295,6 +296,33 @@ export class MainView extends React.Component {
doc.dockingConfig ? CurrentUserUtils.openDashboard(Doc.UserDoc(), doc) : CollectionDockingView.AddSplit(doc, "right");
}
+
+ /**
+ * add lock and hide button decorations for the "Dashboards" flyout TreeView
+ */
+ DashboardStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps | DocumentViewProps>, property: string) {
+ const toggleField = undoBatch(action((e: React.MouseEvent, doc: Doc, field: string) => {
+ e.stopPropagation();
+ doc[field] = doc[field] ? undefined : true;
+ }));
+ switch (property.split(":")[0]) {
+ case StyleProp.Decorations:
+ return !doc || property.includes(":afterHeader") || // bcz: Todo: afterHeader should be generalized into a renderPath that is a list of the documents rendered so far which would mimic much of CSS property selectors
+ DocListCast((Doc.UserDoc().myDashboards as Doc).data).some(dash => dash === doc ||
+ DocListCast(dash.data).some(tabset => tabset === doc)) ? (null) :
+ <>
+ <div className={`styleProvider-treeView-hide${doc.hidden ? "-active" : ""}`} onClick={e => toggleField(e, doc, "hidden")}>
+ <FontAwesomeIcon icon={doc.hidden ? "eye-slash" : "eye"} size="sm" />
+ </div>
+ <div className={`styleProvider-treeView-lock${doc.lockedPosition ? "-active" : ""}`} onClick={e => toggleField(e, doc, "lockedPosition")}>
+ <FontAwesomeIcon icon={doc.lockedPosition ? "lock" : "unlock"} size="sm" />
+ </div>
+ </>;
+ }
+ return DefaultStyleProvider(doc, props, property);
+ }
+
+
@computed get flyout() {
return !this._flyoutWidth ? <div className={`mainView-libraryFlyout-out`}>
{this.docButtons}
@@ -314,7 +342,7 @@ export class MainView extends React.Component {
PanelHeight={this.getContentsHeight}
renderDepth={0}
focus={emptyFunction}
- styleProvider={DefaultStyleProvider}
+ styleProvider={this._sidebarContent.proto === Doc.UserDoc().myDashboards ? this.DashboardStyleProvider : DefaultStyleProvider}
parentActive={returnTrue}
whenActiveChanged={emptyFunction}
bringToFront={emptyFunction}
@@ -386,8 +414,8 @@ export class MainView extends React.Component {
{this.menuPanel}
<div className={`mainView-innerContent${this.darkScheme ? "-dark" : ""}`}>
{this.flyout}
- < div className="mainView-libraryHandle" style={{ display: !this._flyoutWidth ? "none" : undefined, }} onPointerDown={this.onFlyoutPointerDown} >
- <FontAwesomeIcon icon="chevron-left" color={this.darkScheme ? "white" : "black"} size="sm" />
+ <div className="mainView-libraryHandle" style={{ display: !this._flyoutWidth ? "none" : undefined, }} onPointerDown={this.onFlyoutPointerDown} >
+ <FontAwesomeIcon icon="chevron-left" color={this.darkScheme ? "white" : "black"} style={{ opacity: "50%" }} size="sm" />
</div>
{this.dockingContent}
diff --git a/src/client/views/StyleProvider.tsx b/src/client/views/StyleProvider.tsx
index 312cfc73e..e1600f748 100644
--- a/src/client/views/StyleProvider.tsx
+++ b/src/client/views/StyleProvider.tsx
@@ -2,7 +2,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import 'golden-layout/src/css/goldenlayout-base.css';
import 'golden-layout/src/css/goldenlayout-dark-theme.css';
import { runInAction } from 'mobx';
-import { Doc, Opt, StrListCast } from "../../fields/Doc";
+import { Doc, Opt, StrListCast, LayoutSym } from "../../fields/Doc";
import { List } from '../../fields/List';
import { listSpec } from '../../fields/Schema';
import { BoolCast, Cast, NumCast, StrCast } from "../../fields/Types";
@@ -105,11 +105,13 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps |
case DocumentType.PRES: docColor = docColor || (darkScheme() ? "#3e3e3e" : "white"); break;
case DocumentType.FONTICON: docColor = undefined; break;
case DocumentType.RTF: docColor = docColor || (darkScheme() ? "#2d2d2d" : "#f1efeb"); break;
- case DocumentType.LABEL:
+ case DocumentType.FILTER: docColor = docColor || (darkScheme() ? "#2d2d2d" : "rgba(105, 105, 105, 0.432)"); break;
case DocumentType.INK: docColor = undefined; break;
+ case DocumentType.SLIDER: break;
case DocumentType.BUTTON: docColor = docColor || (darkScheme() ? "#2d2d2d" : "lightgray"); break;
case DocumentType.LINK: return "transparent";
case DocumentType.COL:
+ if (StrCast(Doc.LayoutField(doc)).includes("SliderBox")) break;
docColor = docColor ? docColor :
doc?._isGroup ? "#00000004" : // very faint highlight to show bounds of group
(Doc.IsSystem(doc) ? (darkScheme() ? "rgb(62,62,62)" : "lightgrey") : // system docs (seen in treeView) get a grayish background
diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx
index 344a6c103..564939270 100644
--- a/src/client/views/collections/CollectionTreeView.tsx
+++ b/src/client/views/collections/CollectionTreeView.tsx
@@ -213,7 +213,7 @@ export class CollectionTreeView extends CollectionSubView<Document, Partial<coll
TraceMobx();
if (!(this.doc instanceof Doc)) return (null);
const background = this.props.styleProvider?.(this.doc, this.props, StyleProp.BackgroundColor);
- const paddingX = `${NumCast(this.doc._xPadding, 10)}px`;
+ const paddingX = `${NumCast(this.doc._xPadding, 15)}px`;
const paddingTop = `${NumCast(this.doc._yPadding, 20)}px`;
const pointerEvents = !this.props.active() && !SnappingManager.GetIsDragging() && !this._isChildActive ? "none" : undefined;
diff --git a/src/client/views/collections/TreeView.scss b/src/client/views/collections/TreeView.scss
index 7a654c7cf..067675038 100644
--- a/src/client/views/collections/TreeView.scss
+++ b/src/client/views/collections/TreeView.scss
@@ -98,10 +98,21 @@
width: unset;
}
- >svg {
- display: none;
+ .right-buttons-container {
+ display: flex;
+ align-items: center;
+ margin-left: 0.25rem;
+ opacity: 0.75;
+
+ >svg, .styleProvider-treeView-lock, .styleProvider-treeView-hide, .styleProvider-treeView-lock-active, .styleProvider-treeView-hide-active {
+ margin-left: 0.25rem;
+ margin-right: 0.25rem;
+ }
+
+ >svg, .styleProvider-treeView-lock, .styleProvider-treeView-hide {
+ display: none;
+ }
}
-
}
.treeView-header:hover {
@@ -109,10 +120,6 @@
display: inherit;
}
- >svg {
- display: inherit;
- }
-
.treeView-openRight {
display: inline-block;
height: 17px;
@@ -125,6 +132,12 @@
margin-left: 3px;
}
}
+
+ .right-buttons-container {
+ >svg, .styleProvider-treeView-lock, .styleProvider-treeView-hide {
+ display: inherit;
+ }
+ }
}
.treeView-header-above {
diff --git a/src/client/views/collections/TreeView.tsx b/src/client/views/collections/TreeView.tsx
index 93d3be1fc..a61a9e43c 100644
--- a/src/client/views/collections/TreeView.tsx
+++ b/src/client/views/collections/TreeView.tsx
@@ -31,6 +31,7 @@ import { CollectionTreeView } from './CollectionTreeView';
import { CollectionView, CollectionViewType } from './CollectionView';
import "./TreeView.scss";
import React = require("react");
+import { SliderBox } from '../nodes/SliderBox';
export interface TreeViewProps {
document: Doc;
@@ -466,6 +467,7 @@ export class TreeView extends React.Component<TreeViewProps> {
}
</div>;
}
+
@computed get showTitleEditorControl() { return ["*", this._uniqueId, this.props.treeView._uniqueId].includes(Doc.GetT(this.doc, "editTitle", "string", true) || ""); }
@computed get headerElements() {
return (Doc.IsSystem(this.doc) && Doc.UserDoc().noviceMode) || this.props.treeViewHideHeaderFields() ? (null) :
@@ -567,6 +569,7 @@ export class TreeView extends React.Component<TreeViewProps> {
parentActive={returnTrue}
whenActiveChanged={this.props.whenActiveChanged}
bringToFront={emptyFunction}
+ cantBrush={this.props.treeView.props.cantBrush}
dontRegisterView={BoolCast(this.props.treeView.props.Document.dontRegisterChildViews)}
docFilters={returnEmptyFilter}
docRangeFilters={returnEmptyFilter}
@@ -584,7 +587,10 @@ export class TreeView extends React.Component<TreeViewProps> {
}} >
{view}
</div >
- {this.headerElements}
+ <div className={"right-buttons-container"}>
+ {this.props.styleProvider?.(this.doc, this.props.treeView.props, StyleProp.Decorations + (Doc.IsSystem(this.props.containingCollection) ? ":afterHeader" : ""))} {/* hide and lock buttons */}
+ {this.headerElements}
+ </div>
</>;
}
@@ -612,15 +618,17 @@ export class TreeView extends React.Component<TreeViewProps> {
}
renderEmbeddedDocument = (asText: boolean) => {
- const panelWidth = asText || StrCast(Doc.LayoutField(this.layoutDoc)).includes("FormattedTextBox") ? this.rtfWidth : this.expandPanelWidth;
- const panelHeight = asText ? this.rtfOutlineHeight : StrCast(Doc.LayoutField(this.layoutDoc)).includes("FormattedTextBox") ? this.rtfHeight : this.expandPanelHeight;
+ const layout = StrCast(Doc.LayoutField(this.layoutDoc));
+ const isExpandable = layout.includes(FormattedTextBox.name) || layout.includes(SliderBox.name);
+ const panelWidth = asText || isExpandable ? this.rtfWidth : this.expandPanelWidth;
+ const panelHeight = asText ? this.rtfOutlineHeight : isExpandable ? this.rtfHeight : this.expandPanelHeight;
return <DocumentView key={this.doc[Id]} ref={action((r: DocumentView | null) => this._dref = r)}
Document={this.doc}
DataDoc={undefined}
PanelWidth={panelWidth}
PanelHeight={panelHeight}
- NativeWidth={!asText && this.layoutDoc.type === DocumentType.RTF ? this.rtfWidth : undefined}
- NativeHeight={!asText && this.layoutDoc.type === DocumentType.RTF ? this.rtfHeight : undefined}
+ NativeWidth={!asText && (this.layoutDoc.type === DocumentType.RTF || this.layoutDoc.type === DocumentType.SLIDER) ? this.rtfWidth : undefined}
+ NativeHeight={!asText && (this.layoutDoc.type === DocumentType.RTF || this.layoutDoc.type === DocumentType.SLIDER) ? this.rtfHeight : undefined}
fitContentsToDoc={true}
hideTitle={asText}
LayoutTemplateString={asText ? FormattedTextBox.LayoutString("text") : undefined}
@@ -642,6 +650,7 @@ export class TreeView extends React.Component<TreeViewProps> {
whenActiveChanged={this.props.whenActiveChanged}
addDocTab={this.props.addDocTab}
pinToPres={this.props.pinToPres}
+ cantBrush={this.props.treeView.props.cantBrush}
bringToFront={returnFalse}
/>;
}
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 02bfa65aa..affbb4017 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -77,6 +77,7 @@ export interface DocumentViewSharedProps {
dropAction?: dropActionType;
dontRegisterView?: boolean;
ignoreAutoHeight?: boolean;
+ cantBrush?: boolean; // whether the document doesn't show brush highlighting
pointerEvents?: string;
scriptContext?: any; // can be assigned anything and will be passed as 'scriptContext' to any OnClick script that executes on this document
}
@@ -839,7 +840,7 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
["transparent", "#65350c", "#65350c", "yellow", "magenta", "cyan", "orange"] :
["transparent", "maroon", "maroon", "yellow", "magenta", "cyan", "orange"])[highlightIndex];
const highlightStyle = ["solid", "dashed", "solid", "solid", "solid", "solid", "solid"][highlightIndex];
- let highlighting = highlightIndex && ![DocumentType.FONTICON, DocumentType.INK].includes(this.layoutDoc.type as any) && this.layoutDoc._viewType !== CollectionViewType.Linear;
+ let highlighting = !this.props.cantBrush && highlightIndex && ![DocumentType.FONTICON, DocumentType.INK].includes(this.layoutDoc.type as any) && this.layoutDoc._viewType !== CollectionViewType.Linear;
highlighting = highlighting && this.props.focus !== emptyFunction && this.layoutDoc.title !== "[pres element template]"; // bcz: hack to turn off highlighting onsidebar panel documents. need to flag a document as not highlightable in a more direct way
const boxShadow = highlighting && this.borderRounding && highlightStyle !== "dashed" ? `0 0 0 ${highlightIndex}px ${highlightColor}` :
diff --git a/src/client/views/nodes/FilterBox.tsx b/src/client/views/nodes/FilterBox.tsx
index 730ae8f10..36df21b2d 100644
--- a/src/client/views/nodes/FilterBox.tsx
+++ b/src/client/views/nodes/FilterBox.tsx
@@ -102,7 +102,7 @@ export class FilterBox extends ViewBoxBaseComponent<FieldViewProps, FilterBoxDoc
if (docRangeFilters) {
let index: number;
while ((index = docRangeFilters.findIndex(item => item.split(":")[0] === facetHeader)) !== -1) {
- docRangeFilters.splice(index, 1);
+ docRangeFilters.splice(index, 3);
}
}
} else {
@@ -122,13 +122,13 @@ export class FilterBox extends ViewBoxBaseComponent<FieldViewProps, FilterBoxDoc
});
let newFacet: Opt<Doc>;
if (facetHeader === "text" || facetValues.rtFields / allCollectionDocs.length > 0.1) {
- newFacet = Docs.Create.TextDocument("", { _width: 100, _height: 25, _stayInCollection: true, _hideContextMenu: true, treeViewExpandedView: "layout", title: facetHeader, treeViewOpen: true, forceActive: true, ignoreClick: true });
+ newFacet = Docs.Create.TextDocument("", { _width: 100, _height: 25, system: true, _stayInCollection: true, _hideContextMenu: true, treeViewExpandedView: "layout", title: facetHeader, treeViewOpen: true, forceActive: true, ignoreClick: true });
Doc.GetProto(newFacet).type = DocumentType.COL; // forces item to show an open/close button instead ofa checkbox
newFacet._textBoxPadding = 4;
const scriptText = `setDocFilter(this?.target, "${facetHeader}", text, "match")`;
newFacet.onTextChanged = ScriptField.MakeScript(scriptText, { this: Doc.name, text: "string" });
} else if (facetHeader !== "tags" && nonNumbers / facetValues.strings.length < .1) {
- newFacet = Docs.Create.SliderDocument({ title: facetHeader, _stayInCollection: true, _hideContextMenu: true, treeViewExpandedView: "layout", treeViewOpen: true });
+ newFacet = Docs.Create.SliderDocument({ title: facetHeader, _overflow: "visible", _height: 40, _stayInCollection: true, _hideContextMenu: true, treeViewExpandedView: "layout", treeViewOpen: true });
const newFacetField = Doc.LayoutFieldKey(newFacet);
const ranged = Doc.readDocRangeFilter(targetDoc, facetHeader);
Doc.GetProto(newFacet).type = DocumentType.COL; // forces item to show an open/close button instead ofa checkbox
@@ -146,13 +146,13 @@ export class FilterBox extends ViewBoxBaseComponent<FieldViewProps, FilterBoxDoc
newFacet.title = facetHeader;
newFacet.treeViewOpen = true;
newFacet.type = DocumentType.COL;
- const capturedVariables = { layoutDoc: targetDoc, _stayInCollection: true, _hideContextMenu: true, dataDoc: (targetDoc.data as any)[0][DataSym] };
+ const capturedVariables = { layoutDoc: targetDoc, system: true, _stayInCollection: true, _hideContextMenu: true, dataDoc: (targetDoc.data as any)[0][DataSym] };
newFacet.data = ComputedField.MakeFunction(`readFacetData(layoutDoc, "${facetHeader}")`, {}, capturedVariables);
}
newFacet && Doc.AddDocToList(this.dataDoc, this.props.fieldKey, newFacet);
}
}
- filterBackground = () => "rgba(105, 105, 105, 0.432)";
+
@computed get scriptField() {
const scriptText = "setDocFilter(this?.target, heading, this.title, checked)";
const script = ScriptField.MakeScript(scriptText, { this: Doc.name, heading: "string", checked: "string", containingTreeView: Doc.name });
@@ -184,6 +184,7 @@ export class FilterBox extends ViewBoxBaseComponent<FieldViewProps, FilterBoxDoc
DataDoc={Doc.GetProto(facetCollection)}
fieldKey={`${this.props.fieldKey}`}
CollectionView={undefined}
+ cantBrush={true}
docFilters={returnEmptyFilter}
docRangeFilters={returnEmptyFilter}
searchFilterDocs={returnEmptyDoclist}
@@ -208,7 +209,7 @@ export class FilterBox extends ViewBoxBaseComponent<FieldViewProps, FilterBoxDoc
treeViewHideHeaderFields={true}
onCheckedClick={this.scriptField}
dontRegisterView={true}
- styleProvider={this.filterBackground}
+ styleProvider={this.props.styleProvider}
moveDocument={returnFalse}
removeDocument={returnFalse}
addDocument={returnFalse} />
diff --git a/src/client/views/nodes/SliderBox.scss b/src/client/views/nodes/SliderBox.scss
index 78015bd70..a896ffa87 100644
--- a/src/client/views/nodes/SliderBox.scss
+++ b/src/client/views/nodes/SliderBox.scss
@@ -1,7 +1,9 @@
.sliderBox-outerDiv {
- width: 100%;
+ width: calc(100% - 14px); // 14px accounts for handles that are at the max value of the slider that would extend outside the box
height: 100%;
border-radius: inherit;
display: flex;
flex-direction: column;
+ top: 7px;
+ position: relative;
} \ No newline at end of file
diff --git a/src/client/views/nodes/SliderBox.tsx b/src/client/views/nodes/SliderBox.tsx
index 2aa71b2bd..c30dcde54 100644
--- a/src/client/views/nodes/SliderBox.tsx
+++ b/src/client/views/nodes/SliderBox.tsx
@@ -50,10 +50,12 @@ export class SliderBox extends ViewBoxBaseComponent<FieldViewProps, SliderDocume
return domain[1] <= domain[0] ? (null) : (
<div className="sliderBox-outerDiv" onContextMenu={this.specificContextMenu} onPointerDown={e => e.stopPropagation()}
style={{ boxShadow: this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.BoxShadow) }}>
- <div className="sliderBox-mainButton" onContextMenu={this.specificContextMenu} style={{
- background: StrCast(this.layoutDoc.backgroundColor), color: StrCast(this.layoutDoc.color, "black"),
- fontSize: StrCast(this.layoutDoc._fontSize), letterSpacing: StrCast(this.layoutDoc.letterSpacing)
- }} >
+ <div className="sliderBox-mainButton"
+ onContextMenu={this.specificContextMenu} style={{
+ background: StrCast(this.layoutDoc.backgroundColor),
+ color: StrCast(this.layoutDoc.color, "black"),
+ fontSize: StrCast(this.layoutDoc._fontSize), letterSpacing: StrCast(this.layoutDoc.letterSpacing)
+ }} >
<Slider
mode={2}
step={1}
diff --git a/src/client/views/search/SearchBox.scss b/src/client/views/search/SearchBox.scss
index 13d4a6d5a..76f9b66eb 100644
--- a/src/client/views/search/SearchBox.scss
+++ b/src/client/views/search/SearchBox.scss
@@ -30,42 +30,29 @@
.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;
+ margin-right: 5px;
display: flex;
+ align-items: center;
+ border: grey 1px solid;
.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;
+ margin-left: 5px;
+ padding: 1px 2px 1px 2px;
+ cursor: pointer;
}
.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);
+ border: none;
+ background-color: transparent;
&:hover {
cursor: pointer;
diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx
index d3fee85a7..d10afdcf9 100644
--- a/src/client/views/search/SearchBox.tsx
+++ b/src/client/views/search/SearchBox.tsx
@@ -466,7 +466,7 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
}
@computed get scopeButtons() {
- return <div style={{ height: 25, paddingLeft: "4px", paddingRight: "4px", border: "1px solid gray", borderRadius: "0.3em", borderBottom: !this.open ? "1px solid" : "none", }}>
+ return <div style={{ height: 25, paddingLeft: "4px", paddingRight: "4px"}}>
<form className="beta" style={{ justifyContent: "space-evenly", display: "flex" }}>
<div style={{ display: "contents" }}>
<div className="radio" style={{ margin: 0 }}>