haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-08 02:10:24 +00:00
Code Issues Releases Wiki Activity

[search] 'turn on/off semantic search': redesigned UI/UX for this setting (added a 'setting' icon to toggle the new 'setting popover') (#5932)

Browse Source
This commit is contained in:
llj
2024-02-01 16:20:46 +08:00
committed by GitHub
parent 24e0b20527
commit 26bc311673
9 changed files with 229 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
frontend/src/components/search/ai-search.js
View File

@@ -53,6 +53,7 @@ export default class AISearch extends Component {
showRecent: true,
isResultGetted: false,
isCloseShow: false,
isSettingsShown: false,
isSearchInputShow: false, // for mobile
searchPageUrl: this.baseSearchPageURL,
indexState: '',
@@ -357,6 +358,7 @@ export default class AISearch extends Component {
value: '',
isMaskShow: false,
isCloseShow: false,
isSettingsShown: false,
isResultGetted: false,
resultItems: [],
highlightIndex: 0,
@@ -547,7 +549,7 @@ export default class AISearch extends Component {
<Switch
checked={true}
placeholder={gettext('Turn on semantic search for this library')}
className="w-100 mt-1"
className="position-absolute p-4 bg-white border rounded shadow-sm search-settings"
size="small"
textPosition='right'
disabled
@@ -558,7 +560,7 @@ export default class AISearch extends Component {
<Switch
checked={true}
placeholder={gettext('Turn off semantic search for this library')}
className="w-100 mt-1"
className="position-absolute p-4 bg-white border rounded shadow-sm search-settings"
size="small"
onChange={this.onDeleteIndex}
textPosition='right'
@@ -569,7 +571,7 @@ export default class AISearch extends Component {
<Switch
checked={false}
placeholder={gettext('Turn on semantic search for this library')}
className="w-100 mt-1"
className="position-absolute p-4 bg-white border rounded shadow-sm search-settings"
size="small"
onChange={this.onCreateIndex}
textPosition='right'
@@ -579,6 +581,12 @@ export default class AISearch extends Component {
return null;
}
toggleSettingsShown = () => {
this.setState({
isSettingsShown: !this.state.isSettingsShown
});
}
render() {
let width = this.state.width !== 'default' ? this.state.width : '';
let style = {'width': width};
@@ -604,7 +612,7 @@ export default class AISearch extends Component {
<div className="search">
<div className={`search-mask ${isMaskShow ? 'show' : 'hide'}`} onClick={this.onCloseHandler}></div>
<div className={`search-container ${isMaskShow ? 'show' : ''}`}>
<div className={`input-icon ${isMaskShow ? 'mb-1' : ''}`}>
<div className={`input-icon`}>
<i className="search-icon-left input-icon-addon fas fa-search"></i>
<input
type="text"
@@ -620,15 +628,20 @@ export default class AISearch extends Component {
onKeyDown={this.onKeydownHandler}
/>
{this.state.isCloseShow &&
<>
{(this.isRepoOwner || this.isAdmin) &&
<button type="button" className="search-icon-right input-icon-addon sf3-font-set-up sf3-font border-0 bg-transparent mr-3" onClick={this.toggleSettingsShown} aria-label={gettext('Settings')}></button>
}
<button type="button" className="search-icon-right input-icon-addon fas fa-times border-0 bg-transparent mr-4" onClick={this.onCloseHandler} aria-label={gettext('Close')}></button>
</>
}
</div>
{this.state.isSettingsShown && this.renderSwitch()}
<div
className="search-result-container dropdown-search-result-container"
className="search-result-container dropdown-search-result-container mt-1"
onScroll={this.onResultListScroll}
ref={this.searchContainer}
>
{isCloseShow && (this.isRepoOwner || this.isAdmin) && this.renderSwitch()}
{this.renderSearchResult()}
</div>
</div>