Web:Client: update work with file\folder\room icons
This commit is contained in:
Timofey Boyko
parent
4c4c79a015
commit
d44175887a
@ -5,28 +5,35 @@ import { withTranslation } from "react-i18next";
|
||||
import api from "@docspace/common/api";
|
||||
import RoomsFilter from "@docspace/common/api/rooms/filter";
|
||||
import { RoomsType } from "@docspace/common/constants";
|
||||
import { iconSize32 } from "@docspace/common/utils/image-helpers";
|
||||
|
||||
import Loaders from "@docspace/common/components/Loaders";
|
||||
|
||||
import Selector from "@docspace/components/selector";
|
||||
import { Backdrop } from "@docspace/components";
|
||||
|
||||
const pageCount = 100;
|
||||
|
||||
const getRoomLogo = (roomType) => {
|
||||
const path = `images/icons/32`;
|
||||
let path = "";
|
||||
switch (roomType) {
|
||||
case RoomsType.CustomRoom:
|
||||
return `${path}/room/custom.svg`;
|
||||
path = "custom.svg";
|
||||
break;
|
||||
case RoomsType.FillingFormsRoom:
|
||||
return `${path}/room/filling.form.svg`;
|
||||
path = "filling.form.svg";
|
||||
break;
|
||||
case RoomsType.EditingRoom:
|
||||
return `${path}/room/editing.svg`;
|
||||
path = "editing.svg";
|
||||
break;
|
||||
case RoomsType.ReadOnlyRoom:
|
||||
return `${path}/room/view.only.svg`;
|
||||
path = "view.only.svg";
|
||||
break;
|
||||
case RoomsType.ReviewRoom:
|
||||
return `${path}/room/review.svg`;
|
||||
path = "review.svg";
|
||||
break;
|
||||
}
|
||||
|
||||
return iconSize32.get(path);
|
||||
};
|
||||
|
||||
const convertToItems = (folders) => {
|
||||
|
||||
@ -7,6 +7,12 @@ import { RoomsType } from "@docspace/common/constants";
|
||||
import axios from "axios";
|
||||
import { makeAutoObservable } from "mobx";
|
||||
import { presentInArray } from "../helpers/files-helpers";
|
||||
import {
|
||||
iconSize24,
|
||||
iconSize32,
|
||||
iconSize64,
|
||||
iconSize96,
|
||||
} from "@docspace/common/utils/image-helpers";
|
||||
|
||||
class SettingsStore {
|
||||
thirdPartyStore;
|
||||
@ -246,147 +252,184 @@ class SettingsStore {
|
||||
}
|
||||
};
|
||||
|
||||
getRoomsIcon = (roomType, isArchive, size = 32) => {
|
||||
const reviewPath = `images/icons/${size}`;
|
||||
|
||||
if (isArchive) return `${reviewPath}/room/archive.svg`;
|
||||
|
||||
switch (roomType) {
|
||||
case RoomsType.CustomRoom:
|
||||
return `${reviewPath}/room/custom.svg`;
|
||||
case RoomsType.FillingFormsRoom:
|
||||
return `${reviewPath}/room/filling.form.svg`;
|
||||
case RoomsType.EditingRoom:
|
||||
return `${reviewPath}/room/editing.svg`;
|
||||
case RoomsType.ReadOnlyRoom:
|
||||
return `${reviewPath}/room/view.only.svg`;
|
||||
case RoomsType.ReviewRoom:
|
||||
return `${reviewPath}/room/review.svg`;
|
||||
getIconBySize = (size, path) => {
|
||||
switch (+size) {
|
||||
case 24:
|
||||
return iconSize24.get(path);
|
||||
case 32:
|
||||
return iconSize32.get(path);
|
||||
case 64:
|
||||
return iconSize64.get(path);
|
||||
case 96:
|
||||
return iconSize96.get(path);
|
||||
}
|
||||
};
|
||||
|
||||
getRoomsIcon = (roomType, isArchive, size = 32) => {
|
||||
let path = "";
|
||||
|
||||
if (isArchive) {
|
||||
path = "archive.svg";
|
||||
} else {
|
||||
switch (roomType) {
|
||||
case RoomsType.CustomRoom:
|
||||
path = "custom.svg";
|
||||
break;
|
||||
case RoomsType.FillingFormsRoom:
|
||||
path = "filling.form.svg";
|
||||
break;
|
||||
case RoomsType.EditingRoom:
|
||||
path = "editing.svg";
|
||||
break;
|
||||
case RoomsType.ReadOnlyRoom:
|
||||
path = "view.only.svg";
|
||||
break;
|
||||
case RoomsType.ReviewRoom:
|
||||
path = "review.svg";
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
return this.getIconBySize(size, path);
|
||||
};
|
||||
|
||||
getFolderIcon = (providerKey, size = 32) => {
|
||||
const folderPath = `images/icons/${size}`;
|
||||
let path = "";
|
||||
|
||||
switch (providerKey) {
|
||||
case "Box":
|
||||
case "BoxNet":
|
||||
return `${folderPath}/folder/box.svg`;
|
||||
path = "box.svg";
|
||||
break;
|
||||
case "DropBox":
|
||||
case "DropboxV2":
|
||||
return `${folderPath}/folder/dropbox.svg`;
|
||||
path = "dropbox.svg";
|
||||
break;
|
||||
case "Google":
|
||||
case "GoogleDrive":
|
||||
return `${folderPath}/folder/google.svg`;
|
||||
path = "google.svg";
|
||||
break;
|
||||
case "OneDrive":
|
||||
return `${folderPath}/folder/onedrive.svg`;
|
||||
path = "onedrive.svg";
|
||||
break;
|
||||
case "SharePoint":
|
||||
return `${folderPath}/folder/sharepoint.svg`;
|
||||
path = "sharepoint.svg";
|
||||
break;
|
||||
case "Yandex":
|
||||
return `${folderPath}/folder/yandex.svg`;
|
||||
path = "yandex.svg";
|
||||
break;
|
||||
case "kDrive":
|
||||
return `${folderPath}/folder/kdrive.svg`;
|
||||
path = "kdrive.svg";
|
||||
break;
|
||||
case "WebDav":
|
||||
return `${folderPath}/folder/webdav.svg`;
|
||||
path = "webdav.svg";
|
||||
break;
|
||||
default:
|
||||
return `${folderPath}/folder.svg`;
|
||||
path = "folder.svg";
|
||||
break;
|
||||
}
|
||||
|
||||
return this.getIconBySize(size, path);
|
||||
};
|
||||
|
||||
getIconUrl = (extension, folderPath) => {
|
||||
getIconUrl = (extension, size) => {
|
||||
let path = "";
|
||||
|
||||
switch (extension) {
|
||||
case ".avi":
|
||||
return `${folderPath}/avi.svg`;
|
||||
path = "avi.svg";
|
||||
case ".csv":
|
||||
return `${folderPath}/csv.svg`;
|
||||
path = "csv.svg";
|
||||
case ".djvu":
|
||||
return `${folderPath}/djvu.svg`;
|
||||
path = "djvu.svg";
|
||||
case ".doc":
|
||||
return `${folderPath}/doc.svg`;
|
||||
path = "doc.svg";
|
||||
case ".docm":
|
||||
return `${folderPath}/docm.svg`;
|
||||
path = "docm.svg";
|
||||
case ".docx":
|
||||
return `${folderPath}/docx.svg`;
|
||||
path = "docx.svg";
|
||||
case ".dotx":
|
||||
return `${folderPath}/dotx.svg`;
|
||||
path = "dotx.svg";
|
||||
case ".dvd":
|
||||
return `${folderPath}/dvd.svg`;
|
||||
path = "dvd.svg";
|
||||
case ".epub":
|
||||
return `${folderPath}/epub.svg`;
|
||||
path = "epub.svg";
|
||||
case ".pb2":
|
||||
case ".fb2":
|
||||
return `${folderPath}/fb2.svg`;
|
||||
path = "fb2.svg";
|
||||
case ".flv":
|
||||
return `${folderPath}/flv.svg`;
|
||||
path = "flv.svg";
|
||||
case ".fodt":
|
||||
return `${folderPath}/fodt.svg`;
|
||||
path = "fodt.svg";
|
||||
case ".iaf":
|
||||
return `${folderPath}/iaf.svg`;
|
||||
path = "iaf.svg";
|
||||
case ".ics":
|
||||
return `${folderPath}/ics.svg`;
|
||||
path = "ics.svg";
|
||||
case ".m2ts":
|
||||
return `${folderPath}/m2ts.svg`;
|
||||
path = "m2ts.svg";
|
||||
case ".mht":
|
||||
return `${folderPath}/mht.svg`;
|
||||
path = "mht.svg";
|
||||
case ".mkv":
|
||||
return `${folderPath}/mkv.svg`;
|
||||
path = "mkv.svg";
|
||||
case ".mov":
|
||||
return `${folderPath}/mov.svg`;
|
||||
path = "mov.svg";
|
||||
case ".mp4":
|
||||
return `${folderPath}/mp4.svg`;
|
||||
path = "mp4.svg";
|
||||
case ".mpg":
|
||||
return `${folderPath}/mpg.svg`;
|
||||
path = "mpg.svg";
|
||||
case ".odp":
|
||||
return `${folderPath}/odp.svg`;
|
||||
path = "odp.svg";
|
||||
case ".ods":
|
||||
return `${folderPath}/ods.svg`;
|
||||
path = "ods.svg";
|
||||
case ".odt":
|
||||
return `${folderPath}/odt.svg`;
|
||||
path = "odt.svg";
|
||||
case ".otp":
|
||||
return `${folderPath}/otp.svg`;
|
||||
path = "otp.svg";
|
||||
case ".ots":
|
||||
return `${folderPath}/ots.svg`;
|
||||
path = "ots.svg";
|
||||
case ".ott":
|
||||
return `${folderPath}/ott.svg`;
|
||||
path = "ott.svg";
|
||||
case ".pdf":
|
||||
return `${folderPath}/pdf.svg`;
|
||||
path = "pdf.svg";
|
||||
case ".pot":
|
||||
return `${folderPath}/pot.svg`;
|
||||
path = "pot.svg";
|
||||
case ".pps":
|
||||
return `${folderPath}/pps.svg`;
|
||||
path = "pps.svg";
|
||||
case ".ppsx":
|
||||
return `${folderPath}/ppsx.svg`;
|
||||
path = "ppsx.svg";
|
||||
case ".ppt":
|
||||
return `${folderPath}/ppt.svg`;
|
||||
path = "ppt.svg";
|
||||
case ".pptm":
|
||||
return `${folderPath}/pptm.svg`;
|
||||
path = "pptm.svg";
|
||||
case ".pptx":
|
||||
return `${folderPath}/pptx.svg`;
|
||||
path = "pptx.svg";
|
||||
case ".rtf":
|
||||
return `${folderPath}/rtf.svg`;
|
||||
path = "rtf.svg";
|
||||
case ".svg":
|
||||
return `${folderPath}/svg.svg`;
|
||||
path = "svg.svg";
|
||||
case ".txt":
|
||||
return `${folderPath}/txt.svg`;
|
||||
path = "txt.svg";
|
||||
case ".webm":
|
||||
return `${folderPath}/webm.svg`;
|
||||
path = "webm.svg";
|
||||
case ".xls":
|
||||
return `${folderPath}/xls.svg`;
|
||||
path = "xls.svg";
|
||||
case ".xlsm":
|
||||
return `${folderPath}/xlsm.svg`;
|
||||
path = "xlsm.svg";
|
||||
case ".xlsx":
|
||||
return `${folderPath}/xlsx.svg`;
|
||||
path = "xlsx.svg";
|
||||
case ".xps":
|
||||
return `${folderPath}/xps.svg`;
|
||||
path = "xps.svg";
|
||||
case ".xml":
|
||||
return `${folderPath}/xml.svg`;
|
||||
path = "xml.svg";
|
||||
case ".oform":
|
||||
return `${folderPath}/oform.svg`;
|
||||
path = "oform.svg";
|
||||
case ".docxf":
|
||||
return `${folderPath}/docxf.svg`;
|
||||
path = "docxf.svg";
|
||||
default:
|
||||
return `${folderPath}/file.svg`;
|
||||
path = "file.svg";
|
||||
}
|
||||
|
||||
return this.getIconBySize(size, path);
|
||||
};
|
||||
|
||||
getFileIcon = (
|
||||
@ -397,36 +440,37 @@ class SettingsStore {
|
||||
sound = false,
|
||||
html = false
|
||||
) => {
|
||||
const folderPath = `/static/images/icons/${size}`;
|
||||
let path = "";
|
||||
|
||||
if (archive) return `${folderPath}/file_archive.svg`;
|
||||
if (archive) path = "file_archive.svg";
|
||||
|
||||
if (image) return `${folderPath}/image.svg`;
|
||||
if (image) path = "image.svg";
|
||||
|
||||
if (sound) return `${folderPath}/sound.svg`;
|
||||
if (sound) path = "sound.svg";
|
||||
|
||||
if (html) return `${folderPath}/html.svg`;
|
||||
if (html) path = "html.svg";
|
||||
|
||||
return this.getIconUrl(extension, folderPath);
|
||||
if (path) return this.getIconBySize(size, path);
|
||||
|
||||
return this.getIconUrl(extension, size);
|
||||
};
|
||||
|
||||
getIconSrc = (ext, size = 24) => {
|
||||
const folderPath = `/static/images/icons/${size}`;
|
||||
let path = "";
|
||||
|
||||
if (presentInArray(this.extsArchive, ext, true))
|
||||
return `${folderPath}/file_archive.svg`;
|
||||
if (presentInArray(this.extsArchive, ext, true)) path = "file_archive.svg";
|
||||
|
||||
if (presentInArray(this.extsImage, ext, true))
|
||||
return `${folderPath}/image.svg`;
|
||||
if (presentInArray(this.extsImage, ext, true)) path = "image.svg";
|
||||
|
||||
if (presentInArray(this.extsAudio, ext, true))
|
||||
return `${folderPath}/sound.svg`;
|
||||
if (presentInArray(this.extsAudio, ext, true)) path = "sound.svg";
|
||||
|
||||
if (presentInArray(this.html, ext, true)) return `${folderPath}/html.svg`;
|
||||
if (presentInArray(this.html, ext, true)) path = "html.svg";
|
||||
|
||||
if (path) return this.getIconBySize(size, path);
|
||||
|
||||
const extension = ext.toLowerCase();
|
||||
|
||||
return this.getIconUrl(extension, folderPath);
|
||||
return this.getIconUrl(extension, size);
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user