aboutsummaryrefslogtreecommitdiff
path: root/src/client
diff options
context:
space:
mode:
Diffstat (limited to 'src/client')
-rw-r--r--src/client/views/search/IconBar.scss44
-rw-r--r--src/client/views/search/IconBar.tsx71
-rw-r--r--src/client/views/search/IconButton.tsx292
3 files changed, 228 insertions, 179 deletions
diff --git a/src/client/views/search/IconBar.scss b/src/client/views/search/IconBar.scss
index 41bd83dc1..2cde14aa7 100644
--- a/src/client/views/search/IconBar.scss
+++ b/src/client/views/search/IconBar.scss
@@ -18,8 +18,8 @@
}
.type-icon {
- height: 50px;
- width: 50px;
+ height: 45px;
+ width: 45px;
color: $light-color;
border-radius: 50%;
display: flex;
@@ -30,22 +30,22 @@
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
font-size: 2em;
- position: absolute;
+ // position: absolute;
}
-.ban-icon {
- width: 50px;
- height: 50px;
- color: $alt-accent;
- opacity: 0;
- position: absolute;
- float: right;
-
- .fontawesome-icon {
- height: 100%;
- width: 100%;
- }
-}
+// .ban-icon {
+// width: 50px;
+// height: 50px;
+// color: $alt-accent;
+// opacity: 0;
+// position: absolute;
+// float: right;
+
+// .fontawesome-icon {
+// height: 100%;
+// width: 100%;
+// }
+// }
// .type-icon.selected.add {
// background-color: $alt-accent;
@@ -63,8 +63,8 @@
// }
.fontawesome-icon {
- height: 28px;
- width: 28px;
+ height: 24px;
+ width: 24px;
}
.filter-description{
@@ -73,7 +73,7 @@
.type-icon:hover {
transform: scale(1.1);
- background-color: $alt-accent;
+ background-color: $darker-alt-accent;
opacity: 1;
+.filter-description {
@@ -95,9 +95,9 @@
display: flex;
flex-direction: column;
align-items: center;
- width: 50px;
- height: 50px;
- position: relative;
+ width: 45px;
+ height: 60px;
+ // position: relative;
}
.filter-description {
diff --git a/src/client/views/search/IconBar.tsx b/src/client/views/search/IconBar.tsx
index fca6c01d7..b4656f4c5 100644
--- a/src/client/views/search/IconBar.tsx
+++ b/src/client/views/search/IconBar.tsx
@@ -5,7 +5,7 @@ import "./SearchBox.scss";
import "./IconBar.scss";
import * as anime from 'animejs';
import { DocTypes } from '../../documents/Documents';
-import { faSearch, faFilePdf, faFilm, faImage, faObjectGroup, faStickyNote, faMusic, faLink, faChartBar, faGlobeAsia, faBan } from '@fortawesome/free-solid-svg-icons';
+import { faSearch, faFilePdf, faFilm, faImage, faObjectGroup, faStickyNote, faMusic, faLink, faChartBar, faGlobeAsia, faBan, faTimesCircle, faCheckCircle } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { library, icon } from '@fortawesome/fontawesome-svg-core';
import * as _ from "lodash";
@@ -40,10 +40,12 @@ export class IconBar extends React.Component<IconBarProps> {
allIcons: string[] = [DocTypes.AUDIO, DocTypes.COL, DocTypes.HIST, DocTypes.IMG, DocTypes.LINK, DocTypes.PDF, DocTypes.TEXT, DocTypes.VID, DocTypes.WEB];
@observable typesToFind: string[];
- @observable selectedItems: string[] = [];
+ // @observable selectedItems: string[] = [];
@observable public ResetClicked: boolean = false;
+ @observable public SelectAllClicked: boolean = false;
public Reset: number = 0;
- @observable activeType = "none";
+ public Select: number = 0;
+ // @observable activeType = "none";
constructor(props: IconBarProps) {
super(props);
@@ -63,49 +65,62 @@ export class IconBar extends React.Component<IconBarProps> {
@action.bound
resetSelf = () => {
- // this.ResetClicked = true;
- this.typesToFind = this.allIcons;
- this.selectedItems = [];
- this.activeType = "none";
- console.log("resetting")
+ this.ResetClicked = true;
+ this.typesToFind = [];
+ // this.selectedItems = [];
+ // this.activeType = "none";
+ // console.log("resetting")
}
@action.bound
- getActiveType() {
- return this.activeType;
+ selectAll = () => {
+ this.SelectAllClicked = true;
+ this.typesToFind = this.allIcons;
}
- @action.bound
- updateActiveType(type: string) {
- this.resetSelf();
- this.activeType = type;
- }
+ // @action.bound
+ // getActiveType() {
+ // return this.activeType;
+ // }
- @action.bound
- updateSelectedList(type: string){
- if(this.selectedItems.indexOf(type) === -1){
- this.selectedItems.push(type);
- }
- else{
- _.pull(this.selectedItems, type);
- }
- }
+ // @action.bound
+ // updateActiveType(type: string) {
+ // this.resetSelf();
+ // this.activeType = type;
+ // }
+
+ // @action.bound
+ // updateSelectedList(type: string){
+ // if(this.selectedItems.indexOf(type) === -1){
+ // this.selectedItems.push(type);
+ // }
+ // else{
+ // _.pull(this.selectedItems, type);
+ // }
+ // }
render() {
return (
<div>
<div className="filter icon-title">Filter by type of node</div>
<div className="filter icon-bar">
+ <div className="filter type-outer">
+ <div className={"type-icon none not-selected"}
+ onClick={this.selectAll}>
+ <FontAwesomeIcon className="fontawesome-icon" icon={faCheckCircle} />
+ </div>
+ <div className="filter-description">Select All</div>
+ </div>
+ {this.allIcons.map((type: string) =>
+ <IconButton type={type} active={this.typesToFind.indexOf(type) !== -1} getList={this.getList} updateList={this.updateList} />
+ )}
<div className="filter type-outer">
<div className={"type-icon none not-selected"}
onClick={this.resetSelf}>
- <FontAwesomeIcon className="fontawesome-icon" style={{ order: -2 }} icon={faBan} />
+ <FontAwesomeIcon className="fontawesome-icon" icon={faTimesCircle} />
</div>
<div className="filter-description">Clear</div>
</div>
- {this.allIcons.map((type: string) =>
- <IconButton getActiveType = {this.getActiveType} updateSelectedList= {this.updateSelectedList} type={type} changeActiveType = {this.updateActiveType} active={this.selectedItems.indexOf(type) !== -1} getList={this.getList} updateList={this.updateList} />
- )}
</div>
</div>
);
diff --git a/src/client/views/search/IconButton.tsx b/src/client/views/search/IconButton.tsx
index 129348b91..71f1b7f0f 100644
--- a/src/client/views/search/IconButton.tsx
+++ b/src/client/views/search/IconButton.tsx
@@ -28,22 +28,23 @@ interface IconButtonProps {
type: string;
getList(): string[];
updateList(list: string[]): void;
- updateSelectedList(type: string): void;
+ // updateSelectedList(type: string): void;
active: boolean;
- getActiveType(): string;
- changeActiveType(value: string): void;
+ // getActiveType(): string;
+ // changeActiveType(value: string): void;
}
@observer
export class IconButton extends React.Component<IconButtonProps>{
@observable isSelected: boolean = this.props.active;
- @observable removeType = false;
+ // @observable removeType = false;
@observable hover = false;
- @observable isRemoved: boolean = (this.props.getActiveType() === "remove");
- @observable isAdded: boolean = (this.props.getActiveType() === "add");
+ // @observable isRemoved: boolean = (this.props.getActiveType() === "remove");
+ // @observable isAdded: boolean = (this.props.getActiveType() === "add");
- private _reactionDisposer?: IReactionDisposer;
+ private _resetReaction?: IReactionDisposer;
+ private _selectAllReaction?: IReactionDisposer;
static Instance: IconButton;
constructor(props: IconButtonProps) {
@@ -52,12 +53,11 @@ export class IconButton extends React.Component<IconButtonProps>{
}
componentDidMount = () => {
- this._reactionDisposer = reaction(
+ this._resetReaction = reaction(
() => IconBar.Instance.ResetClicked,
() => {
if (IconBar.Instance.ResetClicked) {
- console.log("running")
- this.reset()
+ this.reset();
IconBar.Instance.Reset++;
if (IconBar.Instance.Reset === 9) {
IconBar.Instance.Reset = 0;
@@ -65,39 +65,51 @@ export class IconButton extends React.Component<IconButtonProps>{
}
}
},
- {fireImmediately: true}
+ )
+ this._selectAllReaction = reaction(
+ () => IconBar.Instance.SelectAllClicked,
+ () => {
+ if (IconBar.Instance.SelectAllClicked) {
+ this.select();
+ IconBar.Instance.Select++;
+ if (IconBar.Instance.Select === 9) {
+ IconBar.Instance.Select = 0;
+ IconBar.Instance.SelectAllClicked = false;
+ }
+ }
+ },
)
}
- @action
- downKeyHandler = (e: KeyboardEvent) => {
- if (e.key !== "Control") return;
- this.removeType = true;
- e.preventDefault();
- e.stopPropagation();
- document.body.style.cursor = "not-allowed";
- }
-
- @action
- upKeyHandler = (e: KeyboardEvent) => {
- e.preventDefault();
- e.stopPropagation();
- this.removeType = false;
- document.body.style.cursor = "default";
-
- }
-
- componentWillMount() {
- document.removeEventListener("keydown", this.downKeyHandler);
- document.addEventListener("keydown", this.downKeyHandler);
- document.removeEventListener("keyup", this.upKeyHandler);
- document.addEventListener("keyup", this.upKeyHandler);
- }
-
- componentWillUnMount() {
- document.removeEventListener("keyup", this.upKeyHandler);
- document.removeEventListener("keydown", this.downKeyHandler);
- }
+ // @action
+ // downKeyHandler = (e: KeyboardEvent) => {
+ // if (e.key !== "Control") return;
+ // this.removeType = true;
+ // e.preventDefault();
+ // e.stopPropagation();
+ // document.body.style.cursor = "not-allowed";
+ // }
+
+ // @action
+ // upKeyHandler = (e: KeyboardEvent) => {
+ // e.preventDefault();
+ // e.stopPropagation();
+ // this.removeType = false;
+ // document.body.style.cursor = "default";
+
+ // }
+
+ // componentWillMount() {
+ // document.removeEventListener("keydown", this.downKeyHandler);
+ // document.addEventListener("keydown", this.downKeyHandler);
+ // document.removeEventListener("keyup", this.upKeyHandler);
+ // document.addEventListener("keyup", this.upKeyHandler);
+ // }
+
+ // componentWillUnMount() {
+ // document.removeEventListener("keyup", this.upKeyHandler);
+ // document.removeEventListener("keydown", this.downKeyHandler);
+ // }
@action.bound
getIcon() {
@@ -127,96 +139,112 @@ export class IconButton extends React.Component<IconButtonProps>{
}
}
- public getType(): string {
- return this.props.type;
- }
+ // public getType(): string {
+ // return this.props.type;
+ // }
- public getIsSelected(): boolean {
- return this.isSelected;
- }
+ // public getIsSelected(): boolean {
+ // return this.isSelected;
+ // }
- public getIsRemoved() {
- return this.isRemoved;
- }
+ // public getIsRemoved() {
+ // return this.isRemoved;
+ // }
- public getIsAdded() {
- return this.isAdded;
- }
+ // public getIsAdded() {
+ // return this.isAdded;
+ // }
- @action
+ @action.bound
onClick = () => {
let newList: string[] = this.props.getList();
- if(this.removeType && this.props.getActiveType() !== "remove"){
- this.props.changeActiveType("remove")
- // console.log("resetting")
- }
- else if(!this.removeType && this.props.getActiveType() !== "add"){
- this.props.changeActiveType("add");
- // console.log("resetting")
- }
-
- //if it's not already selected
- if (!this.isSelected) {
+ if(!this.isSelected){
this.isSelected = true;
- console.log("changing")
-
- //if actions pertain to removal
- if (this.removeType) {
- this.isAdded = false;
- if (!this.isRemoved) {
- _.pull(newList, this.props.type);
- this.isRemoved = true;
- }
- else {
- newList.push(this.props.type);
- this.isRemoved = false;
- }
- }
- // if actions pertain to adding
- else {
- this.isRemoved = false;
- if (!this.isAdded) {
- if (newList.length === 9) {
- newList = [];
- newList.push(this.props.type)
- } else {
- newList.push(this.props.type);
- }
- this.isAdded = true;
- }
- else {
- _.pull(newList, this.props.type);
- this.isAdded = false;
- }
- }
+ newList.push(this.props.type)
}
- //if it is selected already
- else {
+ else{
this.isSelected = false;
- if (this.isAdded) {
- this.isAdded = false;
- _.pull(newList, this.props.type);
- }
- if (this.isRemoved) {
- this.isRemoved = false;
- newList.push(this.props.type)
- }
- this.props.changeActiveType("none")
+ _.pull(newList, this.props.type)
}
- this.props.updateList(newList)
- console.log(this);
- console.log(this.isAdded, this.isSelected)
+
+ this.props.updateList(newList);
}
- selectedAdded = {
+ // @action
+ // onClick2 = () => {
+ // let newList: string[] = this.props.getList();
+
+ // // if(this.removeType && this.props.getActiveType() !== "remove"){
+ // // this.props.changeActiveType("remove")
+ // // // console.log("resetting")
+ // // }
+ // // else if(!this.removeType && this.props.getActiveType() !== "add"){
+ // // this.props.changeActiveType("add");
+ // // // console.log("resetting")
+ // // }
+
+ // //if it's not already selected
+ // if (!this.isSelected) {
+ // this.isSelected = true;
+ // console.log("changing")
+
+ // //if actions pertain to removal
+ // if (this.removeType) {
+ // this.isAdded = false;
+ // if (!this.isRemoved) {
+ // _.pull(newList, this.props.type);
+ // this.isRemoved = true;
+ // }
+ // else {
+ // newList.push(this.props.type);
+ // this.isRemoved = false;
+ // }
+ // }
+ // // if actions pertain to adding
+ // else {
+ // this.isRemoved = false;
+ // if (!this.isAdded) {
+ // if (newList.length === 9) {
+ // newList = [];
+ // newList.push(this.props.type)
+ // } else {
+ // newList.push(this.props.type);
+ // }
+ // this.isAdded = true;
+ // }
+ // else {
+ // _.pull(newList, this.props.type);
+ // this.isAdded = false;
+ // }
+ // }
+ // }
+ // //if it is selected already
+ // else {
+ // this.isSelected = false;
+ // if (this.isAdded) {
+ // this.isAdded = false;
+ // _.pull(newList, this.props.type);
+ // }
+ // if (this.isRemoved) {
+ // this.isRemoved = false;
+ // newList.push(this.props.type)
+ // }
+ // this.props.changeActiveType("none")
+ // }
+ // this.props.updateList(newList)
+ // console.log(this);
+ // console.log(this.isAdded, this.isSelected)
+ // }
+
+ selected = {
opacity: 1,
backgroundColor: "#c2c2c5" //$alt-accent
}
- selectedRemoved = {
- opacity: 0.2,
- }
+ // selectedRemoved = {
+ // opacity: 0.2,
+ // }
notSelected = {
opacity: 0.6,
@@ -224,23 +252,28 @@ export class IconButton extends React.Component<IconButtonProps>{
hoverStyle = {
opacity: 1,
- backgroundColor: "#c2c2c5" //$alt-accent
+ backgroundColor: "rgb(178, 206, 248)" //$darker-alt-accent
}
- hoverRemoveStyle = {
- opacity: 0.2,
- backgroundColor: "transparent",
- }
+ // hoverRemoveStyle = {
+ // opacity: 0.2,
+ // backgroundColor: "transparent",
+ // }
- banStyle = {
- opacity: 1,
- }
+ // banStyle = {
+ // opacity: 1,
+ // }
@action.bound
public reset() {
this.isSelected = false;
- this.isAdded = false;
- this.isRemoved = false;
+ // this.isAdded = false;
+ // this.isRemoved = false;
+ }
+
+ @action.bound
+ public select() {
+ this.isSelected = true;
}
@action
@@ -287,16 +320,17 @@ export class IconButton extends React.Component<IconButtonProps>{
onMouseLeave={this.onMouseLeave}
onClick={this.onClick}>
<div className="type-icon" id={this.props.type + "-icon"}
- style={this.hover ? this.removeType ? this.hoverRemoveStyle : this.hoverStyle :
- !this.isSelected ? this.notSelected :
- this.isAdded ? this.selectedAdded :
- this.isRemoved ? this.selectedRemoved : this.notSelected}
+ // style={this.hover ? this.removeType ? this.hoverRemoveStyle : this.hoverStyle :
+ // !this.isSelected ? this.notSelected :
+ // this.isAdded ? this.selectedAdded :
+ // this.isRemoved ? this.selectedRemoved : this.notSelected}
+ style = {this.hover ? this.hoverStyle : this.isSelected ? this.selected : this.notSelected}
>
{this.getFA()}
</div>
- <div className="ban-icon"
+ {/* <div className="ban-icon"
style={this.hover ? (this.removeType ? this.banStyle : { opacity: 0 }) : (this.isSelected ? this.isRemoved ? this.banStyle : { opacity: 0 } : { opacity: 0 })}>
- <FontAwesomeIcon className="fontawesome-icon" icon={faBan} /></div>
+ <FontAwesomeIcon className="fontawesome-icon" icon={faBan} /></div> */}
<div className="filter-description">{this.props.type}</div>
</div>
);
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-31 00:41:17 +0000