haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-08-14 13:13:22 +00:00
Code Issues Releases Wiki Activity

change search button style (#7519)

Browse Source
This commit is contained in:
Michael An 2025-02-25 17:15:29 +08:00 committed by GitHub
parent 453deac354
commit 96fd59b54e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 38 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
frontend/src/components/sf-table/index.css
View File

@ -43,6 +43,7 @@
right: 4px; right: 4px;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
color: #666;
} }
.sf-table-searcher-input-wrapper .btn-close-searcher { .sf-table-searcher-input-wrapper .btn-close-searcher {
@ -66,30 +67,25 @@
text-align: center; text-align: center;
} }
.sf-table-searcher-input-wrapper .search-upward, .toolbar-search-btn {
.sf-table-searcher-input-wrapper .search-backward { width: 20px;
height: 20px;
border-radius: 3px;
position: relative;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
margin-left: 4px;
}
.toolbar-search-btn:hover {
background-color: #efefef;
}
.toolbar-search-btn i.sf3-font {
color: #666; color: #666;
font-size: 12px; font-size: 12px;
background-color: #efefef;
display: inline-block;
height: 20px;
line-height: 20px;
width: 20px;
}
.sf-table-searcher-input-wrapper .search-upward:hover,
.sf-table-searcher-input-wrapper .search-backward:hover {
cursor: pointer;
background-color: #DBDBDB;
}
.sf-table-searcher-input-wrapper .search-upward {
margin-left: 8px;
border-radius: 2px 0 0 2px;
}
.sf-table-searcher-input-wrapper .search-backward {
border-radius: 0 2px 2px 0;
} }
.sf-table-wrapper { .sf-table-wrapper {

32
frontend/src/components/sf-table/searcher/index.js
View File

@ -38,7 +38,7 @@ const SFTableSearcher = ({ recordsCount, columnsCount, searchResult, searchCells
} }
}; };
const renderSearchPollButton = () => { const renderSearchButtons = () => {
return ( return (
<span className="input-icon-addon search-poll-button"> <span className="input-icon-addon search-poll-button">
{hasSearchValue && {hasSearchValue &&
@ -50,12 +50,20 @@ const SFTableSearcher = ({ recordsCount, columnsCount, searchResult, searchCells
} }
{hasSearchResult && {hasSearchResult &&
<> <>
<i className="sf3-font sf3-font-down rotate-180 search-upward" <span
onClick={focusPreviousMatchedCell ? focusPreviousMatchedCell : () => {}}> className='toolbar-search-btn'
</i> role="button"
<i className="sf3-font sf3-font-down search-backward" onClick={focusPreviousMatchedCell ? focusPreviousMatchedCell : () => {}}
onClick={focusNextMatchedCell ? focusNextMatchedCell : () => {}}> >
</i> <i aria-hidden="true" className="sf3-font sf3-font-down rotate-180"></i>
</span>
<span
role="button"
className='toolbar-search-btn'
onClick={focusNextMatchedCell ? focusNextMatchedCell : () => {}}
>
<i aria-hidden="true" className="sf3-font sf3-font-down"></i>
</span>
</> </>
} }
</span> </span>
@ -74,12 +82,12 @@ const SFTableSearcher = ({ recordsCount, columnsCount, searchResult, searchCells
aria-label={gettext('Search')} aria-label={gettext('Search')}
tabIndex={0} tabIndex={0}
> >
<i className='active-search m-0 sf3-font sf3-font-search'></i> <i className='active-search m-0 sf3-font sf3-font-search' aria-hidden="true" ></i>
</span> </span>
)} )}
{isSearchActive && ( {isSearchActive && (
<div className='sf-table-searcher-input-wrapper'> <div className='sf-table-searcher-input-wrapper'>
<i className='input-icon-addon sf3-font sf3-font-search' /> <i className='input-icon-addon sf3-font sf3-font-search' aria-hidden="true" />
<SFTableSearcherInput <SFTableSearcherInput
recordsCount={recordsCount} recordsCount={recordsCount}
columnsCount={columnsCount} columnsCount={columnsCount}
@ -87,9 +95,9 @@ const SFTableSearcher = ({ recordsCount, columnsCount, searchResult, searchCells
setHasSearchValue={setHasSearchValue} setHasSearchValue={setHasSearchValue}
searchCells={searchCells} searchCells={searchCells}
/> />
{renderSearchPollButton()} {renderSearchButtons()}
<span className="btn-close-searcher-wrapper input-icon-addon" onClick={handleCloseSearcher}> <span className="btn-close-searcher-wrapper input-icon-addon" onClick={handleCloseSearcher} role="button">
<i className='btn-close-searcher sf3-font sf3-font-x-01'></i> <i className='btn-close-searcher sf3-font sf3-font-x-01' aria-hidden="true"></i>
</span> </span>
</div> </div>
)} )}