diff options
| -rw-r--r-- | src/client/views/collections/CollectionMenu.scss | 20 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionMenu.tsx | 20 |
2 files changed, 22 insertions, 18 deletions
diff --git a/src/client/views/collections/CollectionMenu.scss b/src/client/views/collections/CollectionMenu.scss index 348b9e6ea..0da78df9f 100644 --- a/src/client/views/collections/CollectionMenu.scss +++ b/src/client/views/collections/CollectionMenu.scss @@ -16,7 +16,7 @@ .antimodeMenu-button { padding:0; - width:40px; + width:30px; display: flex; svg { margin:auto; @@ -37,13 +37,11 @@ .collectionViewBaseChrome-viewPicker { font-size: 75%; - //text-transform: uppercase; - //letter-spacing: 2px; background: #121721; - color: white; outline-color: black; + color: white; border: none; - //padding: 12px 10px 11px 10px; + border-right: solid gray 1px; } .collectionViewBaseChrome-viewPicker:active { @@ -67,8 +65,9 @@ margin-right: 0px; font-size: 75%; background: #121721; - border: none; color: white; + border: none; + border-right: solid gray 1px; } .commandEntry-outerDiv { @@ -89,7 +88,7 @@ .collectionViewBaseChrome-collapse { transition: all .5s, opacity 0.3s; position: absolute; - width: 40px; + width: 30px; transform-origin: top left; pointer-events: all; // margin-top: 10px; @@ -112,6 +111,8 @@ .collectionViewBaseChrome-viewSpecs { margin-left: 5px; display: grid; + border: none; + border-right: solid gray 1px; .collectionViewBaseChrome-filterIcon { position: relative; @@ -123,6 +124,8 @@ height: 30px; align-items: center; justify-content: center; + border: none; + border-right: solid gray 1px; } .collectionViewBaseChrome-viewSpecsInput { @@ -201,8 +204,9 @@ background: #121721; color: white; outline-color: black; + color: white; border: none; - //padding: 12px 10px 11px 10px; + border-right: solid gray 1px; } .collectionGridViewChrome-viewPicker:active { diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx index 84e5d56cb..f3ad21949 100644 --- a/src/client/views/collections/CollectionMenu.tsx +++ b/src/client/views/collections/CollectionMenu.tsx @@ -211,9 +211,9 @@ export class CollectionViewBaseChrome extends React.Component<CollectionMenuProp @computed get templateChrome() { return <div className="collectionViewBaseChrome-template" ref={this.createDropTarget} > <div className="commandEntry-outerDiv" title="drop document to apply or drag to create button" ref={this._commandRef} onPointerDown={this.dragCommandDown}> - <div className="commandEntry-drop"> - <FontAwesomeIcon icon="bullseye" size="2x" /> - </div> + <button className={"antimodeMenu-button"} > + <FontAwesomeIcon icon="bullseye" size="lg" /> + </button> <select className="collectionViewBaseChrome-cmdPicker" onPointerDown={stopPropagation} onChange={this.commandChanged} value={this._currentKey}> <option className="collectionViewBaseChrome-viewOption" onPointerDown={stopPropagation} key={"empty"} value={""} /> @@ -228,9 +228,9 @@ export class CollectionViewBaseChrome extends React.Component<CollectionMenuProp @computed get viewModes() { return <div className="collectionViewBaseChrome-viewModes" > <div className="commandEntry-outerDiv" title="drop document to apply or drag to create button" ref={this._viewRef} onPointerDown={this.dragViewDown}> - <div className="commandEntry-drop"> - <FontAwesomeIcon icon="bullseye" size="2x" /> - </div> + <button className={"antimodeMenu-button"}> + <FontAwesomeIcon icon="bullseye" size="lg" /> + </button> <select className="collectionViewBaseChrome-viewPicker" onPointerDown={stopPropagation} @@ -256,12 +256,12 @@ export class CollectionViewBaseChrome extends React.Component<CollectionMenuProp <div className="collectionMenu"> <div className="collectionViewBaseChrome"> {this.viewModes} + {this.templateChrome} <div className="collectionViewBaseChrome-viewSpecs" title="filter documents to show" style={{ display: "grid" }}> - <div className="collectionViewBaseChrome-filterIcon" onPointerDown={this.toggleViewSpecs} > - <FontAwesomeIcon icon="filter" size="2x" /> - </div> + <button className={"antimodeMenu-button"} onClick={this.toggleViewSpecs} > + <FontAwesomeIcon icon="filter" size="lg" /> + </button> </div> - {this.templateChrome} </div> {this.subChrome} </div> |