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

[select-editor] improved it

Browse Source
This commit is contained in:
llj
2021-12-10 13:39:48 +08:00
parent 40a5ad16e3
commit 2d15945e10
2 changed files with 33 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
frontend/src/components/select-editor/select-editor.js
View File

@@ -58,7 +58,7 @@ class SelectEditor extends React.Component {
value: gettext('Add custom permission'), value: gettext('Add custom permission'),
isDisabled: true, isDisabled: true,
label: ( label: (
<div className="btn-add-custom-permission" onClick={this.props.onAddCustomPermissionToggle}> <div className="permission-editor-btn-add-custom-permission" onClick={this.props.onAddCustomPermissionToggle}>
<i className="fa fa-plus"></i> <i className="fa fa-plus"></i>
<span>{gettext('Add custom permission')}</span> <span>{gettext('Add custom permission')}</span>
</div> </div>
@@ -108,6 +108,28 @@ class SelectEditor extends React.Component {
render() { render() {
let { currentOption, isTextMode } = this.props; let { currentOption, isTextMode } = this.props;
const MenuSelectStyle = {
option: (provided, state) => {
const { isDisabled, isSelected, isFocused } = state;
return ({
...provided,
cursor: isDisabled ? 'default' : 'pointer',
//backgroundColor: isSelected ? '#5A98F8' : (isFocused ? '#f5f5f5' : '#fff'),
'.header-icon .dtable-font': {
color: isSelected ? '#fff' : '#aaa',
},
});
},
control: (provided) => ({
...provided,
fontSize: '14px',
cursor: 'pointer',
lineHeight: '1.5',
}),
menuPortal: base => ({ ...base, zIndex: 9999 }),
indicatorSeparator: () => {},
};
// scence1: isTextMode (text)editor-icon --> select // scence1: isTextMode (text)editor-icon --> select
// scence2: !isTextMode select // scence2: !isTextMode select
return ( return (
@@ -121,6 +143,11 @@ class SelectEditor extends React.Component {
value={currentOption} value={currentOption}
onChange={this.onOptionChanged} onChange={this.onOptionChanged}
captureMenuScroll={false} captureMenuScroll={false}
menuPlacement="auto"
menuPosition={'fixed'}
menuPortalTarget={document.querySelector('#wrapper')}
styles={MenuSelectStyle}
menuShouldScrollIntoView
/> />
} }
{(isTextMode && !this.state.isEditing) && {(isTextMode && !this.state.isEditing) &&

10
frontend/src/css/select-editor.css
View File

@@ -1,4 +1,4 @@
.permission-editor .permission-editor-explanation { .permission-editor-explanation {
user-select: none; user-select: none;
padding-left: 10px; padding-left: 10px;
color: #9c9c9c; color: #9c9c9c;
@@ -32,17 +32,17 @@
padding: 0 0.5rem; padding: 0 0.5rem;
} }
.permission-editor .permission-editor__menu .permission-editor__option--is-disabled { .permission-editor__menu .permission-editor__option--is-disabled {
color: #9c9c9c; color: #9c9c9c;
border-top: 1px solid #dedede; border-top: 1px solid #dedede;
} }
.permission-editor .permission-editor__menu .permission-editor__option--is-disabled:hover { .permission-editor__menu .permission-editor__option--is-disabled:hover {
background-color: #f0f0f0 !important; background-color: #f0f0f0 !important;
color: #9c9c9c !important; color: #9c9c9c !important;
} }
.permission-editor .btn-add-custom-permission { .permission-editor-btn-add-custom-permission {
display: flex; display: flex;
align-items: center; align-items: center;
padding: .5rem 0; padding: .5rem 0;
@@ -50,7 +50,7 @@
line-height: 13px; line-height: 13px;
} }
.permission-editor .btn-add-custom-permission .fa { .permission-editor-btn-add-custom-permission .fa {
font-size: 12px; font-size: 12px;
line-height: 13px; line-height: 13px;
margin-right: .25rem; margin-right: .25rem;