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

add extensible properties prompts (#6818)

Browse Source 
* add extensible properties prompts

* Update index.css

* fix code format

* update bell svg

---------

Co-authored-by: Michael An <2331806369@qq.com>
This commit is contained in:
Aries
2024-09-26 11:47:02 +08:00
committed by GitHub
parent 2bf0c33880
commit 43471e3573
4 changed files with 66 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
frontend/src/components/dir-view-mode/dir-views.js
View File

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
import { gettext } from '../../utils/constants';
import TreeSection from '../tree-section';
import { MetadataStatusManagementDialog, MetadataTreeView, useMetadata } from '../../metadata';
import ExtensionPrompts from './extension-prompts';
const DirViews = ({ userPerm, repoID, currentPath, currentRepoInfo }) => {
const enableMetadataManagement = useMemo(() => {
@@ -44,9 +45,11 @@ const DirViews = ({ userPerm, repoID, currentPath, currentRepoInfo }) => {
moreOperations={moreOperations}
moreOperationClick={moreOperationClick}
>
{enableMetadata && Array.isArray(navigation) && navigation.length > 0 && (
{!enableMetadata ? (
<ExtensionPrompts />
) : Array.isArray(navigation) && navigation.length > 0 ? (
<MetadataTreeView userPerm={userPerm} currentPath={currentPath} />
)}
) : null}
</TreeSection>
{showMetadataStatusManagementDialog && (
<MetadataStatusManagementDialog

27
frontend/src/components/dir-view-mode/extension-prompts/index.css Normal file
View File

@@ -0,0 +1,27 @@
.extension-prompts-container {
display: flex;
flex-direction: row;
align-items: start;
justify-content: center;
gap: 4px;
height: 100%;
width: 100%;
padding: 10px;
border-radius: 3px;
background-color: #f8fafd;
font-size: 13px;
color: #868e96;
}
.extension-prompts-container:hover {
color: #703719;
background-color: #fffbed;
}
.extension-prompts-container:hover .extension-prompts-icon {
fill: #fc6440;
}
.extension-prompts-content p {
margin: 0;
}

29
frontend/src/components/dir-view-mode/extension-prompts/index.js Normal file
View File

@@ -0,0 +1,29 @@
import React from 'react';
import Icon from '../../icon';
import { gettext } from '../../../utils/constants';
import './index.css';
const ExtensionPrompts = () => {
return (
<div
className='extension-prompts-container'
aria-label={gettext('Extension Prompts')}
>
<div className='extension-prompts-icon-wrapper'>
<Icon
symbol={'bell'}
className='extension-prompts-icon'
aria-label={gettext('Bell Icon')}
/>
</div>
<div className='extension-prompts-content'>
<p>
{gettext('Turn on extensible properties and views to experience a new way of managing files')}
</p>
</div>
</div>
);
};
export default ExtensionPrompts;