Montassar Ghanmy
+87
@@ -0,0 +1,87 @@
|
||||
import React from 'react';
|
||||
import DriveElement from './drive-element.jsx';
|
||||
import UIDirectory from './ui/directory.jsx';
|
||||
import Loader from 'components/loader/loader.jsx';
|
||||
|
||||
import WorkspaceUserRights from 'app/features/workspaces/services/workspace-user-rights-service';
|
||||
import Draggable from 'components/draggable/draggable';
|
||||
import DroppableZone from 'components/draggable/droppable-zone.jsx';
|
||||
import Languages from 'app/features/global/services/languages-service';
|
||||
import './drive.scss';
|
||||
|
||||
export default class Directory extends DriveElement {
|
||||
constructor(props) {
|
||||
super();
|
||||
this.props = props;
|
||||
this.state = {
|
||||
loading: true,
|
||||
};
|
||||
}
|
||||
componentDidMount() {
|
||||
super.componentDidMount();
|
||||
if (this.state.loading) {
|
||||
setTimeout(() => {
|
||||
this.setState({ loading: false });
|
||||
}, 4000);
|
||||
}
|
||||
}
|
||||
render() {
|
||||
if (!this.state.element || !this.state.element.front_id) {
|
||||
return (
|
||||
<div className="directory mini" style={{ textAlign: 'center' }}>
|
||||
{this.state.loading && <Loader color="#CCC" className="file_loader" />}
|
||||
{!this.state.loading && (
|
||||
<span className="text" style={{ opacity: 0.5 }}>
|
||||
{Languages.t(
|
||||
'components.drive.navigators.directory_not_found',
|
||||
[],
|
||||
'Directory not found.',
|
||||
)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
this.state.loading = false;
|
||||
}
|
||||
|
||||
if (this.props.hide) {
|
||||
return '';
|
||||
}
|
||||
|
||||
return (
|
||||
<DroppableZone
|
||||
types={['file']}
|
||||
onDrop={data => this.dropFile(data)}
|
||||
onLongOver={this.props.onClick}
|
||||
className="directory_drop_zone"
|
||||
>
|
||||
<Draggable
|
||||
style={this.props.style}
|
||||
className={
|
||||
'js-drive-multi-selector-selectable fade_in directory ' +
|
||||
(this.state.selected ? 'is_selected ' : '') +
|
||||
this.props.className
|
||||
}
|
||||
deactivated={
|
||||
(this.state.element.is_directory && this.state.element.application_id) ||
|
||||
WorkspaceUserRights.isNotConnected()
|
||||
}
|
||||
refDraggable={node => (this.node = node)}
|
||||
onClick={evt => {
|
||||
this.clickElement(evt);
|
||||
}}
|
||||
onDoubleClick={this.props.onDoubleClick}
|
||||
parentClassOnDrag="grid"
|
||||
onDragStart={evt => {
|
||||
this.dragElement(evt);
|
||||
}}
|
||||
minMove={10}
|
||||
data={{ type: 'file', selection_type: this.props.selectionType, data: this.props.data }}
|
||||
>
|
||||
<UIDirectory data={this.state.element} menu={this.common_menu} details={true} />
|
||||
</Draggable>
|
||||
</DroppableZone>
|
||||
);
|
||||
}
|
||||
}
|
||||
+645
@@ -0,0 +1,645 @@
|
||||
/* eslint-disable react/prop-types */
|
||||
/* eslint-disable react/no-direct-mutation-state */
|
||||
import React, { useState } from 'react';
|
||||
|
||||
import SelectionsManager from 'app/deprecated/SelectionsManager/SelectionsManager.js';
|
||||
import DriveService from 'app/deprecated/Apps/Drive/Drive.js';
|
||||
import AlertManager from 'app/features/global/services/alert-manager-service';
|
||||
import MenuManager from 'app/components/menus/menus-manager.jsx';
|
||||
import Workspaces from 'app/deprecated/workspaces/workspaces.jsx';
|
||||
import Collections from 'app/deprecated/CollectionsV1/Collections/Collections.js';
|
||||
import FilePicker from 'components/drive/file-picker/file-picker.jsx';
|
||||
import Button from 'components/buttons/button.jsx';
|
||||
import Input from 'components/inputs/input.jsx';
|
||||
import VersionDetails from './version-details.jsx';
|
||||
import WorkspacesApps from 'app/deprecated/workspaces/workspaces_apps.jsx';
|
||||
import InputWithClipBoard from 'components/input-with-clip-board/input-with-clip-board.jsx';
|
||||
import WorkspaceUserRights from 'app/features/workspaces/services/workspace-user-rights-service';
|
||||
import MediumPopupManager from 'app/components/modal/modal-manager';
|
||||
import Languages from 'app/features/global/services/languages-service';
|
||||
import TagPicker from 'components/tag-picker/tag-picker.jsx';
|
||||
import RouterServices from 'app/features/router/services/router-service';
|
||||
import { getAsFrontUrl } from 'app/features/global/utils/URLUtils';
|
||||
import FeatureTogglesService, {
|
||||
FeatureNames,
|
||||
} from 'app/features/global/services/feature-toggles-service';
|
||||
import ModalManager from 'app/components/modal/modal-manager';
|
||||
import LockedOnlyOfficePopup from 'app/components/locked-features-components/locked-only-office-popup/locked-only-office-popup';
|
||||
|
||||
const RenameInput = props => {
|
||||
const [value, setValue] = useState(props.value);
|
||||
return (
|
||||
<div>
|
||||
<div className="menu-buttons">
|
||||
<Input
|
||||
onEnter={() => {
|
||||
if ((value || '').trim().length > 0) {
|
||||
props.rename(value);
|
||||
}
|
||||
}}
|
||||
className="full_width bottom-margin"
|
||||
onEchap={() => {
|
||||
MenuManager.closeMenu();
|
||||
}}
|
||||
autoFocus
|
||||
value={value}
|
||||
onChange={evt => setValue(evt.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="menu-buttons">
|
||||
<Button
|
||||
disabled={(value || '').trim().length <= 0}
|
||||
type="button"
|
||||
value={Languages.t('general.save', [], 'Enregistrer')}
|
||||
onClick={() => {
|
||||
props.rename(value);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const PublicSharing = props => {
|
||||
Collections.get('drive').useListener(useState);
|
||||
const element = Collections.get('drive').find(props?.id);
|
||||
if (!element) {
|
||||
return <div />;
|
||||
}
|
||||
const sharedUrl = RouterServices.generateRouteFromState({
|
||||
workspaceId: element.workspace_id,
|
||||
documentId: element?.id,
|
||||
appName: 'drive',
|
||||
shared: true,
|
||||
token: (element.acces_info || {}).token,
|
||||
});
|
||||
return (
|
||||
<div>
|
||||
{(element.acces_info || {}).token && (
|
||||
<div>
|
||||
<InputWithClipBoard
|
||||
className={'bottom-margin full_width'}
|
||||
value={getAsFrontUrl(sharedUrl)}
|
||||
disabled={false}
|
||||
/>
|
||||
<br />
|
||||
<br />
|
||||
<Button
|
||||
className="danger"
|
||||
onClick={() => {
|
||||
AlertManager.confirm(() => {
|
||||
DriveService.updateAccess(
|
||||
element,
|
||||
{ public_access: false },
|
||||
props.driveCollectionKey,
|
||||
);
|
||||
});
|
||||
}}
|
||||
value={Languages.t(
|
||||
'components.drive.right_preview.suppress_link',
|
||||
[],
|
||||
'Supprimer le lien',
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{!(element.acces_info || {}).token && (
|
||||
<div>
|
||||
<Button
|
||||
onClick={() => {
|
||||
DriveService.updateAccess(element, { public_access: true }, props.driveCollectionKey);
|
||||
}}
|
||||
value={Languages.t(
|
||||
'components.drive.right_preview.create_link',
|
||||
[],
|
||||
"Créer un lien d'accès",
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default class DriveElement extends React.Component {
|
||||
constructor() {
|
||||
super();
|
||||
this.state = {
|
||||
selections_manager: SelectionsManager,
|
||||
};
|
||||
SelectionsManager.addListener(this);
|
||||
|
||||
this.driveCollectionKey = '';
|
||||
|
||||
this.driveSelectorOver = this.driveSelectorOver.bind(this);
|
||||
this.driveSelectorOut = this.driveSelectorOut.bind(this);
|
||||
Collections.get('drive').addListener(this);
|
||||
}
|
||||
componentWillUnmount() {
|
||||
SelectionsManager.removeListener(this);
|
||||
Collections.get('drive').removeListener(this);
|
||||
if (this.node) {
|
||||
this.node.removeEventListener('drive_selector_over', this.driveSelectorOver);
|
||||
this.node.removeEventListener('drive_selector_out', this.driveSelectorOut);
|
||||
}
|
||||
|
||||
if (this.driveCollectionKey && this.driveCollectionKey != this.props.driveCollectionKey) {
|
||||
Collections.get('drive').removeSource(this.driveCollectionKey);
|
||||
}
|
||||
}
|
||||
UNSAFE_componentWillMount() {
|
||||
if (this.props && this.props.data && this.props.data.front_id) {
|
||||
Collections.get('drive').listenOnly(this, [this.props.data.front_id]);
|
||||
}
|
||||
|
||||
this.state.element = DriveService.find(
|
||||
Workspaces.currentWorkspaceId,
|
||||
this.props.data?.id,
|
||||
el => {
|
||||
this.setState({ element: el });
|
||||
},
|
||||
);
|
||||
this.updateMenu();
|
||||
}
|
||||
componentDidMount() {
|
||||
if (this.node) {
|
||||
this.node.addEventListener('drive_selector_over', this.driveSelectorOver);
|
||||
this.node.addEventListener('drive_selector_out', this.driveSelectorOut);
|
||||
this.node.setAttribute('drive_selector_unid', this.state.element?.id);
|
||||
}
|
||||
|
||||
if (this.props && this.props.data && this.props.data?.id) {
|
||||
SelectionsManager.listenOnly(this, [this.props.data?.id]);
|
||||
}
|
||||
}
|
||||
driveSelectorOut() {
|
||||
if (this.state.selected) this.setState({ selected: false });
|
||||
}
|
||||
driveSelectorOver() {
|
||||
if (!this.state.selected) this.setState({ selected: true });
|
||||
}
|
||||
|
||||
dropFile(data, directory) {
|
||||
var destination = directory || this.props.data;
|
||||
|
||||
var objects = data.data?.id;
|
||||
if (data.selection_type) {
|
||||
var selected = Object.keys(SelectionsManager.selected_per_type[data.selection_type] || {});
|
||||
if (selected && selected.length > 1) {
|
||||
objects = selected;
|
||||
}
|
||||
}
|
||||
|
||||
DriveService.moveFile(
|
||||
objects,
|
||||
destination,
|
||||
this.props.driveCollectionKey || this.driveCollectionKey,
|
||||
);
|
||||
}
|
||||
|
||||
dragElement(evt) {
|
||||
SelectionsManager.setType(this.props.selectionType);
|
||||
if (
|
||||
!evt.shiftKey &&
|
||||
!SelectionsManager.selected_per_type[this.props.selectionType][this.state.element?.id]
|
||||
) {
|
||||
SelectionsManager.unselectAll();
|
||||
}
|
||||
SelectionsManager.select(this.state.element?.id);
|
||||
}
|
||||
|
||||
clickElement(evt, previewonly = false) {
|
||||
evt.stopPropagation();
|
||||
evt.preventDefault();
|
||||
|
||||
if (this.props.notInDrive) {
|
||||
if (this.props.onClick) {
|
||||
this.props.onClick();
|
||||
} else {
|
||||
DriveService.viewDocument(this.state.element, previewonly);
|
||||
}
|
||||
} else {
|
||||
SelectionsManager.setType(this.props.selectionType);
|
||||
if (!evt.shiftKey) {
|
||||
if (this.props.onClick) {
|
||||
this.props.onClick();
|
||||
} else {
|
||||
DriveService.viewDocument(this.state.element, previewonly);
|
||||
}
|
||||
|
||||
var oldStatus =
|
||||
SelectionsManager.selected_per_type[this.props.selectionType][this.state.element?.id];
|
||||
SelectionsManager.unselectAll();
|
||||
if (oldStatus) {
|
||||
SelectionsManager.unselect(this.state.element?.id);
|
||||
} else {
|
||||
SelectionsManager.select(this.state.element?.id);
|
||||
}
|
||||
} else {
|
||||
SelectionsManager.toggle(this.state.element?.id);
|
||||
}
|
||||
}
|
||||
}
|
||||
UNSAFE_componentWillUpdate(nextProps, nextState) {
|
||||
nextState.element =
|
||||
Collections.get('drive').find(this.props.data?.id) ||
|
||||
DriveService.find(Workspaces.currentWorkspaceId, this.props.data?.id, el => {
|
||||
this.setState({ element: el });
|
||||
});
|
||||
this.state.element = nextState.element;
|
||||
|
||||
if (
|
||||
this.state.element &&
|
||||
SelectionsManager.selected_per_type[nextProps.selectionType] &&
|
||||
SelectionsManager.selected_per_type[nextProps.selectionType][this.state.element?.id] !=
|
||||
this.old_selection_state
|
||||
) {
|
||||
nextState.selected =
|
||||
SelectionsManager.selected_per_type[nextProps.selectionType][nextProps.data?.id];
|
||||
this.old_selection_state = nextState.selected;
|
||||
}
|
||||
|
||||
if (this.state.element && !this.props.driveCollectionKey) {
|
||||
this.channel = 'standalone_drive_collection_' + this.state.element.parent_id;
|
||||
var parent_id = this.state.element.parent_id;
|
||||
if (this.state.element.parent_id == 'detached') {
|
||||
parent_id += '_' + this.state.element.workspace_id;
|
||||
}
|
||||
var old_collection_key = this.driveCollectionKey;
|
||||
this.driveCollectionKey = DriveService.addSourceIfNotExist(
|
||||
Workspaces.currentWorkspaceId,
|
||||
this.channel,
|
||||
parent_id,
|
||||
'standalone',
|
||||
);
|
||||
if (old_collection_key && old_collection_key != this.driveCollectionKey) {
|
||||
Collections.get('drive').removeSource(old_collection_key);
|
||||
}
|
||||
}
|
||||
|
||||
this.updateMenu();
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
moveTo(new_parent) {
|
||||
DriveService.moveFile(
|
||||
[this.state.element?.id],
|
||||
new_parent,
|
||||
this.props.driveCollectionKey || this.driveCollectionKey,
|
||||
);
|
||||
}
|
||||
|
||||
rename(new_name) {
|
||||
if (!this.state.element.is_directory) {
|
||||
new_name = new_name + '.' + this.state.element.extension;
|
||||
}
|
||||
this.state.element.name = new_name || this.state.element.name;
|
||||
new_name = undefined;
|
||||
MenuManager.closeMenu();
|
||||
DriveService.save(this.state.element, this.props.driveCollectionKey || this.driveCollectionKey);
|
||||
}
|
||||
|
||||
updateMenu() {
|
||||
if (!this.state.element) {
|
||||
this.common_menu = [];
|
||||
return;
|
||||
}
|
||||
|
||||
this.common_menu = [];
|
||||
|
||||
//-- All files
|
||||
if (!this.state.element.is_directory) {
|
||||
this.common_menu = [
|
||||
{
|
||||
type: 'menu',
|
||||
text: Languages.t('components.drive.elements.see', [], 'Voir'),
|
||||
onClick: () => {
|
||||
DriveService.viewDocument(this.state.element);
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
var candidates = DriveService.getEditorsCandidates(this.state.element);
|
||||
var editor_candidate = candidates.preview_candidate || [];
|
||||
|
||||
if (editor_candidate.length > 0 && editor_candidate[0].app) {
|
||||
this.common_menu.push({
|
||||
type: 'menu',
|
||||
text: Languages.t(
|
||||
'scenes.apps.drive.viewer.edit_with_button',
|
||||
[editor_candidate[0].app?.identity?.name],
|
||||
'Editer avec $1',
|
||||
),
|
||||
onClick: () => {
|
||||
if (FeatureTogglesService.isActiveFeatureName(FeatureNames.EDIT_FILES)) {
|
||||
var app = editor_candidate[0];
|
||||
if (app.url && app.is_url_file) {
|
||||
window.open(app.url);
|
||||
}
|
||||
app = app.app;
|
||||
DriveService.getFileUrlForEdition(
|
||||
app.display?.tdrive?.files?.editor?.edition_url,
|
||||
app,
|
||||
this.state.element?.id,
|
||||
url => {
|
||||
window.open(url);
|
||||
},
|
||||
);
|
||||
} else {
|
||||
ModalManager.open(
|
||||
<LockedOnlyOfficePopup />,
|
||||
{
|
||||
position: 'center',
|
||||
size: { width: '600px' },
|
||||
},
|
||||
false,
|
||||
);
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
this.common_menu.push({
|
||||
type: 'menu',
|
||||
text:
|
||||
this.state.element.url && this.state.element.extension == 'url'
|
||||
? Languages.t('scenes.apps.drive.open_link', [], 'Open link')
|
||||
: Languages.t('scenes.apps.drive.download_button', [], 'Télécharger'),
|
||||
onClick: () => {
|
||||
var link = DriveService.getLink(this.state.element, undefined, 1);
|
||||
if (this.state.element.url) {
|
||||
window.open(link, '_blank');
|
||||
} else {
|
||||
window.open(link);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
if (!WorkspaceUserRights.isNotConnected()) {
|
||||
//-- All files
|
||||
if (this.state.element.detached) {
|
||||
this.common_menu.push({
|
||||
type: 'menu',
|
||||
text: Languages.t('scenes.apps.drive.move_text2', [], 'Déplacer'),
|
||||
submenu_replace: true,
|
||||
submenu: [
|
||||
{
|
||||
type: 'react-element',
|
||||
reactElement: () => (
|
||||
<FilePicker
|
||||
mode={'select_location'}
|
||||
onChoose={res => this.moveTo(res)}
|
||||
initialDirectory={{ id: '' }}
|
||||
/>
|
||||
),
|
||||
},
|
||||
],
|
||||
});
|
||||
}
|
||||
|
||||
if (!this.props.notInDrive && !this.state.element.detached) {
|
||||
if (this.common_menu.length > 0) {
|
||||
this.common_menu.push({ type: 'separator' });
|
||||
}
|
||||
|
||||
if (!this.state.element.detached && this.state.element.parent_id) {
|
||||
this.common_menu = this.common_menu.concat([
|
||||
{
|
||||
type: 'menu',
|
||||
text: Languages.t('scenes.app.mainview.tabs.rename', [], 'Renommer'),
|
||||
submenu_replace: true,
|
||||
submenu: [
|
||||
{
|
||||
type: 'title',
|
||||
text: Languages.t('scenes.app.mainview.tabs.rename', [], 'Renommer'),
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
text:
|
||||
Languages.t('components.drive.elements.current_name', [], 'Nom actuel : ') +
|
||||
this.state.element.name,
|
||||
},
|
||||
{
|
||||
type: 'react-element',
|
||||
reactElement: () => (
|
||||
<RenameInput
|
||||
rename={name => {
|
||||
this.rename(name);
|
||||
}}
|
||||
value={
|
||||
this.state.element.is_directory
|
||||
? this.state.element.name
|
||||
: this.state.element.name.replace(/\.[^.]*$/, '')
|
||||
}
|
||||
/>
|
||||
),
|
||||
},
|
||||
],
|
||||
},
|
||||
]);
|
||||
}
|
||||
|
||||
if (!this.state.element.trash) {
|
||||
this.common_menu = this.common_menu.concat([
|
||||
{
|
||||
type: 'menu',
|
||||
text: Languages.t('scenes.apps.drive.right_preview.public', [], 'Accès public...'),
|
||||
submenu_replace: true,
|
||||
submenu: [
|
||||
{
|
||||
type: 'title',
|
||||
text: Languages.t(
|
||||
'scenes.apps.drive.right_preview.public_link',
|
||||
[],
|
||||
"Lien d'accès public",
|
||||
),
|
||||
},
|
||||
{
|
||||
//TODO menu react-element to refactor
|
||||
type: 'react-element',
|
||||
reactElement: () => (
|
||||
<PublicSharing
|
||||
id={this.state.element?.id}
|
||||
element={this.state.element}
|
||||
driveCollectionKey={this.props.driveCollectionKey || this.driveCollectionKey}
|
||||
/>
|
||||
),
|
||||
},
|
||||
],
|
||||
},
|
||||
]);
|
||||
|
||||
if (!(this.state.element.application_id && this.state.element.is_directory)) {
|
||||
this.common_menu.push({
|
||||
type: 'menu',
|
||||
text: Languages.t('scenes.apps.drive.move_text', [], 'Déplacer'),
|
||||
submenu_replace: true,
|
||||
submenu: [
|
||||
{
|
||||
type: 'react-element',
|
||||
reactElement: () => (
|
||||
<FilePicker
|
||||
mode={'select_location'}
|
||||
onChoose={res => this.moveTo(res)}
|
||||
initialDirectory={{ id: this.state.element.parent_id }}
|
||||
/>
|
||||
),
|
||||
},
|
||||
],
|
||||
});
|
||||
}
|
||||
|
||||
if (WorkspaceUserRights.hasWorkspacePrivilege()) {
|
||||
if (this.state.element.application_id && this.state.element.is_directory) {
|
||||
this.common_menu.push({
|
||||
type: 'menu',
|
||||
text: Languages.t(
|
||||
'components.drive.elements.configurate_mod',
|
||||
[],
|
||||
'Configurer le module...',
|
||||
),
|
||||
onClick: () => {
|
||||
var data = {
|
||||
drive_element: this.state.element,
|
||||
};
|
||||
WorkspacesApps.notifyApp(
|
||||
this.state.element.application_id,
|
||||
'configuration',
|
||||
'drive',
|
||||
data,
|
||||
);
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (!this.state.element.is_directory && !this.state.element.url) {
|
||||
var versions_indicator = '';
|
||||
if ((this.state.element.versions || {}).length > 1) {
|
||||
versions_indicator = ' (' + (this.state.element.versions || {}).length + ')';
|
||||
}
|
||||
this.common_menu.push(
|
||||
{
|
||||
type: 'menu',
|
||||
text:
|
||||
Languages.t(
|
||||
'components.drive.elements.manage_version',
|
||||
[],
|
||||
'Gérer les versions',
|
||||
) +
|
||||
versions_indicator +
|
||||
'...',
|
||||
onClick: () => {
|
||||
MediumPopupManager.open(<VersionDetails file={this.state.element} />, {
|
||||
size: { width: 600 },
|
||||
});
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'menu',
|
||||
text: Languages.t(
|
||||
'scenes.apps.drive.navigators.navigator_labels.title',
|
||||
[],
|
||||
'Labels',
|
||||
),
|
||||
submenu_replace: true,
|
||||
submenu: [
|
||||
{
|
||||
type: 'title',
|
||||
text: Languages.t(
|
||||
'scenes.apps.drive.navigators.navigator_labels.title',
|
||||
[],
|
||||
'Labels',
|
||||
),
|
||||
},
|
||||
{
|
||||
type: 'react-element',
|
||||
reactElement: level => (
|
||||
<div>
|
||||
<TagPicker
|
||||
menu_level={level}
|
||||
saveButton
|
||||
canCreate={true}
|
||||
value={this.state.element.tags || []}
|
||||
onChange={values => {
|
||||
this.state.element.tags = values;
|
||||
MenuManager.closeMenu();
|
||||
DriveService.save(
|
||||
this.state.element,
|
||||
this.props.driveCollectionKey || this.driveCollectionKey,
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
],
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
if (this.props.attachmentMenu) {
|
||||
this.common_menu.push(this.props.attachment_menu);
|
||||
}
|
||||
|
||||
this.common_menu.push({ type: 'separator' });
|
||||
|
||||
this.common_menu.push({
|
||||
type: 'menu',
|
||||
text: Languages.t(
|
||||
'scenes.apps.drive.right_preview.operations_delete',
|
||||
[],
|
||||
'Mettre à la corbeille',
|
||||
),
|
||||
className: 'error',
|
||||
onClick: () => {
|
||||
DriveService.remove(
|
||||
[this.props.data],
|
||||
this.props.driveCollectionKey || this.driveCollectionKey,
|
||||
);
|
||||
},
|
||||
});
|
||||
} else {
|
||||
this.common_menu.push({
|
||||
type: 'menu',
|
||||
text: Languages.t(
|
||||
'scenes.apps.drive.right_preview.operations_restore',
|
||||
[],
|
||||
'Restaurer',
|
||||
),
|
||||
onClick: () => {
|
||||
DriveService.restore(
|
||||
[this.props.data],
|
||||
this.props.driveCollectionKey || this.driveCollectionKey,
|
||||
);
|
||||
},
|
||||
});
|
||||
this.common_menu.push({
|
||||
type: 'menu',
|
||||
text: Languages.t(
|
||||
'scenes.apps.drive.remove_definitely_menu',
|
||||
[],
|
||||
'Supprimer définitivement',
|
||||
),
|
||||
className: 'error',
|
||||
onClick: () => {
|
||||
AlertManager.confirm(() => {
|
||||
DriveService.removeDefinitively(
|
||||
[this.props.data],
|
||||
this.props.driveCollectionKey || this.driveCollectionKey,
|
||||
);
|
||||
});
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (this.props.additionalMenu && this.props.additionalMenu.length > 0) {
|
||||
this.common_menu.push({ type: 'separator' });
|
||||
this.common_menu = this.common_menu.concat(this.props.additionalMenu);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,278 @@
|
||||
/* eslint-disable react/prop-types */
|
||||
/* eslint-disable react/no-direct-mutation-state */
|
||||
import React, { Component } from 'react';
|
||||
|
||||
import './drive-multi-selector.scss';
|
||||
import SelectionsManager from 'app/deprecated/SelectionsManager/SelectionsManager.js';
|
||||
import './drive.scss';
|
||||
|
||||
export default class DriveMultiSelector extends Component {
|
||||
constructor() {
|
||||
super();
|
||||
this.state = {
|
||||
start_drag: false,
|
||||
dragging: true,
|
||||
};
|
||||
this.move = this.move.bind(this);
|
||||
this.end = this.end.bind(this);
|
||||
this.start = this.start.bind(this);
|
||||
this.pause = this.pause.bind(this);
|
||||
this.unpause = this.unpause.bind(this);
|
||||
|
||||
this.currentSelection = {};
|
||||
this.currentSelectionCount = 0;
|
||||
|
||||
this.noMovementRefreshAnyway = setTimeout('');
|
||||
}
|
||||
componentDidMount() {
|
||||
this.scroller_container = this.props.scroller;
|
||||
}
|
||||
componentWillUnmount() {
|
||||
clearInterval(this.noMovementRefreshAnyway);
|
||||
|
||||
this.container.removeEventListener('mouseleave', this.pause);
|
||||
this.container.removeEventListener('mouseenter', this.unpause);
|
||||
document.removeEventListener('mousemove', this.move);
|
||||
document.removeEventListener('mouseup', this.end);
|
||||
document.body.classList.remove('no_select');
|
||||
}
|
||||
pause() {
|
||||
clearInterval(this.noMovementRefreshAnyway);
|
||||
|
||||
this.setState({ dragging: false });
|
||||
}
|
||||
unpause() {
|
||||
this.setState({ dragging: true });
|
||||
}
|
||||
end(evt) {
|
||||
clearInterval(this.noMovementRefreshAnyway);
|
||||
|
||||
this.setState({ start_drag: false });
|
||||
|
||||
document.removeEventListener('mousemove', this.move);
|
||||
document.removeEventListener('mouseup', this.end);
|
||||
this.container.removeEventListener('mouseleave', this.pause);
|
||||
this.container.removeEventListener('mouseenter', this.unpause);
|
||||
|
||||
document.body.classList.remove('no_select');
|
||||
|
||||
if (!this.did_drag) {
|
||||
if (!evt.shiftKey && !this.did_start_drag == 0) {
|
||||
SelectionsManager.unselectAll();
|
||||
}
|
||||
this.did_start_drag = false;
|
||||
return;
|
||||
}
|
||||
this.did_drag = false;
|
||||
|
||||
Object.keys(this.currentSelection).forEach(id => {
|
||||
if (this.currentSelection[id]) {
|
||||
SelectionsManager.select(id);
|
||||
} else {
|
||||
SelectionsManager.unselect(id);
|
||||
}
|
||||
});
|
||||
this.did_start_drag = false;
|
||||
|
||||
this.noMovementRefreshAnyway = setTimeout(() => {
|
||||
this.state.left = 0;
|
||||
this.state.right = 0;
|
||||
this.state.width = 0;
|
||||
this.state.height = 0;
|
||||
this.setState({});
|
||||
}, 500);
|
||||
}
|
||||
start(evt) {
|
||||
this.did_drag = false;
|
||||
this.did_start_drag = true;
|
||||
|
||||
this.element_position_cache = {};
|
||||
|
||||
SelectionsManager.setType(this.props.selectionType);
|
||||
|
||||
clearInterval(this.noMovementRefreshAnyway);
|
||||
this.currentSelection = {};
|
||||
|
||||
this.state.start_drag = true;
|
||||
this.state.dragging = true;
|
||||
var rect = window.getBoundingClientRect(this.container);
|
||||
rect.x = rect.x || rect.left;
|
||||
rect.y = rect.y || rect.top;
|
||||
|
||||
this.drag_add = evt.nativeEvent.shiftKey;
|
||||
this.drag_start = [
|
||||
evt.clientX - rect.left,
|
||||
evt.clientY - rect.top,
|
||||
this.container.scrollLeft,
|
||||
this.container.scrollTop,
|
||||
];
|
||||
|
||||
document.addEventListener('mousemove', this.move);
|
||||
document.addEventListener('mouseup', this.end);
|
||||
this.container.addEventListener('mouseleave', this.pause);
|
||||
this.container.addEventListener('mouseenter', this.unpause);
|
||||
|
||||
document.body.classList.add('no_select');
|
||||
|
||||
rect = {};
|
||||
rect.width = 0;
|
||||
rect.height = 0;
|
||||
rect.left = evt.clientX;
|
||||
rect.top = evt.clientY;
|
||||
this.autoSelect(rect);
|
||||
}
|
||||
move(evt) {
|
||||
clearInterval(this.noMovementRefreshAnyway);
|
||||
var rect = window.getBoundingClientRect(this.container);
|
||||
rect.x = rect.x || rect.left;
|
||||
rect.y = rect.y || rect.top;
|
||||
var pos = [];
|
||||
|
||||
if (this.state.start_drag && this.state.dragging) {
|
||||
this.did_drag = true;
|
||||
|
||||
pos = [evt.clientX - rect.left, evt.clientY - rect.top];
|
||||
|
||||
pos[0] = Math.min(pos[0], rect.width - 5);
|
||||
pos[0] = Math.max(pos[0], 5);
|
||||
|
||||
pos[1] = Math.min(pos[1], rect.height - 5);
|
||||
pos[1] = Math.max(pos[1], 5);
|
||||
|
||||
var w = this.drag_start[0] + this.drag_start[2] - (pos[0] + this.container.scrollLeft);
|
||||
var h = this.drag_start[1] + this.drag_start[3] - (pos[1] + this.container.scrollTop);
|
||||
var winv = w > 0;
|
||||
var hinv = h > 0;
|
||||
var selectorRect = {
|
||||
width: Math.abs(w),
|
||||
height: Math.abs(h),
|
||||
left: this.drag_start[0] + this.drag_start[2] - Math.abs(winv ? w : 0),
|
||||
top: this.drag_start[1] + this.drag_start[3] - Math.abs(hinv ? h : 0),
|
||||
};
|
||||
this.setState(selectorRect);
|
||||
|
||||
rect = window.getBoundingClientRect(this.selector);
|
||||
rect.x = rect.x || rect.left;
|
||||
rect.y = rect.y || rect.top;
|
||||
this.autoSelect(rect);
|
||||
}
|
||||
|
||||
pos = [evt.clientX, evt.clientY];
|
||||
|
||||
if (
|
||||
rect.height + rect.top < pos[1] ||
|
||||
rect.top > pos[1] ||
|
||||
rect.width + rect.left < pos[0] ||
|
||||
rect.left > pos[0]
|
||||
) {
|
||||
var newScrollTop =
|
||||
this.container.scrollTop +
|
||||
(pos[1] - ((pos[1] > rect.height + rect.top ? rect.height : 0) + rect.top)) / 10;
|
||||
var newScrollLeft =
|
||||
this.container.scrollLeft +
|
||||
(pos[0] - ((pos[0] > rect.width + rect.top ? rect.width : 0) + rect.left)) / 10;
|
||||
|
||||
if (this.container.scrollTop != newScrollTop || this.container.scrollLeft != newScrollLeft) {
|
||||
this.container.scrollTop = newScrollTop;
|
||||
this.container.scrollLeft = newScrollLeft;
|
||||
this.state.dragging = true;
|
||||
|
||||
this.noMovementRefreshAnyway = setTimeout(() => {
|
||||
this.move({
|
||||
clientX: evt.clientX,
|
||||
clientY: evt.clientY,
|
||||
});
|
||||
}, 50);
|
||||
} else {
|
||||
this.state.dragging = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
autoSelect(rect) {
|
||||
this.currentSelectionCount = 0;
|
||||
var scroll_top = this.container.scrollTop;
|
||||
if (this.old_scroll_top != scroll_top) {
|
||||
this.element_position_cache = {};
|
||||
}
|
||||
this.old_scroll_top = scroll_top;
|
||||
|
||||
Array.from(this.container.getElementsByClassName('js-drive-multi-selector-selectable')).forEach(
|
||||
element => {
|
||||
var element_id = element.getAttribute('drive_selector_unid');
|
||||
|
||||
var selected = SelectionsManager.selected_per_type[this.props.selectionType][element_id];
|
||||
|
||||
var over = false;
|
||||
var elementRect = {};
|
||||
|
||||
if (this.element_position_cache[element_id]) {
|
||||
elementRect = JSON.parse(JSON.stringify(this.element_position_cache[element_id]));
|
||||
} else {
|
||||
var er = window.getBoundingClientRect(element);
|
||||
er.x = er.x || er.left;
|
||||
er.y = er.y || er.top;
|
||||
elementRect = JSON.parse(JSON.stringify(er));
|
||||
this.element_position_cache[element_id] = elementRect;
|
||||
}
|
||||
|
||||
if (
|
||||
!(
|
||||
rect.left > elementRect.left + elementRect.width ||
|
||||
elementRect.left > rect.left + rect.width ||
|
||||
rect.top > elementRect.top + elementRect.height ||
|
||||
elementRect.top > rect.top + rect.height
|
||||
)
|
||||
) {
|
||||
over = true;
|
||||
}
|
||||
|
||||
if (
|
||||
(over && this.drag_add && selected) ||
|
||||
(!over && this.drag_add && !selected) ||
|
||||
(!over && !this.drag_add)
|
||||
) {
|
||||
element.dispatchEvent(new Event('drive_selector_out'));
|
||||
this.currentSelection[element_id] = false;
|
||||
}
|
||||
if (
|
||||
(over && this.drag_add && !selected) ||
|
||||
(over && !this.drag_add) ||
|
||||
(!over && this.drag_add && selected)
|
||||
) {
|
||||
element.dispatchEvent(new Event('drive_selector_over'));
|
||||
this.currentSelection[element_id] = true;
|
||||
this.currentSelectionCount++;
|
||||
}
|
||||
},
|
||||
);
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<div
|
||||
onMouseDown={evt => {
|
||||
this.start(evt);
|
||||
}}
|
||||
onMouseUp={evt => {
|
||||
this.end(evt);
|
||||
}}
|
||||
ref={node => (this.container = node)}
|
||||
style={this.props.style || {}}
|
||||
className={'drive_multiselector'}
|
||||
>
|
||||
<div
|
||||
ref={node => (this.selector = node)}
|
||||
className={
|
||||
'selectionRect ' + (this.state.start_drag && this.state.dragging ? 'visible ' : '')
|
||||
}
|
||||
style={{
|
||||
width: this.state.width,
|
||||
height: this.state.height,
|
||||
left: this.state.left,
|
||||
top: this.state.top,
|
||||
}}
|
||||
/>
|
||||
{this.props.children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
body.no_select {
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.drive_multiselector {
|
||||
position: relative;
|
||||
overflow-x: visible;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.selectionRect {
|
||||
background: var(--primary);
|
||||
z-index: 10;
|
||||
border-radius: var(--border-radius-base);
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s;
|
||||
|
||||
&.visible {
|
||||
opacity: 0.2;
|
||||
}
|
||||
}
|
||||
+522
@@ -0,0 +1,522 @@
|
||||
/* Drive */
|
||||
|
||||
.directory,
|
||||
.file {
|
||||
.file_loader {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: inline-block;
|
||||
margin: auto;
|
||||
}
|
||||
.options {
|
||||
padding-left: 5px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.options {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.directory_drop_zone {
|
||||
display: inline-block;
|
||||
}
|
||||
.directory {
|
||||
background: #fff;
|
||||
border: 1px solid var(--grey-background);
|
||||
height: 50px;
|
||||
box-sizing: border-box;
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
line-height: 32px;
|
||||
margin-right: 16px;
|
||||
margin-bottom: 16px;
|
||||
border-radius: var(--border-radius-base);
|
||||
font-size: 13px;
|
||||
vertical-align: middle;
|
||||
width: 200px;
|
||||
padding: 8px;
|
||||
font-weight: 500;
|
||||
padding-right: 12px;
|
||||
cursor: pointer;
|
||||
|
||||
.text {
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&:hover:not(.notInDrive) {
|
||||
box-shadow: 4px 4px 16px 0 #00000022;
|
||||
border-color: #fff;
|
||||
}
|
||||
|
||||
.options {
|
||||
.m-icon-small {
|
||||
font-size: 20px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.app_icon {
|
||||
width: 20px;
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
height: 20px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-size: 14px;
|
||||
padding-right: 8px;
|
||||
margin-left: 6px;
|
||||
padding-top: 4px;
|
||||
|
||||
.m-icon-small {
|
||||
color: var(--warning);
|
||||
font-size: 20px !important;
|
||||
}
|
||||
|
||||
i.icon-fontastic {
|
||||
position: relative;
|
||||
top: 8px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
height: 30px;
|
||||
background-size: 16px auto;
|
||||
background-position: center left;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.file {
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--grey-background);
|
||||
background: #fff;
|
||||
height: 180px;
|
||||
width: 216px;
|
||||
box-sizing: border-box;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
line-height: 30px;
|
||||
margin-right: 16px;
|
||||
margin-bottom: 16px;
|
||||
border-radius: var(--border-radius-base);
|
||||
font-size: 13px;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover:not(.notInDrive) {
|
||||
box-shadow: 4px 4px 16px 0 #00000022;
|
||||
border-color: #fff;
|
||||
}
|
||||
|
||||
.options {
|
||||
.m-icon-small {
|
||||
font-size: 20px !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.mini {
|
||||
height: 32px;
|
||||
|
||||
.data {
|
||||
border-top: none;
|
||||
.no-grid {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.preview {
|
||||
height: 32px;
|
||||
background: #fff !important;
|
||||
|
||||
&:after {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.preview {
|
||||
width: 216px;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-color: #f5f5f7;
|
||||
flex: 1;
|
||||
|
||||
.tags_list {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
padding-left: 8px;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
&.no_preview {
|
||||
background-color: #f5f5f7;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 64px;
|
||||
}
|
||||
|
||||
/*&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.05) 70%, rgba(0,0,0,0.5) 100%);
|
||||
}*/
|
||||
}
|
||||
|
||||
.data {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
bottom: 0px;
|
||||
color: var(--black);
|
||||
height: 32px;
|
||||
font-weight: 500;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
border-top: 1px solid var(--grey-background);
|
||||
|
||||
.icon {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
box-sizing: border-box;
|
||||
border-radius: var(--border-radius-base);
|
||||
margin-right: 6px;
|
||||
margin-left: -3px;
|
||||
margin-top: 5px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
background-size: 70%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
|
||||
i.icon-fontastic {
|
||||
position: relative;
|
||||
top: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.draggable_clone {
|
||||
.file,
|
||||
.directory {
|
||||
opacity: 1;
|
||||
box-shadow: 4px 4px 16px 0 #00000022;
|
||||
border-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.dragging.drag_file .drive_multiselector {
|
||||
.file.is_selected,
|
||||
.directory.is_selected {
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
}
|
||||
|
||||
.file,
|
||||
.directory {
|
||||
transition: opacity 0s;
|
||||
|
||||
&.notInDrive {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
&.dragging_opacity {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&.is_selected {
|
||||
background: var(--primary);
|
||||
color: #fff;
|
||||
box-shadow: none;
|
||||
|
||||
.file_type_icon svg,
|
||||
.file_type_icon svg * {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
&:hover:not(.notInDrive),
|
||||
.data {
|
||||
background-color: var(--primary);
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.created-by,
|
||||
.last-modified {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.size {
|
||||
text-align: right;
|
||||
width: 70px;
|
||||
}
|
||||
|
||||
.last-modified {
|
||||
text-align: right;
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.detail_preview_parent {
|
||||
width: 32px;
|
||||
margin-left: 12px;
|
||||
|
||||
.detail_preview {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: var(--border-radius-base);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-color: var(--primary-background);
|
||||
|
||||
&.no_preview {
|
||||
background-size: 60%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.drive_view.list {
|
||||
.directory_drop_zone {
|
||||
display: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.drive_view.list .directory,
|
||||
.drive_view.list .file {
|
||||
margin-right: 0px;
|
||||
margin-bottom: 0px;
|
||||
border: 0;
|
||||
border-bottom: 1px solid var(--grey-background);
|
||||
border-top: 1px solid var(--grey-background);
|
||||
border-radius: 2px;
|
||||
width: 100%;
|
||||
height: 64px;
|
||||
padding-top: 16px;
|
||||
color: var(--black);
|
||||
margin-top: -1px;
|
||||
padding-right: 12px;
|
||||
|
||||
&.exit-active,
|
||||
&.enter-active {
|
||||
margin-top: -1px !important;
|
||||
}
|
||||
|
||||
.data {
|
||||
border-top: 0px;
|
||||
bottom: -1px;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.options {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&:hover:not(.notInDrive):not(.is_selected) {
|
||||
box-shadow: none;
|
||||
background: var(--primary-background);
|
||||
}
|
||||
|
||||
&.is_selected {
|
||||
background: var(--primary);
|
||||
color: #fff;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.drive_view.list .file .preview {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.drive_view.list {
|
||||
.rounded-btn {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.drive_view.grid {
|
||||
.is_selected.file {
|
||||
background: var(--primary);
|
||||
color: #fff;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.drive_view.grid .no-grid {
|
||||
display: none;
|
||||
}
|
||||
.drive_view.list .no-list {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.file_type_icon {
|
||||
line-height: 38px;
|
||||
width: 24px;
|
||||
|
||||
svg,
|
||||
svg * {
|
||||
fill: var(--primary);
|
||||
}
|
||||
|
||||
&.link {
|
||||
background-image: url('./icons/link.svg');
|
||||
}
|
||||
|
||||
&.code {
|
||||
background-image: url('./icons/code.svg');
|
||||
}
|
||||
|
||||
&.document {
|
||||
background-image: url('./icons/document.svg');
|
||||
}
|
||||
|
||||
&.image {
|
||||
background-image: url('./icons/image.svg');
|
||||
}
|
||||
|
||||
&.pdf {
|
||||
background-image: url('./icons/pdf.svg');
|
||||
}
|
||||
|
||||
&.slides {
|
||||
background-image: url('./icons/slides.svg');
|
||||
}
|
||||
|
||||
&.sound, &.audio {
|
||||
background-image: url('./icons/sound.svg');
|
||||
}
|
||||
|
||||
&.spreadsheet {
|
||||
background-image: url('./icons/spreadsheet.svg');
|
||||
}
|
||||
|
||||
&.svg {
|
||||
background-image: url('./icons/svg.svg');
|
||||
}
|
||||
|
||||
&.video {
|
||||
background-image: url('./icons/video.svg');
|
||||
}
|
||||
|
||||
&.archive {
|
||||
background-image: url('./icons/archive.svg');
|
||||
}
|
||||
|
||||
&.other {
|
||||
background-image: url('./icons/file.svg');
|
||||
}
|
||||
}
|
||||
|
||||
.drive_view.list .file_type_icon {
|
||||
line-height: 38px;
|
||||
width: 34px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* version details */
|
||||
.versionDetails {
|
||||
min-height: 250px;
|
||||
|
||||
.text.no-more {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
opacity: 0.5;
|
||||
margin-top: 32px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.version {
|
||||
display: flex;
|
||||
padding: 24px 0px;
|
||||
border-bottom: solid 1px var(--grey-background);
|
||||
.titleVersionDetails {
|
||||
font-size: 24px;
|
||||
color: var(--black);
|
||||
font-weight: bold;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.info {
|
||||
flex: 0.5;
|
||||
margin-bottom: 8px;
|
||||
.versionTitle {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
color: var(--black);
|
||||
}
|
||||
.versionDate {
|
||||
font-size: 14px;
|
||||
color: var(--black);
|
||||
}
|
||||
}
|
||||
.name {
|
||||
flex: 0.5;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
color: var(--black);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.more {
|
||||
}
|
||||
}
|
||||
}
|
||||
.footerVersionDetails {
|
||||
display: flex;
|
||||
.addVersion {
|
||||
flex: 1;
|
||||
.addVersionButton {
|
||||
width: 100%;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
}
|
||||
.addVersionButton:hover {
|
||||
cursor: pointer;
|
||||
opacity: 0.8;
|
||||
}
|
||||
.icon {
|
||||
display: inline-block;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
.iconWithBackground {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: inline-block;
|
||||
background-color: var(--grey-background);
|
||||
border-radius: var(--border-radius-base);
|
||||
}
|
||||
}
|
||||
.footerTitle {
|
||||
margin-left: 8px;
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
color: var(--black);
|
||||
.addVersionButton:hover {
|
||||
cursor: pointer;
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,213 @@
|
||||
/* eslint-disable react/prop-types */
|
||||
import React, { Component } from 'react';
|
||||
|
||||
import DriveService from 'app/deprecated/Apps/Drive/Drive.js';
|
||||
import Workspaces from 'app/deprecated/workspaces/workspaces.jsx';
|
||||
import Languages from 'app/features/global/services/languages-service';
|
||||
import Collections from 'app/deprecated/CollectionsV1/Collections/Collections.js';
|
||||
import UIFile from '../ui/file.jsx';
|
||||
import UIDirectory from '../ui/directory.jsx';
|
||||
import LeftIcon from '@material-ui/icons/KeyboardArrowLeftOutlined';
|
||||
import NewFolderIcon from '@material-ui/icons/CreateNewFolderOutlined';
|
||||
import Menu from 'components/menus/menu.jsx';
|
||||
import Button from 'components/buttons/button.jsx';
|
||||
import Input from 'components/inputs/input.jsx';
|
||||
import './file-picker.scss';
|
||||
|
||||
export default class FilePicker extends Component {
|
||||
constructor() {
|
||||
super();
|
||||
this.drive_channel = 'file_picker_' + Workspaces.currentWorkspaceId;
|
||||
this.drive_collection_key = this.drive_channel;
|
||||
|
||||
this.state = {
|
||||
i18n: Languages,
|
||||
drive_repository: Collections.get('drive'),
|
||||
app_drive_service: DriveService,
|
||||
current_selection: {},
|
||||
creating_folder: false,
|
||||
};
|
||||
|
||||
Languages.addListener(this);
|
||||
Collections.get('drive').addListener(this);
|
||||
DriveService.addListener(this);
|
||||
}
|
||||
componentWillUnmount() {
|
||||
Languages.removeListener(this);
|
||||
Collections.get('drive').removeListener(this);
|
||||
DriveService.removeListener(this);
|
||||
|
||||
if (this.drive_channel) {
|
||||
Collections.get('drive').removeSource(
|
||||
this.state.app_drive_service.current_collection_key_channels[this.drive_channel],
|
||||
);
|
||||
}
|
||||
}
|
||||
componentDidMount() {
|
||||
this.changeCurrentDirectory({ id: (this.props.initialDirectory || {}).id || '' });
|
||||
}
|
||||
clickOnFile(file) {
|
||||
if (this.props.mode == 'select_file') {
|
||||
this.setState({ current_selection: file });
|
||||
}
|
||||
}
|
||||
changeCurrentDirectory(directory) {
|
||||
if (this.props.mode == 'select_file') {
|
||||
this.setState({ current_selection: {} });
|
||||
}
|
||||
if (this.props.mode == 'select_location') {
|
||||
this.setState({ current_selection: directory });
|
||||
}
|
||||
DriveService.changeCurrentDirectory(this.drive_channel, directory);
|
||||
}
|
||||
submit() {
|
||||
var result = null;
|
||||
if (this.props.mode == 'select_file') {
|
||||
result = this.state.current_selection;
|
||||
}
|
||||
if (this.props.mode == 'select_location') {
|
||||
result = this.state.app_drive_service.current_directory_channels[this.drive_channel] || {};
|
||||
}
|
||||
Menu.closeAll();
|
||||
if (this.props.onChoose) this.props.onChoose(result);
|
||||
}
|
||||
render() {
|
||||
var workspace_id = Workspaces.currentWorkspaceId;
|
||||
var directory =
|
||||
this.state.app_drive_service.current_directory_channels[this.drive_channel] || {};
|
||||
var directory_id = directory.id;
|
||||
|
||||
var filter_dir = {
|
||||
workspace_id: workspace_id,
|
||||
parent_id: directory_id,
|
||||
is_directory: true,
|
||||
trash: false,
|
||||
};
|
||||
var directories = this.state.drive_repository
|
||||
.findBy(filter_dir)
|
||||
.sort((a, b) => (a.name || '').localeCompare(b.name || ''));
|
||||
|
||||
var filter_files = {
|
||||
workspace_id: workspace_id,
|
||||
parent_id: directory_id,
|
||||
is_directory: false,
|
||||
trash: false,
|
||||
};
|
||||
var files = this.state.drive_repository
|
||||
.findBy(filter_files)
|
||||
.sort((a, b) => (a.name || '').localeCompare(b.name || ''));
|
||||
|
||||
var allow_go_parent = true;
|
||||
var drive_channel = null;
|
||||
if (!drive_channel && (this.props.initialDirectory || {}).id == directory_id) {
|
||||
allow_go_parent = false;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="filepicker">
|
||||
<div className="title">
|
||||
{directory.parent_id && allow_go_parent && (
|
||||
<LeftIcon
|
||||
className="m-icon-small getback"
|
||||
onClick={() => {
|
||||
this.changeCurrentDirectory({ id: directory.parent_id });
|
||||
}}
|
||||
/>
|
||||
)}{' '}
|
||||
{directory.parent_id
|
||||
? directory.name
|
||||
: Languages.t('app.identity?.name.tdrive_drive', [], 'Documents')}
|
||||
</div>
|
||||
<div className="drive_view list">
|
||||
{directories.map((item, index) => (
|
||||
<div
|
||||
key={'file_picker_dirs_' + index}
|
||||
className="directory"
|
||||
onClick={() => DriveService.changeCurrentDirectory(this.drive_channel, item)}
|
||||
>
|
||||
<UIDirectory data={item} />
|
||||
</div>
|
||||
))}
|
||||
{files.map((item, index) => (
|
||||
<div
|
||||
key={'file_picker_files_' + index}
|
||||
className={
|
||||
'file ' +
|
||||
(this.props.mode == 'select_location' ? 'disabled ' : '') +
|
||||
(this.state.current_selection.id == item.id ? 'is_selected ' : '')
|
||||
}
|
||||
onClick={() => this.clickOnFile(item)}
|
||||
>
|
||||
<UIFile data={item} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{this.state.creating_folder && (
|
||||
<div className="menu-buttons" style={{ display: 'flex' }}>
|
||||
<Button
|
||||
className="button small secondary"
|
||||
style={{ float: 'left' }}
|
||||
onClick={() => this.setState({ creating_folder: false })}
|
||||
>
|
||||
<LeftIcon className="m-icon-small" />
|
||||
</Button>
|
||||
<Input
|
||||
style={{ margin: 0, marginLeft: 5, flex: 1 }}
|
||||
className="small"
|
||||
refInput={node => (node ? node.focus() : '')}
|
||||
type="text"
|
||||
defaultValue={''}
|
||||
placeholder={Languages.t(
|
||||
'scenes.apps.drive.navigators.navigator_content.directory_name',
|
||||
[],
|
||||
'Nom du dossier',
|
||||
)}
|
||||
onKeyPress={e => {
|
||||
if (e.key === 'Enter') {
|
||||
DriveService.createDirectory(
|
||||
directory.workspace_id,
|
||||
e.target.value,
|
||||
directory,
|
||||
DriveService.current_collection_key_channels[this.drive_channel],
|
||||
res => {
|
||||
this.changeCurrentDirectory(res);
|
||||
},
|
||||
);
|
||||
this.setState({ creating_folder: false });
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{!this.state.creating_folder && (
|
||||
<div className="menu-buttons">
|
||||
{!this.state.creating_folder && directory.workspace_id && (
|
||||
<Button
|
||||
className="button small secondary"
|
||||
style={{ float: 'left' }}
|
||||
onClick={() => this.setState({ creating_folder: true })}
|
||||
>
|
||||
<NewFolderIcon className="m-icon-small" />
|
||||
</Button>
|
||||
)}
|
||||
{this.props.mode == 'select_location' && (
|
||||
<Button
|
||||
className="small"
|
||||
value={Languages.t('components.drive.moove_here', [], 'Déplacer ici')}
|
||||
onClick={() => this.submit()}
|
||||
/>
|
||||
)}
|
||||
{this.props.mode == 'select_file' && this.state.current_selection.id && (
|
||||
<Button
|
||||
className="small"
|
||||
value={Languages.t('scenes.app.taskpicker.select', [], 'Sélectionner')}
|
||||
onClick={() => this.submit()}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,84 @@
|
||||
.filepicker {
|
||||
margin: -5px 0;
|
||||
|
||||
.no-filepicker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.file_type_icon {
|
||||
width: 20px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.title {
|
||||
background: #ffffff;
|
||||
margin-bottom: 0px;
|
||||
font-size: 16px;
|
||||
color: #000;
|
||||
line-height: 20px;
|
||||
padding-bottom: 8px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.getback {
|
||||
background: var(--grey-background);
|
||||
border-radius: var(--border-radius-base);
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
vertical-align: top;
|
||||
margin-right: 5px;
|
||||
margin-left: 0px;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background: #f0f0f0;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-buttons {
|
||||
text-align: right;
|
||||
padding: 8px 0px;
|
||||
}
|
||||
|
||||
.drive_view.list {
|
||||
height: 150px;
|
||||
overflow: auto;
|
||||
width: 100%;
|
||||
|
||||
.file .icon {
|
||||
width: 20px;
|
||||
background-size: 60%;
|
||||
}
|
||||
|
||||
.directory .icon {
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
.directory .app_icon {
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.file,
|
||||
.directory {
|
||||
height: 40px;
|
||||
padding-top: 4px;
|
||||
|
||||
.text {
|
||||
line-height: 30px;
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
padding-top: 3px;
|
||||
padding-right: 0px;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
+91
@@ -0,0 +1,91 @@
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
import React from 'react';
|
||||
import Draggable from 'components/draggable/draggable';
|
||||
import DriveElement from './drive-element.jsx';
|
||||
import './drive.scss';
|
||||
import UIFile from './ui/file.jsx';
|
||||
import Loader from 'components/loader/loader.jsx';
|
||||
import WorkspaceUserRights from 'app/features/workspaces/services/workspace-user-rights-service';
|
||||
import Languages from 'app/features/global/services/languages-service';
|
||||
|
||||
type StateType = any;
|
||||
|
||||
type NodeType = any;
|
||||
|
||||
export default class File extends DriveElement {
|
||||
node: NodeType;
|
||||
state: StateType;
|
||||
constructor() {
|
||||
super();
|
||||
this.state = {
|
||||
loading: true,
|
||||
};
|
||||
}
|
||||
componentDidMount() {
|
||||
super.componentDidMount();
|
||||
if (this.state.loading) {
|
||||
setTimeout(() => {
|
||||
this.setState({ loading: false });
|
||||
}, 4000);
|
||||
}
|
||||
}
|
||||
render() {
|
||||
if (!this.state.element || !this.state.element.front_id) {
|
||||
return (
|
||||
<div
|
||||
className={'file mini ' + (this.props.notInDrive ? 'notInDrive ' : '')}
|
||||
style={{ textAlign: 'center' }}
|
||||
>
|
||||
{this.state.loading && <Loader color="#CCC" className="file_loader" />}
|
||||
{!this.state.loading && (
|
||||
<span className="text" style={{ opacity: 0.5 }}>
|
||||
{Languages.t('scenes.apps.drive.preview_bloc.error_file', [], 'File not found.')}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
this.state.loading = false;
|
||||
}
|
||||
|
||||
if (this.props.hide) {
|
||||
return '';
|
||||
}
|
||||
|
||||
const mini = (!this.state.element.has_preview && this.props.notInDrive) || this.props.mini;
|
||||
return (
|
||||
<Draggable
|
||||
style={this.props.style}
|
||||
className={
|
||||
'js-drive-multi-selector-selectable file ' +
|
||||
(this.state.selected ? 'is_selected ' : '') +
|
||||
(this.props.notInDrive ? 'notInDrive ' : '') +
|
||||
(mini ? 'mini ' : '') +
|
||||
this.props.className
|
||||
}
|
||||
refDraggable={(node: NodeType) => (this.node = node)}
|
||||
onClick={(evt: any) => this.clickElement(evt, this.props.previewonly)}
|
||||
onDoubleClick={this.props.onDoubleClick}
|
||||
parentClassOnDrag="drive_view list"
|
||||
onDragStart={(evt: any) => {
|
||||
this.dragElement(evt);
|
||||
}}
|
||||
minMove={10}
|
||||
data={{ type: 'file', selection_type: this.props.selectionType, data: this.props.data }}
|
||||
deactivated={WorkspaceUserRights.isNotConnected() || this.props.notInDrive}
|
||||
>
|
||||
<UIFile
|
||||
data={this.state.element}
|
||||
menu={!this.props.removeIcon && this.common_menu}
|
||||
details={true}
|
||||
removeIcon={this.props.removeIcon}
|
||||
removeOnClick={(e: any) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
this.props.removeOnClick();
|
||||
}}
|
||||
/>
|
||||
</Draggable>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
/* eslint-disable react/prop-types */
|
||||
import React from 'react';
|
||||
|
||||
const SvgComponent = props => (
|
||||
<svg
|
||||
width={(props.scale || 1) * 0.75 * 32}
|
||||
height={(props.scale || 1) * 0.75 * 32}
|
||||
viewBox="0 0 1792 1792"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
scale={((props.scale || 1) * 0.75) / 56}
|
||||
fill={props.fill || '#FFF'}
|
||||
d="M768 384V256H640v128h128zm128 128V384H768v128h128zM768 640V512H640v128h128zm128 128V640H768v128h128zm700-388c18.667 18.667 34.667 44 48 76s20 61.333 20 88v1152c0 26.667-9.333 49.333-28 68s-41.333 28-68 28H224c-26.667 0-49.333-9.333-68-28s-28-41.333-28-68V96c0-26.667 9.333-49.333 28-68s41.333-28 68-28h896c26.667 0 56 6.667 88 20s57.333 29.333 76 48l312 312zm-444-244v376h376c-6.667-19.333-14-33-22-41l-313-313c-8-8-21.667-15.333-41-22zm384 1528V640h-416c-26.667 0-49.333-9.333-68-28s-28-41.333-28-68V128H896v128H768V128H256v1536h1280zM909 943l107 349c5.333 18 8 35.333 8 52 0 55.333-24.167 101.167-72.5 137.5S842 1536 768 1536s-135.167-18.167-183.5-54.5S512 1399.333 512 1344c0-16.667 2.667-34 8-52 14-42 54-174 120-396V768h128v128h79c14.667 0 27.667 4.333 39 13s19 20 23 34zm-141 465c35.333 0 65.5-6.333 90.5-19s37.5-27.667 37.5-45-12.5-32.333-37.5-45-55.167-19-90.5-19-65.5 6.333-90.5 19-37.5 27.667-37.5 45 12.5 32.333 37.5 45 55.167 19 90.5 19z"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
||||
export default SvgComponent;
|
||||
@@ -0,0 +1,15 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
|
||||
width="1792px" height="1792px" viewBox="0 0 1792 1792" enable-background="new 0 0 1792 1792" xml:space="preserve">
|
||||
<path fill="#FFFFFF" d="M768,384V256H640v128H768z M896,512V384H768v128H896z M768,640V512H640v128H768z M896,768V640H768v128H896z
|
||||
M1596,380c18.667,18.667,34.667,44,48,76s20,61.333,20,88v1152c0,26.667-9.333,49.333-28,68s-41.333,28-68,28H224
|
||||
c-26.667,0-49.333-9.333-68-28s-28-41.333-28-68V96c0-26.667,9.333-49.333,28-68s41.333-28,68-28h896c26.667,0,56,6.667,88,20
|
||||
s57.333,29.333,76,48L1596,380z M1152,136v376h376c-6.667-19.333-14-33-22-41l-313-313C1185,150,1171.333,142.667,1152,136z
|
||||
M1536,1664V640h-416c-26.667,0-49.333-9.333-68-28s-28-41.333-28-68V128H896v128H768V128H256v1536H1536z M909,943l107,349
|
||||
c5.333,18,8,35.333,8,52c0,55.333-24.167,101.167-72.5,137.5S842,1536,768,1536s-135.167-18.167-183.5-54.5S512,1399.333,512,1344
|
||||
c0-16.667,2.667-34,8-52c14-42,54-174,120-396V768h128v128h79c14.667,0,27.667,4.333,39,13S905,929,909,943z M768,1408
|
||||
c35.333,0,65.5-6.333,90.5-19s37.5-27.667,37.5-45s-12.5-32.333-37.5-45s-55.167-19-90.5-19s-65.5,6.333-90.5,19
|
||||
s-37.5,27.667-37.5,45s12.5,32.333,37.5,45S732.667,1408,768,1408z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
+19
@@ -0,0 +1,19 @@
|
||||
/* eslint-disable react/prop-types */
|
||||
import React from 'react';
|
||||
|
||||
const SvgComponent = props => (
|
||||
<svg
|
||||
width={(props.scale || 1) * 0.75 * 32}
|
||||
height={(props.scale || 1) * 0.75 * 32}
|
||||
viewBox="0 0 32 32"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
scale={(props.scale || 1) * 0.75}
|
||||
fill={props.fill || '#FFF'}
|
||||
d="M10.786 22.646l-.737.738a.462.462 0 0 1-.68 0L2.494 16.51a.461.461 0 0 1 0-.678l6.875-6.876a.472.472 0 0 1 .341-.147c.128 0 .24.05.339.147l.737.738a.472.472 0 0 1 .147.341c0 .127-.05.239-.147.339l-5.798 5.798 5.798 5.798c.097.098.147.212.147.339s-.05.24-.147.337zm8.718-15.741l-5.502 19.048a.472.472 0 0 1-.229.287.415.415 0 0 1-.346.039l-.915-.254a.463.463 0 0 1-.288-.227.437.437 0 0 1-.037-.36l5.503-19.05a.495.495 0 0 1 .227-.288.417.417 0 0 1 .348-.036l.917.25c.128.04.223.115.288.228a.447.447 0 0 1 .034.363zM29.2 16.51l-6.879 6.875c-.097.102-.212.149-.339.149s-.241-.048-.338-.149l-.738-.738a.47.47 0 0 1-.146-.339.47.47 0 0 1 .146-.339l5.798-5.798-5.798-5.798a.474.474 0 0 1-.146-.339c0-.129.049-.242.146-.341l.738-.738a.464.464 0 0 1 .677 0l6.879 6.876a.465.465 0 0 1 0 .679z"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
||||
export default SvgComponent;
|
||||
+17
@@ -0,0 +1,17 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
|
||||
width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve">
|
||||
<path fill="#FFFFFF" d="M10.786,22.646l-0.737,0.738c-0.1,0.102-0.211,0.149-0.339,0.149c-0.129,0-0.241-0.048-0.341-0.149
|
||||
L2.494,16.51c-0.099-0.097-0.148-0.211-0.148-0.339c0-0.127,0.049-0.242,0.148-0.339l6.875-6.876c0.1-0.098,0.212-0.147,0.341-0.147
|
||||
c0.128,0,0.24,0.05,0.339,0.147l0.737,0.738c0.097,0.099,0.147,0.211,0.147,0.341c0,0.127-0.05,0.239-0.147,0.339l-5.798,5.798
|
||||
l5.798,5.798c0.097,0.098,0.147,0.212,0.147,0.339S10.883,22.549,10.786,22.646z M19.504,6.905l-5.502,19.048
|
||||
c-0.039,0.127-0.115,0.225-0.229,0.287c-0.112,0.066-0.228,0.075-0.346,0.039l-0.915-0.254c-0.128-0.037-0.224-0.112-0.288-0.227
|
||||
c-0.064-0.115-0.077-0.233-0.037-0.36l5.503-19.05c0.04-0.127,0.117-0.224,0.227-0.288c0.115-0.063,0.232-0.076,0.348-0.036
|
||||
l0.917,0.25c0.128,0.04,0.223,0.115,0.288,0.228C19.531,6.657,19.546,6.778,19.504,6.905z M29.2,16.51l-6.879,6.875
|
||||
c-0.097,0.102-0.212,0.149-0.339,0.149s-0.241-0.048-0.338-0.149l-0.738-0.738c-0.097-0.098-0.146-0.212-0.146-0.339
|
||||
s0.049-0.241,0.146-0.339l5.798-5.798l-5.798-5.798c-0.097-0.1-0.146-0.212-0.146-0.339c0-0.129,0.049-0.242,0.146-0.341
|
||||
l0.738-0.738c0.097-0.098,0.211-0.147,0.338-0.147s0.242,0.05,0.339,0.147l6.879,6.876c0.098,0.097,0.146,0.212,0.146,0.339
|
||||
C29.346,16.298,29.298,16.413,29.2,16.51z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
@@ -0,0 +1,20 @@
|
||||
/* eslint-disable react/prop-types */
|
||||
import React from 'react';
|
||||
|
||||
const SvgComponent = props => (
|
||||
<svg
|
||||
width={(props.scale || 1) * 0.75 * 32}
|
||||
height={(props.scale || 1) * 0.75 * 32}
|
||||
viewBox="0 0 32 32"
|
||||
{...props}
|
||||
>
|
||||
<g fill={props.fill || '#FFF'}>
|
||||
<path
|
||||
scale={(props.scale || 1) * 0.75}
|
||||
d="M29.159 6.189H2.839a1.34 1.34 0 0 1 0-2.679h26.32a1.34 1.34 0 1 1 0 2.679zM29.159 13.592H2.839a1.34 1.34 0 0 1 0-2.68h26.32a1.34 1.34 0 0 1 0 2.68zM29.159 20.995H2.839a1.34 1.34 0 0 1 0-2.678h26.32a1.34 1.34 0 1 1 0 2.678zM18.685 28.403H2.839c-.739 0-1.339-.598-1.339-1.338s.601-1.341 1.339-1.341h15.845c.74 0 1.34.601 1.34 1.341s-.599 1.338-1.339 1.338z"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
|
||||
export default SvgComponent;
|
||||
@@ -0,0 +1,16 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
|
||||
width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve">
|
||||
<g>
|
||||
<path fill="#FFFFFF" d="M29.159,6.189H2.839C2.101,6.189,1.5,5.589,1.5,4.849C1.5,4.11,2.101,3.51,2.839,3.51h26.32
|
||||
c0.74,0,1.341,0.6,1.341,1.339C30.5,5.589,29.899,6.189,29.159,6.189z"/>
|
||||
<path fill="#FFFFFF" d="M29.159,13.592H2.839c-0.739,0-1.339-0.6-1.339-1.339c0-0.74,0.601-1.341,1.339-1.341h26.32
|
||||
c0.74,0,1.341,0.601,1.341,1.341C30.5,12.992,29.899,13.592,29.159,13.592z"/>
|
||||
<path fill="#FFFFFF" d="M29.159,20.995H2.839c-0.739,0-1.339-0.601-1.339-1.34s0.601-1.338,1.339-1.338h26.32
|
||||
c0.74,0,1.341,0.599,1.341,1.338S29.899,20.995,29.159,20.995z"/>
|
||||
<path fill="#FFFFFF" d="M18.685,28.403H2.839c-0.739,0-1.339-0.598-1.339-1.338s0.601-1.341,1.339-1.341h15.845
|
||||
c0.74,0,1.34,0.601,1.34,1.341S19.425,28.403,18.685,28.403z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
+19
@@ -0,0 +1,19 @@
|
||||
/* eslint-disable react/prop-types */
|
||||
import React from 'react';
|
||||
|
||||
const SvgComponent = props => (
|
||||
<svg
|
||||
width={(props.scale || 1) * 0.75 * 32}
|
||||
height={(props.scale || 1) * 0.75 * 32}
|
||||
viewBox="0 0 100 100"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
scale={(props.scale || 1) * 0.75}
|
||||
fill={props.fill || '#FFF'}
|
||||
d="M60 0H20C13.373 0 8 5.373 8 12v72c0 6.627 5.373 12 12 12h55.875C82.502 96 88 90.627 88 84V28L60 0zm0 11.178L76.709 28H60V11.178zM75.875 88H20c-2.206 0-4-1.794-4-4V12c0-2.206 1.794-4 4-4h32v28h28v48c0 2.168-1.889 4-4.125 4z"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
||||
export default SvgComponent;
|
||||
@@ -0,0 +1,9 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="file" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
|
||||
width="96px" height="96px" viewBox="0 0 96 96" enable-background="new 0 0 96 96" xml:space="preserve">
|
||||
<path fill="#FFFFFF" d="M60,0H20C13.373,0,8,5.373,8,12v72c0,6.627,5.373,12,12,12h55.875C82.502,96,88,90.627,88,84V28
|
||||
C84,24,66,6,60,0z M60,11.178L76.709,28H60V11.178z M75.875,88H20c-2.206,0-4-1.794-4-4V12c0-2.206,1.794-4,4-4h32v20v8h8h20v48
|
||||
C80,86.168,78.111,88,75.875,88z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 704 B |
@@ -0,0 +1,24 @@
|
||||
/* eslint-disable react/prop-types */
|
||||
import React from 'react';
|
||||
|
||||
const SvgComponent = props => (
|
||||
<svg
|
||||
width={(props.scale || 1) * 32 * 0.75}
|
||||
height={(props.scale || 1) * 32 * 0.75}
|
||||
viewBox="0 0 32 32"
|
||||
{...props}
|
||||
>
|
||||
<g fill={props.fill || '#FFF'}>
|
||||
<path
|
||||
scale={(props.scale || 1) * 0.75}
|
||||
d="M23.251 14.637a3.106 3.106 0 1 0-.002-6.212 3.106 3.106 0 0 0 .002 6.212z"
|
||||
/>
|
||||
<path
|
||||
scale={(props.scale || 1) * 0.75}
|
||||
d="M28.688 4.282H3.312c-1.01 0-1.812.822-1.812 1.831v21.194c0 1.008.802 1.831 1.812 1.831h25.376a1.82 1.82 0 0 0 1.812-1.831V6.113a1.819 1.819 0 0 0-1.812-1.831zm-6.673 12.796a1.116 1.116 0 0 0-.829-.402c-.328 0-.562.156-.829.37l-1.211 1.023c-.252.182-.452.303-.744.303-.278 0-.529-.102-.712-.263a8.251 8.251 0 0 1-.279-.268l-3.483-3.768a1.422 1.422 0 0 0-1.079-.485c-.434 0-.835.213-1.089.505l-8.187 9.88V7.11c.065-.441.409-.758.847-.758h23.154c.448 0 .81.329.837.776l.018 16.856-6.414-6.906z"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
|
||||
export default SvgComponent;
|
||||
@@ -0,0 +1,16 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
|
||||
width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve">
|
||||
<g>
|
||||
<path fill="#FFFFFF" d="M23.251,14.637c1.712,0,3.105-1.389,3.105-3.105c0-1.716-1.394-3.109-3.105-3.109
|
||||
c-1.716,0-3.107,1.393-3.107,3.109C20.144,13.248,21.535,14.637,23.251,14.637z"/>
|
||||
<path fill="#FFFFFF" d="M28.688,4.282H3.312C2.302,4.282,1.5,5.104,1.5,6.113v21.194c0,1.008,0.802,1.831,1.812,1.831h25.376
|
||||
c1.007,0,1.812-0.823,1.812-1.831V6.113C30.5,5.104,29.695,4.282,28.688,4.282z M22.015,17.078
|
||||
c-0.194-0.226-0.493-0.402-0.829-0.402c-0.328,0-0.562,0.156-0.829,0.37l-1.211,1.023c-0.252,0.182-0.452,0.303-0.744,0.303
|
||||
c-0.278,0-0.529-0.102-0.712-0.263c-0.064-0.059-0.182-0.169-0.279-0.268l-3.483-3.768c-0.256-0.297-0.646-0.485-1.079-0.485
|
||||
c-0.434,0-0.835,0.213-1.089,0.505l-8.187,9.88V7.11c0.065-0.441,0.409-0.758,0.847-0.758h23.154c0.448,0,0.81,0.329,0.837,0.776
|
||||
l0.018,16.856L22.015,17.078z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
+24
@@ -0,0 +1,24 @@
|
||||
/* eslint-disable react/prop-types */
|
||||
import React from 'react';
|
||||
|
||||
const SvgComponent = props => (
|
||||
<svg
|
||||
width={(props.scale || 1) * 0.75 * 32}
|
||||
height={(props.scale || 1) * 0.75 * 32}
|
||||
viewBox="0 0 32 32"
|
||||
{...props}
|
||||
>
|
||||
<g fill={props.fill || '#FFF'}>
|
||||
<path
|
||||
scale={(props.scale || 1) * 0.75}
|
||||
d="M16.041 12.217H16h.041zM25.082 8.342h-3.915s2.1 1.373 2.551 3.875H25.082a2.523 2.523 0 0 1 2.543 2.543v2.583c0 1.421-1.122 2.624-2.543 2.624H16.04c-1.421 0-2.624-1.203-2.624-2.624V14.8H9.542v2.543c0 .929.202 1.816.557 2.624 1.017 2.276 3.302 3.875 5.942 3.875h9.042c3.568 0 6.418-2.931 6.418-6.499V14.76a6.39 6.39 0 0 0-6.419-6.418z"
|
||||
/>
|
||||
<path
|
||||
scale={(props.scale || 1) * 0.75}
|
||||
d="M21.942 12.217a6.39 6.39 0 0 0-5.902-3.875H7c-3.569 0-6.5 2.85-6.5 6.418v2.583c0 3.568 2.931 6.499 6.5 6.499h3.833s-2.082-1.373-2.59-3.875H7c-1.421 0-2.624-1.203-2.624-2.624V14.76c0-1.421 1.203-2.543 2.624-2.543h9.041a2.523 2.523 0 0 1 2.543 2.543v2.623h3.875V14.76c0-.904-.186-1.768-.517-2.543z"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
|
||||
export default SvgComponent;
|
||||
+16
@@ -0,0 +1,16 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
|
||||
width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve">
|
||||
<g>
|
||||
<path fill="#FFFFFF" d="M16.041,12.217H16l0,0C16.016,12.217,16.024,12.217,16.041,12.217z"/>
|
||||
<path fill="#FFFFFF" d="M25.082,8.342h-3.915c0,0,2.1,1.373,2.551,3.875h1.323h0.041c1.421,0,2.543,1.123,2.543,2.543v2.583
|
||||
c0,1.421-1.122,2.624-2.543,2.624h-9.042c-1.421,0-2.624-1.203-2.624-2.624V14.8H9.542v2.543c0,0.929,0.202,1.816,0.557,2.624
|
||||
c1.017,2.276,3.302,3.875,5.942,3.875h9.042c3.568,0,6.418-2.931,6.418-6.499V14.76C31.5,11.192,28.65,8.342,25.082,8.342z"/>
|
||||
<path fill="#FFFFFF" d="M21.942,12.217c-0.977-2.284-3.237-3.875-5.902-3.875H7c-3.569,0-6.5,2.85-6.5,6.418v2.583
|
||||
c0,3.568,2.931,6.499,6.5,6.499h3.833c0,0-2.082-1.373-2.59-3.875H7c-1.421,0-2.624-1.203-2.624-2.624V14.76
|
||||
c0-1.421,1.203-2.543,2.624-2.543h9h0.041c1.42,0,2.543,1.123,2.543,2.543v2.583c0,0.016,0,0.024,0,0.04h3.875
|
||||
c0-0.016,0-0.024,0-0.04V14.76C22.459,13.856,22.273,12.992,21.942,12.217z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
+19
@@ -0,0 +1,19 @@
|
||||
/* eslint-disable react/prop-types */
|
||||
import React from 'react';
|
||||
|
||||
const SvgComponent = props => (
|
||||
<svg
|
||||
width={(props.scale || 1) * 0.75 * 32}
|
||||
height={(props.scale || 1) * 0.75 * 32}
|
||||
viewBox="0 0 32 32"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
scale={(props.scale || 1) * 0.75}
|
||||
fill={props.fill || '#FFF'}
|
||||
d="M5.288 28c-.71 0-1.07-.371-1.25-.711-.224-.422-.272-.982-.137-1.58.152-.678.527-1.293 1.177-1.93.801-.781 1.974-1.564 3.305-2.207a26.563 26.563 0 0 1 2.272-.959c.978-1.523 2.363-3.907 3.36-6.527.108-.289.213-.574.312-.863-.307-.71-.498-1.32-.645-1.847-.276-.976-.451-1.854-.524-2.606a9.468 9.468 0 0 1 .039-2.184c.095-.714.259-1.224.51-1.601a2.217 2.217 0 0 1 1.595-.943l.07-.011a1.56 1.56 0 0 1 .766.033c.21.064.414.174.632.305l.005-.013c1.052.496.954 1.39.826 2.52-.018.143-.035.299-.053.471-.143 1.333-.546 3.496-1.259 5.761.049.098.101.199.154.3.535 1.006 1.31 2.164 2.244 3.351.428.539.918 1.117 1.428 1.693a17.197 17.197 0 0 1 2.426.014c.852.07 1.703.207 2.465.396.877.211 1.512.461 2.055.807.699.434 1.238 1.02 1.514 1.646.324.713.338 1.533.031 2.178-.188.404-.604.941-1.51 1.238a3.359 3.359 0 0 1-2 .01c-.641-.193-1.354-.572-2.188-1.16-.809-.574-1.576-1.234-2.486-2.139-.35-.348-.699-.713-1.051-1.084-.568.064-1.203.164-2.003.309-.944.172-2.109.402-3.589.838-.655.191-1.305.398-1.923.619-.078.115-.151.225-.219.328-1.272 1.885-2.513 3.361-3.591 4.279-.831.705-1.601 1.104-2.358 1.232a2.352 2.352 0 0 1-.4.037zm3.281-4.467c-1.186.643-1.881 1.236-2.211 1.559-.472.461-.606.764-.662.982.345-.125.731-.369 1.166-.736.408-.348.981-.91 1.707-1.805zm13.261-3.271c.781.77 1.445 1.338 2.137 1.826.822.58 1.354.811 1.65.9.324.096.619.098.92.004.117-.043.346-.135.412-.279.061-.131.074-.387-.043-.645-.137-.299-.432-.609-.818-.852-.373-.234-.84-.414-1.518-.576a14.937 14.937 0 0 0-2.176-.352c-.185-.011-.374-.024-.564-.026zm-6.357-4.88a36.788 36.788 0 0 1-2.141 4.342 35.008 35.008 0 0 1 3.707-.855c.316-.061.607-.111.883-.154a34.1 34.1 0 0 1-.671-.822 28.7 28.7 0 0 1-1.778-2.511zm.185-9.54l-.022.003c-.037.005-.073.011-.11.015-.065.009-.082.01-.122.025a.382.382 0 0 0-.181.129c-.033.05-.136.25-.21.818a7.788 7.788 0 0 0-.033 1.763c.042.428.124.911.246 1.441.261-1.139.423-2.148.502-2.883.018-.177.037-.337.054-.482.029-.265.061-.539.071-.717-.067-.039-.141-.083-.195-.112zm.328.16l.029.022.121-.267-.15.245z"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
||||
export default SvgComponent;
|
||||
+30
@@ -0,0 +1,30 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
|
||||
width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve">
|
||||
<path fill="#FFFFFF" d="M5.288,28c-0.71,0-1.07-0.371-1.25-0.711c-0.224-0.422-0.272-0.982-0.137-1.58
|
||||
c0.152-0.678,0.527-1.293,1.177-1.93c0.801-0.781,1.974-1.564,3.305-2.207c0.656-0.318,1.432-0.646,2.272-0.959
|
||||
c0.978-1.523,2.363-3.907,3.36-6.527c0.108-0.289,0.213-0.574,0.312-0.863c-0.307-0.71-0.498-1.32-0.645-1.847
|
||||
c-0.276-0.976-0.451-1.854-0.524-2.606c-0.071-0.74-0.058-1.475,0.039-2.184c0.095-0.714,0.259-1.224,0.51-1.601
|
||||
c0.33-0.476,0.761-0.708,1.067-0.82c0.239-0.087,0.421-0.11,0.528-0.123l0.07-0.011c0.133-0.024,0.411-0.074,0.766,0.033
|
||||
c0.21,0.064,0.414,0.174,0.632,0.305l0.005-0.013c1.052,0.496,0.954,1.39,0.826,2.52c-0.018,0.143-0.035,0.299-0.053,0.471
|
||||
c-0.143,1.333-0.546,3.496-1.259,5.761c0.049,0.098,0.101,0.199,0.154,0.3c0.535,1.006,1.31,2.164,2.244,3.351
|
||||
c0.428,0.539,0.918,1.117,1.428,1.693c0.822-0.053,1.641-0.047,2.426,0.014c0.852,0.07,1.703,0.207,2.465,0.396
|
||||
c0.877,0.211,1.512,0.461,2.055,0.807c0.699,0.434,1.238,1.02,1.514,1.646c0.324,0.713,0.338,1.533,0.031,2.178
|
||||
c-0.188,0.404-0.604,0.941-1.51,1.238c-0.65,0.207-1.322,0.209-2,0.01c-0.641-0.193-1.354-0.572-2.188-1.16
|
||||
c-0.809-0.574-1.576-1.234-2.486-2.139c-0.35-0.348-0.699-0.713-1.051-1.084c-0.568,0.064-1.203,0.164-2.003,0.309
|
||||
c-0.944,0.172-2.109,0.402-3.589,0.838c-0.655,0.191-1.305,0.398-1.923,0.619c-0.078,0.115-0.151,0.225-0.219,0.328
|
||||
c-1.272,1.885-2.513,3.361-3.591,4.279c-0.831,0.705-1.601,1.104-2.358,1.232C5.543,27.988,5.411,28,5.288,28z M8.569,23.533
|
||||
c-1.186,0.643-1.881,1.236-2.211,1.559c-0.472,0.461-0.606,0.764-0.662,0.982c0.345-0.125,0.731-0.369,1.166-0.736
|
||||
C7.27,24.99,7.843,24.428,8.569,23.533z M21.83,20.262c0.781,0.77,1.445,1.338,2.137,1.826c0.822,0.58,1.354,0.811,1.65,0.9
|
||||
c0.324,0.096,0.619,0.098,0.92,0.004c0.117-0.043,0.346-0.135,0.412-0.279c0.061-0.131,0.074-0.387-0.043-0.645
|
||||
c-0.137-0.299-0.432-0.609-0.818-0.852c-0.373-0.234-0.84-0.414-1.518-0.576c-0.674-0.164-1.422-0.285-2.176-0.352
|
||||
C22.209,20.277,22.02,20.264,21.83,20.262z M15.473,15.382c-0.655,1.602-1.424,3.094-2.141,4.342
|
||||
c1.533-0.439,2.731-0.684,3.707-0.855c0.316-0.061,0.607-0.111,0.883-0.154c-0.236-0.281-0.459-0.553-0.671-0.822
|
||||
C16.576,17.035,15.973,16.183,15.473,15.382z M15.658,5.842l-0.022,0.003c-0.037,0.005-0.073,0.011-0.11,0.015
|
||||
c-0.065,0.009-0.082,0.01-0.122,0.025c-0.037,0.012-0.128,0.053-0.181,0.129c-0.033,0.05-0.136,0.25-0.21,0.818
|
||||
c-0.078,0.563-0.088,1.172-0.033,1.763c0.042,0.428,0.124,0.911,0.246,1.441c0.261-1.139,0.423-2.148,0.502-2.883
|
||||
c0.018-0.177,0.037-0.337,0.054-0.482c0.029-0.265,0.061-0.539,0.071-0.717C15.786,5.915,15.712,5.871,15.658,5.842z M15.986,6.002
|
||||
c0.01,0.008,0.02,0.016,0.029,0.022l0.121-0.267L15.986,6.002z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.0 KiB |
@@ -0,0 +1,25 @@
|
||||
/* eslint-disable react/prop-types */
|
||||
import React from 'react';
|
||||
|
||||
const SvgComponent = props => (
|
||||
<svg
|
||||
width={(props.scale || 1) * 0.75 * 32}
|
||||
height={(props.scale || 1) * 0.75 * 32}
|
||||
viewBox="0 0 32 32"
|
||||
{...props}
|
||||
>
|
||||
<g fill={props.fill || '#FFF'}>
|
||||
<path scale={(props.scale || 1) * 0.75} d="M1.479 4.082h29.043V20.42H1.479z" />
|
||||
<path
|
||||
scale={(props.scale || 1) * 0.75}
|
||||
d="M30.521 21.898H1.479A1.479 1.479 0 0 1 0 20.42V4.082a1.48 1.48 0 0 1 1.479-1.479h29.043c.816 0 1.478.662 1.478 1.479V20.42c0 .816-.662 1.478-1.479 1.478zM2.957 18.941h26.086V5.56H2.957v13.381z"
|
||||
/>
|
||||
<path
|
||||
scale={(props.scale || 1) * 0.75}
|
||||
d="M19.747 30.074c-.56 0-1.097-.32-1.345-.863l-2.513-5.484-3.019 5.572a1.478 1.478 0 1 1-2.6-1.408l4.429-8.176a1.466 1.466 0 0 1 1.349-.772c.56.019 1.062.353 1.294.862l3.746 8.174a1.48 1.48 0 0 1-1.341 2.095z"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
|
||||
export default SvgComponent;
|
||||
@@ -0,0 +1,17 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
|
||||
width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve">
|
||||
<g>
|
||||
<g>
|
||||
<rect x="1.479" y="4.082" fill="#FFFFFF" width="29.043" height="16.338"/>
|
||||
<path fill="#FFFFFF" d="M30.521,21.898H1.479C0.662,21.898,0,21.236,0,20.42V4.082c0-0.816,0.662-1.479,1.479-1.479h29.043
|
||||
C31.338,2.603,32,3.265,32,4.082V20.42C32,21.236,31.338,21.898,30.521,21.898z M2.957,18.941h26.086V5.56H2.957V18.941z"/>
|
||||
</g>
|
||||
<path fill="#FFFFFF" d="M19.747,30.074c-0.56,0-1.097-0.32-1.345-0.863l-2.513-5.484l-3.019,5.572
|
||||
c-0.389,0.719-1.286,0.984-2.004,0.596s-0.985-1.285-0.596-2.004l4.429-8.176c0.267-0.492,0.785-0.795,1.349-0.772
|
||||
c0.56,0.019,1.062,0.353,1.294,0.862l3.746,8.174c0.34,0.742,0.015,1.619-0.729,1.961C20.162,30.031,19.953,30.074,19.747,30.074z"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
@@ -0,0 +1,19 @@
|
||||
/* eslint-disable react/prop-types */
|
||||
import React from 'react';
|
||||
|
||||
const SvgComponent = props => (
|
||||
<svg
|
||||
width={(props.scale || 1) * 0.75 * 32}
|
||||
height={(props.scale || 1) * 0.75 * 32}
|
||||
viewBox="0 0 32 32"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
scale={(props.scale || 1) * 0.75}
|
||||
fill={props.fill || '#FFF'}
|
||||
d="M18.802 3.5H16.67v17.38c-1.181-.449-2.707-.457-4.211.09-2.697.979-4.306 3.369-3.591 5.33.715 1.967 3.481 2.76 6.179 1.777 2.291-.832 3.791-2.68 3.75-4.422l.005-14.214c3.722.586 3.973 5.289 3.531 6.607-.171.5.126.873.688 0C27.032 9.81 18.802 7.057 18.802 3.5z"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
||||
export default SvgComponent;
|
||||
@@ -0,0 +1,11 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
|
||||
width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve">
|
||||
<g>
|
||||
<path fill="#FFFFFF" d="M18.802,3.5h-2.132v17.38c-1.181-0.449-2.707-0.457-4.211,0.09c-2.697,0.979-4.306,3.369-3.591,5.33
|
||||
c0.715,1.967,3.481,2.76,6.179,1.777c2.291-0.832,3.791-2.68,3.75-4.422l0.005-14.214c3.722,0.586,3.973,5.289,3.531,6.607
|
||||
c-0.171,0.5,0.126,0.873,0.688,0C27.032,9.81,18.802,7.057,18.802,3.5z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 755 B |
@@ -0,0 +1,28 @@
|
||||
/* eslint-disable react/prop-types */
|
||||
import React from 'react';
|
||||
|
||||
const SvgComponent = props => (
|
||||
<svg
|
||||
width={(props.scale || 1) * 0.75 * 32}
|
||||
height={(props.scale || 1) * 0.75 * 32}
|
||||
{...props}
|
||||
viewBox="0 0 32 32"
|
||||
>
|
||||
<g fill={props.fill || '#FFF'}>
|
||||
<path
|
||||
scale={(props.scale || 1) * 0.75}
|
||||
d="M28.705 28.018H3.293A1.293 1.293 0 0 1 2 26.726V5.274c0-.713.58-1.292 1.293-1.292h25.412c.715 0 1.295.58 1.295 1.292v21.451c0 .715-.58 1.293-1.295 1.293zM4.587 25.431h22.827V6.569H4.587v18.862z"
|
||||
/>
|
||||
<path
|
||||
scale={(props.scale || 1) * 0.75}
|
||||
d="M28.705 20.864H3.293a1.293 1.293 0 0 1 0-2.585h25.412a1.293 1.293 0 1 1 0 2.585zM28.705 13.723H3.293a1.295 1.295 0 0 1 0-2.588h25.412a1.294 1.294 0 1 1 0 2.588z"
|
||||
/>
|
||||
<path
|
||||
scale={(props.scale || 1) * 0.75}
|
||||
d="M16 28.018a1.291 1.291 0 0 1-1.293-1.292V5.274a1.295 1.295 0 0 1 2.588 0v21.451c0 .715-.58 1.293-1.295 1.293z"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
|
||||
export default SvgComponent;
|
||||
@@ -0,0 +1,16 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
|
||||
width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve">
|
||||
<g>
|
||||
<path fill="#FFFFFF" d="M28.705,28.018H3.293C2.58,28.018,2,27.44,2,26.726V5.274c0-0.713,0.58-1.292,1.293-1.292h25.412
|
||||
C29.42,3.982,30,4.562,30,5.274v21.451C30,27.44,29.42,28.018,28.705,28.018z M4.587,25.431h22.827V6.569H4.587V25.431z"/>
|
||||
<path fill="#FFFFFF" d="M28.705,20.864H3.293C2.58,20.864,2,20.284,2,19.57c0-0.713,0.58-1.291,1.293-1.291h25.412
|
||||
c0.715,0,1.295,0.578,1.295,1.291C30,20.284,29.42,20.864,28.705,20.864z"/>
|
||||
<path fill="#FFFFFF" d="M28.705,13.723H3.293C2.58,13.723,2,13.143,2,12.428s0.58-1.293,1.293-1.293h25.412
|
||||
c0.715,0,1.295,0.578,1.295,1.293S29.42,13.723,28.705,13.723z"/>
|
||||
<path fill="#FFFFFF" d="M16,28.018c-0.715,0-1.293-0.577-1.293-1.292V5.274c0-0.713,0.578-1.292,1.293-1.292
|
||||
s1.295,0.58,1.295,1.292v21.451C17.295,27.44,16.715,28.018,16,28.018z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
+33
@@ -0,0 +1,33 @@
|
||||
/* eslint-disable react/prop-types */
|
||||
import React from 'react';
|
||||
|
||||
const SvgComponent = props => (
|
||||
<svg
|
||||
width={(props.scale || 1) * 0.75 * 32}
|
||||
height={(props.scale || 1) * 0.75 * 32}
|
||||
viewBox="0 0 32 32"
|
||||
>
|
||||
<path
|
||||
scale={(props.scale || 1) * 0.75}
|
||||
fill={props.fill || '#FFF'}
|
||||
d="M20.591 29.731l-1.004-1.006a11.056 11.056 0 0 0 3.261-7.875c0-2.976-1.157-5.77-3.261-7.873a11.062 11.062 0 0 0-7.874-3.26 11.061 11.061 0 0 0-7.874 3.26l-1.005-1.005a12.482 12.482 0 0 1 8.879-3.676c3.353 0 6.509 1.309 8.877 3.676a12.479 12.479 0 0 1 3.678 8.878 12.48 12.48 0 0 1-3.677 8.881z"
|
||||
/>
|
||||
<path
|
||||
scale={(props.scale || 1) * 0.75}
|
||||
fill={props.fill || '#FFF'}
|
||||
d="M2 11.376v2.559h2.559v-2.559zM18.819 28.006v2.557h2.557v-2.557zM29.452 21.085l-.603.603L10.752 3.606l.602-.603z"
|
||||
/>
|
||||
<path
|
||||
scale={(props.scale || 1) * 0.75}
|
||||
fill={props.fill || '#FFF'}
|
||||
d="M18.819 11.044v2.559h2.557v-2.559z"
|
||||
/>
|
||||
<path
|
||||
scale={(props.scale || 1) * 0.75}
|
||||
fill={props.fill || '#FFF'}
|
||||
d="M21.615 13.84h-3.03v-3.032h3.03v3.032zm-2.56-.475h2.086v-2.083h-2.086v2.083zM11.238 4.175c.475 0 .854-.38.854-.854s-.378-.854-.854-.854c-.473 0-.852.38-.852.854s.379.854.852.854zM29.146 22.179a.848.848 0 0 0 .854-.854.85.85 0 0 0-.854-.854.85.85 0 0 0-.854.854.851.851 0 0 0 .854.854z"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
||||
export default SvgComponent;
|
||||
+37
@@ -0,0 +1,37 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
|
||||
width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve">
|
||||
<g>
|
||||
<g>
|
||||
<path fill="#FFFFFF" d="M20.591,29.731l-1.004-1.006c2.104-2.104,3.261-4.897,3.261-7.875c0-2.976-1.157-5.77-3.261-7.873
|
||||
c-2.104-2.103-4.899-3.26-7.874-3.26c-2.977,0-5.771,1.158-7.874,3.26l-1.005-1.005c2.369-2.368,5.524-3.676,8.879-3.676
|
||||
c3.353,0,6.509,1.309,8.877,3.676c2.369,2.369,3.678,5.524,3.678,8.878C24.269,24.207,22.96,27.359,20.591,29.731z"/>
|
||||
</g>
|
||||
<g>
|
||||
<polygon fill="#FFFFFF" points="2,11.376 2,13.935 4.559,13.935 4.559,11.376 "/>
|
||||
</g>
|
||||
<g>
|
||||
<polygon fill="#FFFFFF" points="18.819,28.006 18.819,30.563 21.376,30.563 21.376,28.006 "/>
|
||||
</g>
|
||||
<g>
|
||||
|
||||
<rect x="19.675" y="-0.446" transform="matrix(-0.7068 0.7074 -0.7074 -0.7068 43.0427 6.8514)" fill="#FFFFFF" width="0.853" height="25.583"/>
|
||||
</g>
|
||||
<g>
|
||||
<polygon fill="#FFFFFF" points="18.819,11.044 18.819,13.603 21.376,13.603 21.376,11.044 "/>
|
||||
</g>
|
||||
<g>
|
||||
<path fill="#FFFFFF" d="M21.615,13.84h-3.03v-3.032h3.03V13.84z M19.055,13.365h2.086v-2.083h-2.086V13.365z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path fill="#FFFFFF" d="M11.238,4.175c0.475,0,0.854-0.38,0.854-0.854s-0.378-0.854-0.854-0.854c-0.473,0-0.852,0.38-0.852,0.854
|
||||
S10.765,4.175,11.238,4.175L11.238,4.175z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path fill="#FFFFFF" d="M29.146,22.179c0.476,0,0.854-0.378,0.854-0.854c0-0.475-0.378-0.854-0.854-0.854
|
||||
c-0.474,0-0.854,0.379-0.854,0.854C28.293,21.801,28.673,22.179,29.146,22.179L29.146,22.179z"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
@@ -0,0 +1,19 @@
|
||||
/* eslint-disable react/prop-types */
|
||||
import React from 'react';
|
||||
|
||||
const SvgComponent = props => (
|
||||
<svg
|
||||
width={(props.scale || 1) * 0.75 * 32}
|
||||
height={(props.scale || 1) * 0.75 * 32}
|
||||
viewBox="0 0 32 32"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
scale={(props.scale || 1) * 0.75}
|
||||
fill={props.fill || '#FFF'}
|
||||
d="M6.465 4.002v24l20-12z"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
||||
export default SvgComponent;
|
||||
@@ -0,0 +1,7 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
|
||||
width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve">
|
||||
<polygon fill="#FFFFFF" points="6.465,4.002 6.465,28.002 26.465,16.002 "/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 504 B |
@@ -0,0 +1,56 @@
|
||||
/* eslint-disable react/prop-types */
|
||||
/* eslint-disable react/jsx-key */
|
||||
import React from 'react';
|
||||
|
||||
import Icon from 'app/components/icon/icon.jsx';
|
||||
import FolderIcon from '@material-ui/icons/FolderOutlined';
|
||||
import Menu from 'components/menus/menu.jsx';
|
||||
import Numbers from 'app/features/global/utils/Numbers';
|
||||
import '../drive.scss';
|
||||
import 'moment-timezone';
|
||||
import { getCompanyApplication as getApplication } from 'app/features/applications/state/company-applications';
|
||||
|
||||
export default class Directory extends React.Component {
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
render() {
|
||||
var app = {};
|
||||
if (this.props.data.application_id && this.props.data.external_storage) {
|
||||
app = getApplication(this.props.data.application_id);
|
||||
}
|
||||
|
||||
return [
|
||||
<div style={{ display: 'inherit', width: '100%' }}>
|
||||
<div className="icon">
|
||||
{!app.id && <FolderIcon className="m-icon-small" />}
|
||||
{!!app.id && (
|
||||
<div
|
||||
className="app_icon"
|
||||
style={{ backgroundImage: "url('" + app.identity?.icon + "')" }}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div className="text">
|
||||
{this.props.data.name}
|
||||
{!!app.id && <i> ({app.identity?.name})</i>}
|
||||
</div>
|
||||
|
||||
{(this.props.data.acces_info || {}).token && (
|
||||
<Icon type="cloud-share" className="m-icon-small" />
|
||||
)}
|
||||
|
||||
{this.props.details && (
|
||||
<div className="size no-grid">
|
||||
{this.props.data.size ? Numbers.humanFileSize(this.props.data.size, true) : '-'}
|
||||
</div>
|
||||
)}
|
||||
{this.props.menu && this.props.menu.length > 0 && (
|
||||
<Menu menu={this.props.menu} className="options">
|
||||
<Icon type="ellipsis-h" className="m-icon-small" />
|
||||
</Menu>
|
||||
)}
|
||||
</div>,
|
||||
];
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
/* eslint-disable react/prop-types */
|
||||
import React, { Component } from 'react';
|
||||
|
||||
import Archive from '../icons/archive.jsx';
|
||||
import Code from '../icons/code.jsx';
|
||||
import Document from '../icons/document.jsx';
|
||||
import Files from '../icons/file.jsx';
|
||||
import Images from '../icons/image.jsx';
|
||||
import Link from '../icons/link.jsx';
|
||||
import Pdf from '../icons/pdf.jsx';
|
||||
import Slide from '../icons/slides.jsx';
|
||||
import Sound from '../icons/sound.jsx';
|
||||
import Spreadsheet from '../icons/spreadsheet.jsx';
|
||||
import Svg from '../icons/svg.jsx';
|
||||
import Video from '../icons/video.jsx';
|
||||
|
||||
export default class FileType extends Component {
|
||||
/* props : type (string) */
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
render() {
|
||||
var type = this.props.type;
|
||||
var TypeIcon = Files;
|
||||
switch (type) {
|
||||
case 'link':
|
||||
TypeIcon = Link;
|
||||
break;
|
||||
case 'code':
|
||||
TypeIcon = Code;
|
||||
break;
|
||||
case 'document':
|
||||
TypeIcon = Document;
|
||||
break;
|
||||
case 'image':
|
||||
TypeIcon = Images;
|
||||
break;
|
||||
case 'pdf':
|
||||
TypeIcon = Pdf;
|
||||
break;
|
||||
case 'slides':
|
||||
TypeIcon = Slide;
|
||||
break;
|
||||
case 'audio':
|
||||
TypeIcon = Sound;
|
||||
break;
|
||||
case 'spreadsheet':
|
||||
TypeIcon = Spreadsheet;
|
||||
break;
|
||||
case 'svg':
|
||||
TypeIcon = Svg;
|
||||
break;
|
||||
case 'video':
|
||||
TypeIcon = Video;
|
||||
break;
|
||||
case 'archive':
|
||||
TypeIcon = Archive;
|
||||
break;
|
||||
default:
|
||||
}
|
||||
return <TypeIcon {...this.props} />;
|
||||
}
|
||||
}
|
||||
+118
@@ -0,0 +1,118 @@
|
||||
/* eslint-disable react/prop-types */
|
||||
/* eslint-disable react/jsx-key */
|
||||
import React from 'react';
|
||||
import moment from 'moment';
|
||||
import 'moment-timezone';
|
||||
|
||||
import Icon from 'app/components/icon/icon';
|
||||
import Menu from 'components/menus/menu';
|
||||
import DriveService from 'app/deprecated/Apps/Drive/Drive';
|
||||
import Numbers from 'app/features/global/utils/Numbers';
|
||||
import FileType from './file-type';
|
||||
import TagPicker from 'components/tag-picker/tag-picker';
|
||||
import { addApiUrlIfNeeded } from 'app/features/global/utils/URLUtils';
|
||||
import '../drive.scss';
|
||||
import { formatTime } from '@features/global/utils/Numbers';
|
||||
|
||||
export default class File extends React.Component {
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
render() {
|
||||
var date = false;
|
||||
if (this.props.data.modified) {
|
||||
date = new Date(this.props.data.modified * 1000);
|
||||
}
|
||||
if (this.props.data.added && this.props.isVersion) {
|
||||
date = new Date(this.props.data.added * 1000);
|
||||
}
|
||||
|
||||
var date_string = date ? formatTime(date) : '-';
|
||||
|
||||
return [
|
||||
<div
|
||||
key="preview"
|
||||
className={
|
||||
'preview file_type_icon ' +
|
||||
DriveService.getFileType(this.props.data) +
|
||||
' ' +
|
||||
(this.props.data.has_preview ? '' : 'no_preview')
|
||||
}
|
||||
style={
|
||||
this.props.data.has_preview
|
||||
? { backgroundImage: addApiUrlIfNeeded(this.props.data.preview_link, true) }
|
||||
: {}
|
||||
}
|
||||
>
|
||||
<div className="tags_list">
|
||||
<TagPicker inline readOnly noPlaceholder value={this.props.data.tags || []} />
|
||||
</div>
|
||||
</div>,
|
||||
<div key="data" className="data">
|
||||
<div className={'file_type_icon'}>
|
||||
<FileType type={DriveService.getFileType(this.props.data)} scale={0.75} fill={'#000'} />
|
||||
</div>
|
||||
<div className="text">
|
||||
{!!this.props.versionLabel && <div className="inline-tag">{this.props.versionLabel}</div>}
|
||||
{this.props.data.name}
|
||||
{!this.props.isVersion && (this.props.data.versions || {}).length > 1 && (
|
||||
<span style={{ opacity: 0.5, marginLeft: 4 }}>
|
||||
({(this.props.data.versions || {}).length} versions)
|
||||
</span>
|
||||
)}
|
||||
|
||||
<TagPicker
|
||||
className="no-grid"
|
||||
inline
|
||||
readOnly
|
||||
noPlaceholder
|
||||
value={this.props.data.tags || []}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{(this.props.data.acces_info || {}).token && (
|
||||
<Icon type="link-h" className="m-icon-small" />
|
||||
)}
|
||||
{this.props.data.url && <Icon type="external-link-alt" className="m-icon-small" />}
|
||||
|
||||
{/*
|
||||
<div className="created-by no-grid">
|
||||
{this.state.element.created_by || "-"}
|
||||
</div>
|
||||
*/}
|
||||
{this.props.details && [
|
||||
<div className="last-modified no-grid">{date_string}</div>,
|
||||
<div className="size no-grid">
|
||||
{this.props.data.size ? Numbers.humanFileSize(this.props.data.size, true) : '-'}
|
||||
</div>,
|
||||
]}
|
||||
{!this.props.isVersion && (
|
||||
<div className="detail_preview_parent no-grid">
|
||||
<div
|
||||
className={
|
||||
'detail_preview file_type_icon ' +
|
||||
DriveService.getFileType(this.props.data) +
|
||||
' ' +
|
||||
(this.props.data.has_preview ? '' : 'no_preview')
|
||||
}
|
||||
style={
|
||||
this.props.data.has_preview
|
||||
? { backgroundImage: addApiUrlIfNeeded(this.props.data.preview_link, true) }
|
||||
: {}
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{this.props.menu && this.props.menu.length > 0 && (
|
||||
<Menu menu={this.props.menu} className="options">
|
||||
<Icon type="ellipsis-h" className="m-icon-small" />
|
||||
</Menu>
|
||||
)}
|
||||
|
||||
{this.props.removeIcon === true && (
|
||||
<Icon type="times" className="m-icon-small" onClick={this.props.removeOnClick} />
|
||||
)}
|
||||
</div>,
|
||||
];
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,128 @@
|
||||
/* eslint-disable react/prop-types */
|
||||
import React from 'react';
|
||||
import Languages from 'app/features/global/services/languages-service';
|
||||
import Icon from 'app/components/icon/icon.jsx';
|
||||
import Collections from 'app/deprecated/CollectionsV1/Collections/Collections.js';
|
||||
import Workspaces from 'app/deprecated/workspaces/workspaces.jsx';
|
||||
import DriveService from 'app/deprecated/Apps/Drive/Drive.js';
|
||||
import UploadZone from 'components/uploads/upload-zone';
|
||||
import WorkspaceUserRights from 'app/features/workspaces/services/workspace-user-rights-service';
|
||||
import MediumPopupManager from 'app/components/modal/modal-manager';
|
||||
import { ObjectModal, ObjectModalTitle } from 'components/object-modal/deprecated-object-modal.jsx';
|
||||
import UIFile from './ui/file.jsx';
|
||||
import 'moment-timezone';
|
||||
|
||||
import './drive.scss';
|
||||
|
||||
export default class VersionDetails extends React.Component {
|
||||
constructor() {
|
||||
super();
|
||||
this.state = {
|
||||
workspaces: Workspaces,
|
||||
i18n: Languages,
|
||||
};
|
||||
Languages.addListener(this);
|
||||
DriveService.addListener(this);
|
||||
Collections.get('drive').addListener(this);
|
||||
}
|
||||
componentWillUnmount() {
|
||||
Languages.removeListener(this);
|
||||
DriveService.removeListener(this);
|
||||
Collections.get('drive').removeListener(this);
|
||||
}
|
||||
render() {
|
||||
var countVersion = (this.props.file.versions || []).length;
|
||||
return (
|
||||
<ObjectModal
|
||||
onClose={() => MediumPopupManager.closeAll()}
|
||||
footer={
|
||||
<div className="footerVersionDetails">
|
||||
<div className="addVersion">
|
||||
<div
|
||||
className="addVersionButton"
|
||||
onClick={() => {
|
||||
if (this.upload_zone) {
|
||||
this.upload_zone.open();
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div className="icon">
|
||||
<Icon type="plus" className="m-icon-small iconWithBackground" />
|
||||
</div>
|
||||
<div className="footerTitle">
|
||||
{Languages.t('components.drive.new_versions', [], 'Ajouter une nouvelle version')}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
title={
|
||||
<div className="title allow_selection">
|
||||
<ObjectModalTitle>
|
||||
{Languages.t('scenes.apps.drive.right_preview.versions', [], 'Versions')}
|
||||
</ObjectModalTitle>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<div className="versionDetails drive_view list">
|
||||
<UploadZone
|
||||
disabled={WorkspaceUserRights.isNotConnected()}
|
||||
disableClick
|
||||
ref={node => (this.upload_zone = node)}
|
||||
parent={this.props.file.parent_id}
|
||||
driveCollectionKey={{ id: this.props.file.parent_id }}
|
||||
uploadOptions={{
|
||||
workspace_id: this.state.workspaces.currentWorkspaceId,
|
||||
new_version: true,
|
||||
file_id: this.props.file.id,
|
||||
}}
|
||||
allowPaste={true}
|
||||
>
|
||||
{(this.props.file.versions || [])
|
||||
.sort((a, b) => {
|
||||
return b.added - a.added;
|
||||
})
|
||||
.map((version, index) => {
|
||||
var data = {};
|
||||
if (index > 0) {
|
||||
data.extension = this.props.file.extension;
|
||||
data.name = version.name;
|
||||
data.creator = version.creator;
|
||||
data.size = version.size;
|
||||
} else {
|
||||
data = JSON.parse(JSON.stringify(this.props.file));
|
||||
}
|
||||
data.added = version.added;
|
||||
return (
|
||||
<div className="file" key={'version-' + version.id}>
|
||||
<UIFile
|
||||
isVersion
|
||||
versionLabel={
|
||||
index == 0 ? 'Version actuelle' : 'Version ' + (countVersion - index)
|
||||
}
|
||||
data={data}
|
||||
menu={[
|
||||
{
|
||||
type: 'menu',
|
||||
text: Languages.t(
|
||||
'scenes.apps.drive.preview_bloc.operations_download',
|
||||
[],
|
||||
'Télécharger',
|
||||
),
|
||||
onClick: () => {
|
||||
var link = DriveService.getLink(this.props.file, version.id, 1);
|
||||
window.open(link);
|
||||
},
|
||||
},
|
||||
]}
|
||||
details={true}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</UploadZone>
|
||||
</div>
|
||||
</ObjectModal>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user