Skip to content

Commit

Permalink
update setting panel and favicon
Browse files Browse the repository at this point in the history
  • Loading branch information
zhouwenxuan authored and zhouwenxuan committed Oct 29, 2024
1 parent 55d9cdf commit 6c4f344
Show file tree
Hide file tree
Showing 12 changed files with 383 additions and 24 deletions.
9 changes: 8 additions & 1 deletion frontend/src/metadata/components/view-toolbar/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,14 @@ const ViewToolBar = ({ viewId, isCustomPermission, showDetail }) => {
/>
)}
{viewType === VIEW_TYPE.KANBAN && (
<KanbanViewToolBar />
<KanbanViewToolBar
readOnly={readOnly}
isCustomPermission={isCustomPermission}
view={view}
collaborators={collaborators}
modifyFilters={modifyFilters}
modifySorts={modifySorts}
/>
)}
</div>
);
Expand Down
Original file line number Diff line number Diff line change
@@ -1,24 +1,79 @@
import React from 'react';
import React, { useMemo } from 'react';
import PropTypes from 'prop-types';
import { IconBtn } from '@seafile/sf-metadata-ui-component';
import { EVENT_BUS_TYPE } from '../../../constants';
import { EVENT_BUS_TYPE, PRIVATE_COLUMN_KEY } from '../../../constants';
import { FilterSetter, SortSetter } from '../../data-process-setter';

const KanbanViewToolBar = () => {
const KanbanViewToolBar = ({
readOnly,
view,
collaborators,
modifyFilters,
modifySorts
}) => {
const viewType = useMemo(() => view.type, [view]);
const viewColumns = useMemo(() => {
if (!view) return [];
return view.columns;
}, [view]);

const filterColumns = useMemo(() => {
return viewColumns.filter(c => c.key !== PRIVATE_COLUMN_KEY.FILE_TYPE);
}, [viewColumns]);

const onToggleKanbanSetting = () => {
window.sfMetadataContext.eventBus.dispatch(EVENT_BUS_TYPE.TOGGLE_KANBAN_SETTING);
};

return (
<IconBtn
iconName="set-up"
className='sf-metadata-view-tool-operation-btn sf-metadata-view-tool-setting'
size={24}
role="button"
aria-label="Setting"
tabIndex={0}
onClick={onToggleKanbanSetting}
/>
<>
<div className="sf-metadata-tool-left-operations">
<FilterSetter
isNeedSubmit={true}
wrapperClass="sf-metadata-view-tool-operation-btn sf-metadata-view-tool-filter"
filtersClassName="sf-metadata-filters"
target="sf-metadata-filter-popover"
readOnly={readOnly}
filterConjunction={view.filter_conjunction}
basicFilters={view.basic_filters}
filters={view.filters}
columns={filterColumns}
modifyFilters={modifyFilters}
collaborators={collaborators}
viewType={viewType}
/>
<SortSetter
isNeedSubmit={true}
wrapperClass="sf-metadata-view-tool-operation-btn sf-metadata-view-tool-sort"
target="sf-metadata-sort-popover"
readOnly={readOnly}
sorts={view.sorts}
type={viewType}
columns={viewColumns}
modifySorts={modifySorts}
/>
<IconBtn
iconName="set-up"
className='sf-metadata-view-tool-operation-btn sf-metadata-view-tool-setting'
size={24}
role="button"
aria-label="Setting"
tabIndex={0}
onClick={onToggleKanbanSetting}
/>
</div>
<div className="sf-metadata-tool-right-operations"></div>
</>

);
};

KanbanViewToolBar.propTypes = {
readOnly: PropTypes.bool,
view: PropTypes.object,
collaborators: PropTypes.array,
modifyFilters: PropTypes.func,
modifySorts: PropTypes.func
};

export default KanbanViewToolBar;
1 change: 1 addition & 0 deletions frontend/src/metadata/constants/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -141,4 +141,5 @@ export const KANBAN_SETTINGS_KEYS = {
HIDE_EMPTY_VALUES: 'hide_empty_values',
SHOW_FIELD_NAMES: 'show_field_names',
TEXT_WRAP: 'text_wrap',
HIDDEN_COLUMNS: 'hidden_columns',
};
13 changes: 12 additions & 1 deletion frontend/src/metadata/constants/view.js
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,17 @@ export const VIEW_TYPE_DEFAULT_BASIC_FILTER = {
filter_term: 'picture'
}
],
[VIEW_TYPE.KANBAN]: [],
[VIEW_TYPE.KANBAN]: [
{
column_key: PRIVATE_COLUMN_KEY.IS_DIR,
filter_predicate: FILTER_PREDICATE_TYPE.IS,
filter_term: 'file'
}, {
column_key: PRIVATE_COLUMN_KEY.FILE_TYPE,
filter_predicate: FILTER_PREDICATE_TYPE.IS_ANY_OF,
filter_term: []
},
],
};

