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

feat: metadata hide image location (#6591)

Browse Source 
* feat: metadata hide image location

* feat: update code

* feat: update code

* feat: update code

---------

Co-authored-by: 杨国璇 <ygx@Hello-word.local>
This commit is contained in:
杨国璇
2024-08-20 18:16:05 +08:00
committed by GitHub
parent f5a74a1b42
commit b030693def
11 changed files with 107 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/css/lib-content-view.css
View File

@@ -381,6 +381,7 @@
}
.cur-view-container .cur-view-path .cur-view-path-left {
flex: 1;
border-bottom: none;
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

1
frontend/src/metadata/metadata-view/_basic/constants/column/common.js
View File

@@ -9,6 +9,7 @@ export const NOT_DISPLAY_COLUMN_KEYS = [
PRIVATE_COLUMN_KEY.OBJ_ID,
PRIVATE_COLUMN_KEY.SUFFIX,
PRIVATE_COLUMN_KEY.FILE_DETAILS,
PRIVATE_COLUMN_KEY.LOCATION,
];
export const VIEW_NOT_DISPLAY_COLUMN_KEYS = [

24
frontend/src/metadata/metadata-view/components/popover/filter-popover/widgets/filter-item-utils.js
View File

@@ -12,8 +12,8 @@ class FilterItemUtils {
value: { column },
label: (
<Fragment>
<span className="filter-header-icon"><Icon iconName={COLUMNS_ICON_CONFIG[type]} /></span>
<span className='select-option-name'>{name}</span>
<span className="sf-metadata-filter-header-icon"><Icon iconName={COLUMNS_ICON_CONFIG[type]} /></span>
<span className="select-option-name">{name}</span>
</Fragment>
)
};
@@ -22,14 +22,14 @@ class FilterItemUtils {
static generatorPredicateOption(filterPredicate) {
return {
value: { filterPredicate },
label: <span className='select-option-name'>{FILTER_PREDICATE_SHOW[filterPredicate]}</span>
label: <span className="select-option-name">{FILTER_PREDICATE_SHOW[filterPredicate]}</span>
};
}
static generatorTermModifierOption(filterTermModifier) {
return {
value: { filterTermModifier },
label: <span className='select-option-name'>{FILTER_TERM_MODIFIER_SHOW[filterTermModifier]}</span>
label: <span className="select-option-name">{FILTER_TERM_MODIFIER_SHOW[filterTermModifier]}</span>
};
}
@@ -37,9 +37,9 @@ class FilterItemUtils {
return {
value: { columnOption: option },
label: (
<div className='select-option-name single-option-name'>
<div className="select-option-name single-option-name">
<div className="single-select-option" style={{ background: option.color, color: option.textColor || null }} title={option.name} aria-label={option.name}>{option.name}</div>
<div className='single-check-icon'>
<div className="single-check-icon">
{selectedOption?.id === option.id && (<Icon iconName="check-mark" />)}
</div>
</div>
@@ -51,9 +51,9 @@ class FilterItemUtils {
return {
value: { columnOption: option },
label: (
<div className='select-option-name multiple-option-name'>
<div className="select-option-name multiple-option-name">
<div className="multiple-select-option" style={{ background: option.color, color: option.textColor }} title={option.name} aria-label={option.name}>{option.name}</div>
<div className='multiple-check-icon'>
<div className="multiple-check-icon">
{filterTerm.indexOf(option.id) > -1 && (<Icon iconName="check-mark" />)}
</div>
</div>
@@ -65,11 +65,11 @@ class FilterItemUtils {
return [
{
value: { filterConjunction: 'And' },
label: (<span className='select-option-name'>{gettext('And')}</span>)
label: (<span className="select-option-name">{gettext('And')}</span>)
},
{
value: { filterConjunction: 'Or' },
label: (<span className='select-option-name'>{gettext('Or')}</span>)
label: (<span className="select-option-name">{gettext('Or')}</span>)
}
];
}
@@ -78,12 +78,12 @@ class FilterItemUtils {
if (conjunction === 'And') {
return {
value: { filterConjunction: 'And' },
label: (<span className='select-option-name'>{gettext('And')}</span>)
label: (<span className="select-option-name">{gettext('And')}</span>)
};
}
return {
value: { filterConjunction: 'Or' },
label: (<span className='select-option-name'>{gettext('Or')}</span>)
label: (<span className="select-option-name">{gettext('Or')}</span>)
};
}
}

4
frontend/src/metadata/metadata-view/components/popover/filter-popover/widgets/filter-item/collaborator-filter/index.css
View File

@@ -1,9 +1,9 @@
.sf-metadata-selector-collaborator.sf-metadata-select .option {
.sf-metadata-selector-collaborator.sf-metadata-select .sf-metadata-option {
line-height: 20px;
padding: 5px 10px 5px 10px !important;
}
.sf-metadata-selector-collaborator.sf-metadata-select .option:hover {
.sf-metadata-selector-collaborator.sf-metadata-select .sf-metadata-option:hover {
background-color: #f7f7f7;
color: #212529;
}

12
frontend/src/metadata/metadata-view/components/popover/filter-popover/widgets/filter-item/index.css
View File

@@ -4,8 +4,8 @@
margin: 0;
}
.sf-metadata-filters .filters-list .single-select-option,
.sf-metadata-filters .filters-list .multiple-select-option {
.sf-metadata-filters .sf-metadata-filters-list .single-select-option,
.sf-metadata-filters .sf-metadata-filters-list .multiple-select-option {
border-radius: 10px;
display: block;
font-size: 13px;
@@ -21,14 +21,14 @@
width: min-content;
}
.sf-metadata-selector-single-select .option,
.sf-metadata-selector-multiple-select .option {
.sf-metadata-selector-single-select .sf-metadata-option,
.sf-metadata-selector-multiple-select .sf-metadata-option {
height: 30px;
padding: 0 10px;
}
.sf-metadata-selector-single-select .option:hover,
.sf-metadata-selector-multiple-select .option:hover {
.sf-metadata-selector-single-select .sf-metadata-option:hover,
.sf-metadata-selector-multiple-select .sf-metadata-option:hover {
background-color: #f7f7f7;
color: #212529;
}

136
frontend/src/metadata/metadata-view/components/popover/filter-popover/widgets/index.css
View File

@@ -1,97 +1,97 @@
.filters-list {
.sf-metadata-filters-list {
min-height: 120px;
max-height: 100%;
padding: 15px;
}
.filters-list.empty-filters-container {
.sf-metadata-filters-list.empty-filters-container {
min-height: 80px;
padding: 16px;
}
.filters-list.empty-filters-container .empty-filters-list {
.sf-metadata-filters-list.empty-filters-container .empty-filters-list {
padding-left: 0;
}
.filters-list .empty-filters-list {
.sf-metadata-filters-list .empty-filters-list {
padding: 0.25rem;
font-size: 14px;
color: #666666;
}
.filters-list .filter-item {
.sf-metadata-filters-list .filter-item {
display: flex;
align-items: center;
padding: 0.25rem 0;
}
.filters-list .filter-item .condition {
.sf-metadata-filters-list .filter-item .condition {
display: flex;
flex: 1;
}
.filters-list .filter-item .condition > div {
.sf-metadata-filters-list .filter-item .condition > div {
height: 38px;
line-height: 38px;
margin-left: 0.5rem;
}
.filters-list .filter-item .condition > div:first-child {
.sf-metadata-filters-list .filter-item .condition > div:first-child {
margin-left: 0;
}
.filters-list .filter-item .filter-term {
.sf-metadata-filters-list .filter-item .filter-term {
max-width: 300px;
}
.filters-list .filter-item .filter-term .option-group-content .option.option-active .sf-metadata-icon {
.sf-metadata-filters-list .filter-item .filter-term .sf-metadata-option-group-content .option.option-active .sf-metadata-icon {
color: #798d99;
}
.filters-list .filter-conjunction {
.sf-metadata-filters-list .filter-conjunction {
width: 72px;
}
.filters-list .filter-conjunction-readonly {
.sf-metadata-filters-list .filter-conjunction-readonly {
width: 52px;
}
.filters-list .filter-container {
.sf-metadata-filters-list .filter-container {
width: calc(100% - 72px);
display: flex;
}
.filters-list .sf-metadata-select .selected-option-show {
.sf-metadata-filters-list .sf-metadata-select .selected-option-show {
width: calc(100% - 20px);
height: 20px;
line-height: 20px;
}
.filters-list .sf-metadata-select.disabled .selected-option-show {
.sf-metadata-filters-list .sf-metadata-select.disabled .selected-option-show {
width: 100%;
}
.filters-list .sf-metadata-select .selected-option {
.sf-metadata-filters-list .sf-metadata-select .selected-option {
width: auto;
overflow-x: auto;
line-height: 1.5;
}
.filters-list .sf-metadata-select .sf-metadata-icon-drop-down {
.sf-metadata-filters-list .sf-metadata-select .sf-metadata-icon-drop-down {
margin-left: 0.5rem;
}
.filters-list .selected-conjunction-show {
.sf-metadata-filters-list .selected-conjunction-show {
padding: 0 10px;
color: #666666;
}
.filters-list .filter-column {
.sf-metadata-filters-list .filter-column {
max-width: 150px;
}
.filter-term .selector-multiple-select .option,
.filter-term .selector-single-select .option {
.filter-term .selector-multiple-select .sf-metadata-option,
.filter-term .selector-single-select .sf-metadata-option {
height: 30px;
padding: 0 10px;
}
@@ -101,41 +101,41 @@
margin-top: 5px;
}
.filter-term .selector-single-select .option:hover {
.filter-term .selector-single-select .sf-metadata-option:hover {
color: #212529;
background-color: #f7f7f7;
}
.filter-term .selector-single-select .option:hover .select-option-name,
.filter-term .selector-multiple-select .option:hover .select-option-name,
.filter-term .selector-collaborator .option:hover .select-option-name {
.filter-term .selector-single-select .sf-metadata-option:hover .select-option-name,
.filter-term .selector-multiple-select .sf-metadata-option:hover .select-option-name,
.filter-term .selector-collaborator .sf-metadata-option:hover .select-option-name {
color: unset;
}
.filters-list .selector-collaborator .selected-option-show {
.sf-metadata-filters-list .selector-collaborator .selected-option-show {
text-overflow: unset;
}
.filters-list .selector-multiple-select .option:hover,
.filters-list .selector-multiple-select .option.option-active,
.filters-list .selector-collaborator .option:hover,
.filters-list .selector-collaborator .option.option-active {
.sf-metadata-filters-list .selector-multiple-select .sf-metadata-option:hover,
.sf-metadata-filters-list .selector-multiple-select .sf-metadata-option.sf-metadata-option-active,
.sf-metadata-filters-list .selector-collaborator .sf-metadata-option:hover,
.sf-metadata-filters-list .selector-collaborator .sf-metadata-option.sf-metadata-option-active {
color: #212529;
background-color: #f7f7f7;
}
.filters-list .selector-multiple-select .option.option-active .select-option-name,
.filters-list .selector-collaborator .option.option-active .select-option-name {
.sf-metadata-filters-list .selector-multiple-select .sf-metadata-option.sf-metadata-option-active .select-option-name,
.sf-metadata-filters-list .selector-collaborator .sf-metadata-option.sf-metadata-option-active .select-option-name {
color: #212529;
}
.filters-list .selected-option .multiple-select-option,
.filters-list .selected-option .single-select-option {
.sf-metadata-filters-list .selected-option .multiple-select-option,
.sf-metadata-filters-list .selected-option .single-select-option {
margin: 0;
display: inline-block;
}
.filters-list .filter-term input {
.sf-metadata-filters-list .filter-term input {
display: flex;
width: 100%;
height: 38px;
@@ -147,19 +147,19 @@
font-size: 0.875rem;
}
.filters-list .filter-term input:hover {
.sf-metadata-filters-list .filter-term input:hover {
border-color: rgb(179, 179, 179);
}
.filters-list .filter-term input:disabled:hover {
.sf-metadata-filters-list .filter-term input:disabled:hover {
border-color: rgba(0, 40, 100, 0.12);
}
.filters-list .filter-term input:hover:focus {
.sf-metadata-filters-list .filter-term input:hover:focus {
border-color: #1991eb;
}
.filters-list .filter-term input:focus {
.sf-metadata-filters-list .filter-term input:focus {
color: #495057;
background-color: #fff;
border-color: #1991eb;
@@ -167,22 +167,22 @@
box-shadow: 0 0 0 2px rgba(70, 127, 207, 0.25);
}
.filters-list .filter-term .date-picker-container input:focus {
.sf-metadata-filters-list .filter-term .date-picker-container input:focus {
color: #495057;
background-color: #fff;
border: 1px solid #fff;
outline: 0;
}
.filters-list .filter-term .date-picker-container table tr {
.sf-metadata-filters-list .filter-term .date-picker-container table tr {
height: 30px;
}
.filters-list .filter-term input[type='checkbox'] {
.sf-metadata-filters-list .filter-term input[type='checkbox'] {
width: inherit;
}
.filters-list .filter-term input[type='checkbox']:focus {
.sf-metadata-filters-list .filter-term input[type='checkbox']:focus {
border: 0;
box-shadow: none;
}
@@ -193,14 +193,14 @@
border: 1px solid rgba(0, 40, 100, 0.12);
}
.filters-list .delete-filter {
.sf-metadata-filters-list .delete-filter {
width: 12px;
height: 20px;
margin-right: 14px;
text-align: center;
}
.filters-list .delete-filter:hover {
.sf-metadata-filters-list .delete-filter:hover {
cursor: pointer;
}
@@ -214,13 +214,13 @@
fill: #666;
}
.filters-list .multiple-option-name {
.sf-metadata-filters-list .multiple-option-name {
display: flex;
align-items: center;
}
.filters-list .multiple-check-icon,
.filters-list .collaborator-check-icon {
.sf-metadata-filters-list .multiple-check-icon,
.sf-metadata-filters-list .collaborator-check-icon {
display: inline-flex;
width: 20px;
height: 20px;
@@ -228,8 +228,8 @@
text-align: center;
}
.filters-list .multiple-check-icon .sf-metadata-icon-check-mark,
.filters-list .collaborator-check-icon .sf-metadata-icon-check-mark {
.sf-metadata-filters-list .multiple-check-icon .sf-metadata-icon-check-mark,
.sf-metadata-filters-list .collaborator-check-icon .sf-metadata-icon-check-mark {
fill: #798d99;
font-size: 12px;
}
@@ -246,83 +246,83 @@
background: #eaeaea;
}
.filters-list .collaborator-show {
.sf-metadata-filters-list .collaborator-show {
flex: 1;
}
.filters-list .collaborator-avatar-container {
.sf-metadata-filters-list .collaborator-avatar-container {
width: 16px;
height: 16px;
display: flex;
align-items: center;
}
.filters-list .collaborator-avatar {
.sf-metadata-filters-list .collaborator-avatar {
width: 16px;
height: 16px;
border-radius: 50%;
}
.filters-list .collaborator-name {
.sf-metadata-filters-list .collaborator-name {
margin-left: 5px;
max-width: 200px;
}
.filters-list .option-collaborator {
.sf-metadata-filters-list .option-collaborator {
display: flex;
}
.filters-list .collaborator-container {
.sf-metadata-filters-list .collaborator-container {
flex: 1;
display: flex;
align-items: center;
}
.filters-list .popover-add-tool {
.sf-metadata-filters-list .popover-add-tool {
border-top: none;
color: #666666;
}
.filters-list .popover-add-tool .popover-add-icon {
.sf-metadata-filters-list .popover-add-tool .popover-add-icon {
margin-right: 14px;
}
.filters-list .option-group {
.sf-metadata-filters-list .sf-metadata-option-group {
max-height: 360px;
overflow: auto;
}
.filters-list .filter-container-readonly .sf-metadata-select .selected-option-show,
.filters-list .filter-conjunction-readonly .sf-metadata-select .selected-option-show {
.sf-metadata-filters-list .filter-container-readonly .sf-metadata-select .selected-option-show,
.sf-metadata-filters-list .filter-conjunction-readonly .sf-metadata-select .selected-option-show {
width: 100%;
}
.dropdown-item .collaborator,
.filters-list .option-group .option-group-content .collaborator {
.sf-metadata-filters-list .sf-metadata-option-group .sf-metadata-option-group-content .collaborator {
background-color: unset;
}
.filters-list .sf-metadata-select .selected-option-show .remove-container {
.sf-metadata-filters-list .sf-metadata-select .selected-option-show .remove-container {
display: none;
}
.filter-header-icon {
.sf-metadata-filter-header-icon {
display: inline-block;
padding: 0 0.3125rem;
margin-left: -0.3125rem;
}
.filter-header-icon .sf-metadata-icon {
.sf-metadata-filter-header-icon .sf-metadata-icon {
font-size: 14px;
fill: #aaa;
cursor: default;
}
.option:hover .filter-header-icon .sf-metadata-icon,
.option.option-active .filter-header-icon .sf-metadata-icon {
.sf-metadata-option:hover .sf-metadata-filter-header-icon .sf-metadata-icon,
.sf-metadata-option.sf-metadata-option-active .sf-metadata-filter-header-icon .sf-metadata-icon {
fill: #fff;
}
.option:not(.option-active):hover .filter-header-icon .sf-metadata-icon {
.sf-metadata-option:not(.sf-metadata-option-active):hover .sf-metadata-filter-header-icon .sf-metadata-icon {
fill: #aaa;
}

2
frontend/src/metadata/metadata-view/components/popover/filter-popover/widgets/index.js
View File

@@ -109,7 +109,7 @@ class FiltersList extends Component {
let { filters, className, emptyPlaceholder, columns } = this.props;
const isEmpty = filters.length === 0;
return (
<div className={classnames('filters-list', { 'empty-filters-container': isEmpty }, { [className]: className })}>
<div className={classnames('sf-metadata-filters-list', { 'empty-filters-container': isEmpty }, { [className]: className })}>
{isEmpty && <div className="empty-filters-list">{emptyPlaceholder}</div>}
{!isEmpty &&
filters.map((filter, index) => {

12
frontend/src/metadata/metadata-view/components/popover/groupbys-popover/groupbys/groupby-item.js
View File

@@ -74,8 +74,8 @@ const GroupbyItem = memo(({
value: { column },
label: (
<Fragment>
<span className="filter-header-icon"><Icon iconName={COLUMNS_ICON_CONFIG[type]} /></span>
<span className='select-option-name'>{name}</span>
<span className="sf-metadata-filter-header-icon"><Icon iconName={COLUMNS_ICON_CONFIG[type]} /></span>
<span className="select-option-name">{name}</span>
</Fragment>
)
};
@@ -90,10 +90,10 @@ const GroupbyItem = memo(({
return [
{
value: { sortType: SORT_TYPE.UP },
label: <span className='select-option-name'>{gettext('Up')}</span>
label: <span className="select-option-name">{gettext('Up')}</span>
}, {
value: { sortType: SORT_TYPE.DOWN },
label: <span className='select-option-name'>{gettext('Down')}</span>
label: <span className="select-option-name">{gettext('Down')}</span>
}
];
}, []);
@@ -108,7 +108,7 @@ const GroupbyItem = memo(({
return granularityList.map((granularity) => {
return {
value: granularity,
label: <span className='select-option-name'>{gettext(displayGranularity[granularity])}</span>,
label: <span className="select-option-name">{gettext(displayGranularity[granularity])}</span>,
};
});
}, [columns, groupby]);
@@ -118,7 +118,7 @@ const GroupbyItem = memo(({
const countType = getSelectedCountType(column, count_type);
if (countType) {
return {
label: <span className='select-option-name'>{gettext(countType)}</span>
label: <span className="select-option-name">{gettext(countType)}</span>
};
}
}, [column, groupby]);

4
frontend/src/metadata/metadata-view/components/popover/index.css
View File

@@ -29,3 +29,7 @@
.sf-metadata-filter-popover .popover-add-tool.disabled {
color: #c2c2c2;
}
.sf-metadata-select.custom-select {
font-size: 14px;
}

12
frontend/src/metadata/metadata-view/components/popover/sort-popover/index.jsx
View File

@@ -151,8 +151,8 @@ class SortPopover extends Component {
value: { column },
label: (
<Fragment>
<span className="filter-header-icon"><Icon iconName={COLUMNS_ICON_CONFIG[type]} /></span>
<span className='select-option-name'>{name}</span>
<span className="sf-metadata-filter-header-icon"><Icon iconName={COLUMNS_ICON_CONFIG[type]} /></span>
<span className=''>{name}</span>
</Fragment>
)
};
@@ -163,7 +163,7 @@ class SortPopover extends Component {
return SORT_TYPES.map(sortType => {
return {
value: { sortType },
label: <span className='select-option-name'>{gettext(sortType)}</span>
label: <span className="select-option-name">{gettext(sortType)}</span>
};
});
};
@@ -183,15 +183,15 @@ class SortPopover extends Component {
let selectedColumn = {
label: (
<Fragment>
<span className="filter-header-icon"><Icon iconName={COLUMNS_ICON_CONFIG[type]} /></span>
<span className='select-option-name' title={name} aria-label={name}>{name}</span>
<span className="sf-metadata-filter-header-icon"><Icon iconName={COLUMNS_ICON_CONFIG[type]} /></span>
<span className="select-option-name" title={name} aria-label={name}>{name}</span>
</Fragment>
)
};
let selectedTypeShow = sort.sort_type;
let selectedSortType = selectedTypeShow && {
label: <span className='select-option-name'>{gettext(selectedTypeShow)}</span>
label: <span className="select-option-name">{gettext(selectedTypeShow)}</span>
};
return (

14
frontend/src/metadata/metadata-view/components/table/index.css
View File

@@ -395,20 +395,6 @@
flex-direction: column;
}
/* custom table filters */
.table-filters .filters-list .filter-item .filter-term {
max-width: unset;
}
.table-filters .filters-list .sf-metadata-select.custom-select {
max-width: 700px;
}
.table-filters .filters-list .single-select-option,
.table-filters .filters-list .multiple-select-option {
max-width: 250px;
}
.sf-metadata-wrapper .sf-metadata-main {
flex: 1;
overflow: hidden;