aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/search
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/search')
-rw-r--r--src/client/views/search/SearchBox.scss442
-rw-r--r--src/client/views/search/SearchBox.tsx42
2 files changed, 125 insertions, 359 deletions
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 2026-01-23 21:15:42 +0000