diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/client/documents/Documents.ts | 4 | ||||
-rw-r--r-- | src/client/views/MainView.scss | 1 | ||||
-rw-r--r-- | src/client/views/MainView.tsx | 42 | ||||
-rw-r--r-- | src/client/views/StyleProvider.tsx | 6 | ||||
-rw-r--r-- | src/client/views/collections/CollectionTreeView.tsx | 2 | ||||
-rw-r--r-- | src/client/views/collections/TreeView.scss | 27 | ||||
-rw-r--r-- | src/client/views/collections/TreeView.tsx | 19 | ||||
-rw-r--r-- | src/client/views/nodes/DocumentView.tsx | 3 | ||||
-rw-r--r-- | src/client/views/nodes/FilterBox.tsx | 13 | ||||
-rw-r--r-- | src/client/views/nodes/SliderBox.scss | 4 | ||||
-rw-r--r-- | src/client/views/nodes/SliderBox.tsx | 10 | ||||
-rw-r--r-- | src/client/views/search/SearchBox.scss | 29 | ||||
-rw-r--r-- | src/client/views/search/SearchBox.tsx | 2 |
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 }}> |