export const VIEW_TYPE_DEFAULT_SORTS = {
Expand All @@ -50,6 +60,7 @@ export const VIEW_TYPE_DEFAULT_SORTS = {
export const VIEW_SORT_COLUMN_RULES = {
[VIEW_TYPE.TABLE]: (column) => SORT_COLUMN_OPTIONS.includes(column.type),
[VIEW_TYPE.GALLERY]: (column) => GALLERY_SORT_COLUMN_OPTIONS.includes(column.type) || GALLERY_SORT_PRIVATE_COLUMN_KEYS.includes(column.key),
[VIEW_TYPE.KANBAN]: (column) => SORT_COLUMN_OPTIONS.includes(column.type),
};

export const VIEW_FIRST_SORT_COLUMN_RULES = {
Expand Down
3 changes: 3 additions & 0 deletions frontend/src/metadata/metadata-tree-view/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,9 @@ const updateFavicon = (iconName) => {
case VIEW_TYPE.TABLE:
favicon.href = `${mediaUrl}favicons/table.png`;
break;
case VIEW_TYPE.KANBAN:
favicon.href = `${mediaUrl}favicons/kanban.png`;
break;
default:
favicon.href = `${mediaUrl}favicons/favicon.png`;
}
Expand Down
133 changes: 132 additions & 1 deletion frontend/src/metadata/views/kanban/index.css
Original file line number Diff line number Diff line change
Expand Up @@ -190,6 +190,7 @@
width: 100%;
height: 100%;
padding: 14px 20px;
font-size: 14px;
}

.sf-metadata-view-kanban-setting-panel .setting-item {
Expand All @@ -201,22 +202,152 @@
margin-bottom: 8px;
}

.sf-metadata-view-kanban-setting-panel .setting-item .custom-switch-description {
margin: 0;
}

.sf-metadata-view-kanban-setting-panel .setting-item .switch-setting-item {
padding: 0;
display: flex;
justify-content: space-between;
}

.sf-metadata-view-kanban-setting-panel .setting-item .custom-switch {
.sf-metadata-view-kanban-setting-panel .custom-switch {
width: 100%;
padding: 0;
display: flex;
justify-content: space-between;
align-items: center;
}

.sf-metadata-view-kanban-setting-panel .custom-switch-indicator{
border-radius: 6px;
height: 12px;
width: 22px;
margin-right: 8px;
}

.sf-metadata-view-kanban-setting-panel .custom-switch .custom-switch-indicator:before {
height: 8px;
width: 8px;
}

.sf-metadata-view-kanban-setting-panel .custom-switch .custom-switch-input:checked~.custom-switch-indicator:before {
left: 12px;
}

.sf-metadata-view-kanban-setting-panel .split-line {
width: 100%;
height: 1px;
margin-bottom: 14px;
background-color: #e2e2e2;
}

.sf-metadata-view-kanban-setting-panel .toggle-hide-columns-btn {
display: flex;
justify-content: space-between;
align-items: center;
}

.sf-metadata-view-kanban-setting-panel .toggle-hide-columns-btn-icon {
width: 20px;
height: 20px;
display: flex;
justify-content: center;
align-items: center;
}

.sf-metadata-view-kanban-setting-panel .sf-metadata-kanban-hide-columns {
padding: 0.5rem 0;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}

.sf-metadata-kanban-hide-columns .hide-columns-list {
width: 100%;
overflow: auto;
}

.sf-metadata-kanban-hide-columns .sf-metadata-switch {
width: 100%;
}

.sf-metadata-kanban-hide-columns .hide-columns-list .hide-column-item {
display: flex;
align-items: center;
position: relative;
width: 100%;
padding: 4px 0;
clear: both;
font-weight: 400;
color: #212529;
text-align: inherit;
white-space: nowrap;
background-color: transparent;
border: 0;
}

.sf-metadata-kanban-hide-columns .hide-columns-list .hide-column-item:hover {
background: #f5f5f5;
}

.sf-metadata-kanban-hide-columns .hide-columns-list .hide-column-item:not(.disabled):hover,
.sf-metadata-kanban-hide-columns .hide-columns-list .hide-column-item:not(.disabled):hover * {
cursor: pointer;
}

.sf-metadata-kanban-hide-columns .hide-column-item .hide-column-item-switch {
flex: 1;
overflow: hidden;
}

.sf-metadata-kanban-hide-columns .hide-column-item .hide-column-item-switch .custom-switch {
width: 100%;
}

.sf-metadata-kanban-hide-columns .hide-column-item .custom-switch {
padding-left: 0;
display: inline-flex;
align-items: center;
justify-content: space-between;
}

.sf-metadata-kanban-hide-columns .hide-column-item .custom-switch .custom-switch-description {
margin-left: 0;
padding-right: 5px;
flex: 1;
color: #212529;
transition: .3s color;
}

.sf-metadata-kanban-hide-columns .hide-columns-list .hide-column-item .sf-metadata-icon {
font-size: 16px;
margin-right: 8px;
fill: #aaa;
}

.sf-metadata-kanban-hide-columns .sf-metadata-hide-columns-operations {
display: flex;
justify-content: space-between;
padding: 8px 0;
width: 100%;
}

.sf-metadata-kanban-hide-columns .sf-metadata-hide-columns-operations .sf-metadata-hide-columns-operation {
display: flex;
align-items: center;
justify-content: center;
background: #f5f5f5;
border-radius: 3px;
color: #666;
height: 28px;
cursor: pointer;
}

.sf-metadata-kanban-hide-columns .sf-metadata-hide-columns-operations .sf-metadata-hide-columns-operation:hover {
background: #e9e9e9;
color: #212529;
cursor: pointer;
}
6 changes: 4 additions & 2 deletions frontend/src/metadata/views/kanban/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -34,10 +34,11 @@ const Kanban = () => {
hideEmptyValues,
showFieldNames,
textWrap,
hiddenColumns,
updateSetting,
} = useKanbanSettings(viewsMap);

const shownColumns = useMemo(() => getViewShownColumns(viewsMap[selectedViewId], metadata.columns), [viewsMap, metadata.columns, selectedViewId]);
const shownColumns = useMemo(() => getViewShownColumns(metadata.view, metadata.view.columns), [metadata.view]);

const groupByColumn = useMemo(() => {
return shownColumns.find(col => col.key === groupByColumnKey);
Expand All @@ -54,7 +55,8 @@ const Kanban = () => {
hideEmptyValues,
showFieldNames,
textWrap,
}), [selectedViewId, groupByColumnKey, titleFieldKey, hideEmptyValues, showFieldNames, textWrap]);
hiddenColumns,
}), [selectedViewId, groupByColumnKey, titleFieldKey, hideEmptyValues, showFieldNames, textWrap, hiddenColumns]);

const contentFields = useMemo(() => {
return shownColumns.filter(col => col.key !== titleFieldKey);
Expand Down
Loading

0 comments on commit 6c4f344

Please sign in to comment.