haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-05-10 17:05:06 +00:00
Code Issues Releases Wiki Activity

change search button style ()

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
frontend/src/components/sf-table
index.css
searcher
index.js

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

@ -43,6 +43,7 @@
right: 4px;
top: 50%;
transform: translateY(-50%);
color: #666;
}
.sf-table-searcher-input-wrapper .btn-close-searcher {
@ -66,30 +67,25 @@
text-align: center;
}
.sf-table-searcher-input-wrapper .search-upward,
.sf-table-searcher-input-wrapper .search-backward {
.toolbar-search-btn {
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;
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 {

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