Use item type CSS icons in more places

.icon-item-type is now global, with extra styling to handle row selection when
it's inside the item tree.

getImageSrc() is still used for progress windows, which is probably OK for now
because those don't stay on screen for very long. I've updated it to return SVGs
based on the current UI color scheme.

Other code uses treeitem-* images directly; getting rid of those references will
cause a lot of conflicts and be a bit more involved than this initial pass, so
I'll put that in a separate PR.
This commit is contained in:
Abe Jellinek 2023-11-01 08:00:21 -04:00 committed by Dan Stillman
parent 200e1d7564
commit a2f259d14c
20 changed files with 243 additions and 111 deletions

View file

@ -20,7 +20,36 @@ Icon.propTypes = {
style: object
}
module.exports = { Icon }
const CSSIcon = (props) => {
props = Object.assign({}, props);
props.className = `icon icon-css icon-${props.name} ${props.className || ""}`;
delete props.name;
// Pass the props forward
return <span {...props}></span>;
};
CSSIcon.propTypes = {
children: element,
className: string,
name: string.isRequired,
style: object
};
const CSSItemTypeIcon = (props) => {
props = Object.assign({}, props);
let itemType = props.itemType;
delete props.itemType;
return <CSSIcon name="item-type" data-item-type={itemType} {...props} />;
};
CSSItemTypeIcon.propTypes = {
children: element,
className: string,
itemType: string.isRequired,
style: object
};
module.exports = { Icon, CSSIcon, CSSItemTypeIcon };
function i(name, svgOrSrc, hasHiDPI = true) {
@ -232,3 +261,9 @@ module.exports.getCSSIcon = function (key) {
return cssIconsCache.get(key).cloneNode(true);
};
module.exports.getCSSItemTypeIcon = function (itemType) {
let icon = module.exports.getCSSIcon('icon-item-type');
icon.dataset.itemType = itemType;
return icon;
};

View file

@ -25,6 +25,7 @@
import React, { forwardRef, useImperativeHandle, useState, memo } from 'react';
import cx from 'classnames';
import { CSSItemTypeIcon } from 'components/icons';
const MAX_UNEXPANDED_ALL_NOTES = 7;
@ -40,7 +41,7 @@ const NoteRow = memo(({ id, title, body, date, onClick, onKeyDown, onContextMenu
<div className="inner">
{ parentItemType
? <div className="parent-line">
<img className="parent-item-type" src={Zotero.ItemTypes.getImageSrc(parentItemType)} />
<CSSItemTypeIcon className="parent-item-type" itemType={parentItemType} />
<span className="parent-title">{parentTitle}</span>
</div>
: null

View file

@ -28,6 +28,7 @@
var React = require('react');
var ReactDOM = require('react-dom');
var NotesList = require('components/itemPane/notesList').default;
var { getCSSItemTypeIcon } = require('components/icons');
var ZoteroContextPane = new function () {
var _tabCover;
@ -850,13 +851,12 @@ var ZoteroContextPane = new function () {
var parentItem = item.parentItem;
if (parentItem) {
var container = document.createElement('div');
var img = document.createElement('img');
img.src = Zotero.ItemTypes.getImageSrc(parentItem.itemType);
img.className = 'parent-item-type';
var icon = getCSSItemTypeIcon(parentItem.getItemTypeIconName());
icon.classList.add('parent-item-type');
var title = document.createElement('div');
title.append(parentItem.getDisplayTitle());
title.className = 'parent-title';
container.append(img, title);
container.append(icon, title);
parentTitleContainer.append(container);
}
_updateAddToNote();

View file

@ -25,6 +25,8 @@
"use strict";
import { getCSSItemTypeIcon } from 'components/icons';
{
class NotesBox extends XULElement {
constructor() {
@ -123,8 +125,7 @@
let notes = Zotero.Items.get(this._item.getNotes());
for (let item of notes) {
let id = item.id;
let icon = document.createElement("img");
icon.src = item.getImageSrc();
let icon = getCSSItemTypeIcon(item.getItemTypeIconName());
let label = document.createElement("label");
label.append(item.getDisplayTitle());

View file

@ -23,6 +23,8 @@
***** END LICENSE BLOCK *****
*/
import { getCSSItemTypeIcon } from 'components/icons';
Components.utils.import("resource://gre/modules/Services.jsm");
var Zotero_Citation_Dialog = new function () {
@ -835,8 +837,7 @@ var Zotero_Citation_Dialog = new function () {
}
itemNode.setAttribute("value", itemDataID);
let image = document.createXULElement('image');
image.src = item.getImageSrc();
let image = getCSSItemTypeIcon(item.getItemTypeIconName());
itemNode.append(image);
itemNode.setAttribute("class", "listitem-iconic");
itemNode.append(item.getDisplayTitle());

View file

@ -23,6 +23,8 @@
***** END LICENSE BLOCK *****
*/
import { getCSSItemTypeIcon } from 'components/icons';
var Zotero_Bibliography_Dialog = new function () {
var bibEditInterface;
var _lastSelectedItemID = false;
@ -325,8 +327,7 @@ var Zotero_Bibliography_Dialog = new function () {
for(var i=0; i<items.length; i++) {
var itemNode = document.createXULElement("richlistitem");
itemNode.setAttribute("value", i);
let image = document.createXULElement('image');
image.src = items[i].getImageSrc();
let image = getCSSItemTypeIcon(items[i].getItemTypeIconName());
itemNode.append(image);
itemNode.append(items[i].getDisplayTitle());
itemNode.setAttribute("class", "listitem-iconic");

View file

@ -31,7 +31,7 @@ const LibraryTree = require('./libraryTree');
const VirtualizedTable = require('components/virtualized-table');
const { renderCell, formatColumnName } = VirtualizedTable;
const Icons = require('components/icons');
const { getDOMElement, getCSSIcon } = Icons;
const { getDOMElement, getCSSIcon, getCSSItemTypeIcon } = Icons;
const { COLUMNS } = require("zotero/itemTreeColumns");
const { Cc, Ci, Cu } = require('chrome');
Cu.import("resource://gre/modules/osfile.jsm");
@ -2767,22 +2767,20 @@ var ItemTree = class ItemTree extends LibraryTree {
let ariaLabel;
// If the item has a child attachment
if (type !== null && type != 'none') {
icon = getCSSIcon('icon-item-type');
if (type == 'pdf') {
icon.dataset.itemType = 'attachmentPDF';
icon = getCSSItemTypeIcon('attachmentPDF');
ariaLabel = Zotero.getString('pane.item.attachments.hasPDF');
}
else if (type == 'snapshot') {
icon.dataset.itemType = 'attachmentSnapshot';
icon = getCSSItemTypeIcon('attachmentSnapshot');
ariaLabel = Zotero.getString('pane.item.attachments.hasSnapshot');
}
else if (type == 'epub') {
icon.dataset.itemType = 'attachmentEPUB';
icon = getCSSItemTypeIcon('attachmentEPUB');
ariaLabel = Zotero.getString('pane.item.attachments.hasEPUB');
}
else {
icon.dataset.itemType = 'attachmentFile';
icon = getCSSItemTypeIcon('attachmentFile');
ariaLabel = Zotero.getString('pane.item.attachments.has');
}
@ -3782,39 +3780,8 @@ var ItemTree = class ItemTree extends LibraryTree {
_getIcon(index) {
var item = this.getRow(index).ref;
var itemType = Zotero.ItemTypes.getName(item.itemTypeID);
if (itemType == 'attachment') {
var linkMode = item.attachmentLinkMode;
if (item.isPDFAttachment()) {
if (linkMode == Zotero.Attachments.LINK_MODE_LINKED_FILE) {
itemType += 'PDFLink';
}
else {
itemType += 'PDF';
}
}
else if (item.isEPUBAttachment()) {
itemType += 'EPUB';
}
else if (linkMode == Zotero.Attachments.LINK_MODE_IMPORTED_FILE) {
itemType += "File";
}
else if (linkMode == Zotero.Attachments.LINK_MODE_LINKED_FILE) {
itemType += "Link";
}
else if (linkMode == Zotero.Attachments.LINK_MODE_IMPORTED_URL) {
itemType += "Snapshot";
}
else if (linkMode == Zotero.Attachments.LINK_MODE_LINKED_URL) {
itemType += "WebLink";
}
}
let icon = getCSSIcon('icon-item-type');
icon.dataset.itemType = itemType;
return icon;
var itemType = item.getItemTypeIconName();
return getCSSItemTypeIcon(itemType);
}
_canGetBestAttachmentState(item) {

View file

@ -439,6 +439,8 @@ Zotero.ItemTypes = new function() {
}
this.getImageSrc = function (itemType) {
Zotero.debug('WARNING: getImageSrc() is deprecated -- use CSS icons');
var suffix = Zotero.hiDPISuffix;
if (this.isCustom(itemType)) {
@ -449,18 +451,20 @@ Zotero.ItemTypes = new function() {
return _customImages[id];
}
let isDark = Zotero.getMainWindow()?.matchMedia('(prefers-color-scheme: dark)').matches;
switch (itemType) {
// Use treeitem.png
case 'attachment-file':
case 'attachmentFile':
case 'document':
break;
// HiDPI images available
case 'attachment-link':
case 'attachment-pdf':
case 'attachment-pdf-link':
case 'attachment-snapshot':
case 'attachment-web-link':
case 'attachmentLink':
case 'attachmentPDF':
case 'attachmentPDFLink':
case 'attachmentSnapshot':
case 'attachmentWebLink':
case 'artwork':
case 'audioRecording':
case 'bill':
@ -483,28 +487,26 @@ Zotero.ItemTypes = new function() {
case 'letter':
case 'magazineArticle':
case 'manuscript':
case 'map':
case 'newspaperArticle':
case 'note':
case 'patent':
case 'podcast':
case 'preprint':
case 'presentation':
case 'radioBroadcast':
case 'report':
case 'standard':
case 'statute':
case 'thesis':
case 'webpage':
return "chrome://zotero/skin/treeitem-" + itemType + suffix + ".png";
// No HiDPI images available
case 'map':
case 'podcast':
case 'radioBroadcast':
case 'tvBroadcast':
case 'videoRecording':
return "chrome://zotero/skin/treeitem-" + itemType + ".png";
case 'webpage':
itemType = itemType.replace(/([A-Z])/g, '-$1').toLowerCase();
return "chrome://zotero/skin/item-type/16/" + (isDark ? 'dark' : 'light') + "/" + itemType + suffix + ".svg";
}
return "chrome://zotero/skin/treeitem" + suffix + ".png";
return "chrome://zotero/skin/item-type/16/" + (isDark ? 'dark' : 'light') + "/document" + suffix + ".svg";
}
}

View file

@ -4352,34 +4352,47 @@ Zotero.DataObject.prototype.setPublications = Zotero.Promise.coroutine(function*
Zotero.Item.prototype.getImageSrc = function() {
let itemType = this.getItemTypeIconName();
return Zotero.ItemTypes.getImageSrc(itemType);
}
Zotero.Item.prototype.getItemTypeIconName = function () {
var itemType = Zotero.ItemTypes.getName(this.itemTypeID);
if (itemType == 'attachment') {
var linkMode = this.attachmentLinkMode;
if (this.attachmentContentType == 'application/pdf' && this.isFileAttachment()) {
if (this.isPDFAttachment()) {
if (linkMode == Zotero.Attachments.LINK_MODE_LINKED_FILE) {
itemType += '-pdf-link';
itemType += 'PDFLink';
}
else {
itemType += '-pdf';
itemType += 'PDF';
}
}
else if (this.isEPUBAttachment()) {
if (linkMode == Zotero.Attachments.LINK_MODE_LINKED_FILE) {
itemType += 'EPUBLink';
}
else {
itemType += 'EPUB';
}
}
else if (linkMode == Zotero.Attachments.LINK_MODE_IMPORTED_FILE) {
itemType += "-file";
itemType += "File";
}
else if (linkMode == Zotero.Attachments.LINK_MODE_LINKED_FILE) {
itemType += "-link";
itemType += "Link";
}
else if (linkMode == Zotero.Attachments.LINK_MODE_IMPORTED_URL) {
itemType += "-snapshot";
itemType += "Snapshot";
}
else if (linkMode == Zotero.Attachments.LINK_MODE_LINKED_URL) {
itemType += "-web-link";
itemType += "WebLink";
}
}
return Zotero.ItemTypes.getImageSrc(itemType);
}
return itemType;
};
Zotero.Item.prototype.getTagColors = function () {

View file

@ -1970,10 +1970,10 @@ Zotero.Utilities.Internal = {
*/
determineAttachmentIcon: function(attachment) {
if(attachment.linkMode === "linked_url") {
return Zotero.ItemTypes.getImageSrc("attachment-web-link");
return Zotero.ItemTypes.getImageSrc("attachmentWebLink");
}
return Zotero.ItemTypes.getImageSrc(attachment.mimeType === "application/pdf"
? "attachment-pdf" : "attachment-snapshot");
? "attachmentPDF" : "attachmentSnapshot");
},
/**

View file

@ -0,0 +1,7 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.34" d="M8 4H1V6H8V4Z" fill="#39BF68"/>
<path opacity="0.85" d="M8 4V6H1V4H8ZM9 3H0V7H9V3Z" fill="#39BF68"/>
<path opacity="0.24" fill-rule="evenodd" clip-rule="evenodd" d="M13 10.0354V2L14 3V10.0354C13.8367 10.0121 13.6698 10 13.5 10C13.3302 10 13.1633 10.0121 13 10.0354ZM6.03544 13H4L5 14H6.03544C6.01209 13.8367 6 13.6698 6 13.5C6 13.3302 6.01209 13.1633 6.03544 13Z" fill="white"/>
<path opacity="0.6" fill-rule="evenodd" clip-rule="evenodd" d="M14 2H13V1C13 0.734784 12.8946 0.48043 12.7071 0.292893C12.5196 0.105357 12.2652 0 12 0H3C2.73478 0 2.48043 0.105357 2.29289 0.292893C2.10536 0.48043 2 0.734784 2 1V3H3V1H4V3H5V1H12V10.3368C12.3109 10.1891 12.6469 10.0859 13 10.0354V2L14 3V10.0354C14.3531 10.0859 14.6891 10.1891 15 10.3368V3C15 2.73478 14.8946 2.48043 14.7071 2.29289C14.5196 2.10536 14.2652 2 14 2ZM6.33682 15C6.18915 14.6891 6.08595 14.3531 6.03544 14H5L4 13H6.03544C6.08595 12.6469 6.18915 12.3109 6.33682 12H5V7H4V12H3V7H2V12C2.00006 12.2652 2.10545 12.5195 2.293 12.707L4.293 14.707C4.48049 14.8945 4.73481 14.9999 5 15H6.33682Z" fill="white"/>
<path opacity="0.6" fill-rule="evenodd" clip-rule="evenodd" d="M9.5 11C10.3178 11 11.0439 11.3927 11.5 11.9998C11.9561 11.3927 12.6822 11 13.5 11C14.8807 11 16 12.1193 16 13.5C16 14.8807 14.8807 16 13.5 16C12.6822 16 11.9561 15.6073 11.5 15.0002C11.0439 15.6073 10.3178 16 9.5 16C8.11929 16 7 14.8807 7 13.5C7 12.1193 8.11929 11 9.5 11ZM10.9146 13H9.5C9.22386 13 9 13.2239 9 13.5C9 13.7761 9.22386 14 9.5 14H10.9146C10.7087 14.5826 10.1531 15 9.5 15C8.67157 15 8 14.3284 8 13.5C8 12.6716 8.67157 12 9.5 12C10.1531 12 10.7087 12.4174 10.9146 13ZM12.0854 14H13.5C13.7761 14 14 13.7761 14 13.5C14 13.2239 13.7761 13 13.5 13H12.0854C12.2913 12.4174 12.8469 12 13.5 12C14.3284 12 15 12.6716 15 13.5C15 14.3284 14.3284 15 13.5 15C12.8469 15 12.2913 14.5826 12.0854 14Z" fill="white"/>
</svg>

After

Width:  |  Height:  |  Size: 1.9 KiB

View file

@ -0,0 +1,7 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.34" d="M8 4H1V6H8V4Z" fill="#39BF68"/>
<path opacity="0.85" d="M8 4V6H1V4H8ZM9 3H0V7H9V3Z" fill="#39BF68"/>
<path opacity="0.24" fill-rule="evenodd" clip-rule="evenodd" d="M13 10.0354V2L14 3V10.0354C13.8367 10.0121 13.6698 10 13.5 10C13.3302 10 13.1633 10.0121 13 10.0354ZM6.03544 13H4L5 14H6.03544C6.01209 13.8367 6 13.6698 6 13.5C6 13.3302 6.01209 13.1633 6.03544 13Z" fill="white"/>
<path opacity="0.6" fill-rule="evenodd" clip-rule="evenodd" d="M14 2H13V1C13 0.734784 12.8946 0.48043 12.7071 0.292893C12.5196 0.105357 12.2652 0 12 0H3C2.73478 0 2.48043 0.105357 2.29289 0.292893C2.10536 0.48043 2 0.734784 2 1V3H3V1H4V3H5V1H12V10.3368C12.3109 10.1891 12.6469 10.0859 13 10.0354V2L14 3V10.0354C14.3531 10.0859 14.6891 10.1891 15 10.3368V3C15 2.73478 14.8946 2.48043 14.7071 2.29289C14.5196 2.10536 14.2652 2 14 2ZM6.33682 15C6.18915 14.6891 6.08595 14.3531 6.03544 14H5L4 13H6.03544C6.08595 12.6469 6.18915 12.3109 6.33682 12H5V7H4V12H3V7H2V12C2.00006 12.2652 2.10545 12.5195 2.293 12.707L4.293 14.707C4.48049 14.8945 4.73481 14.9999 5 15H6.33682Z" fill="white"/>
<path opacity="0.6" fill-rule="evenodd" clip-rule="evenodd" d="M9.5 11C10.3178 11 11.0439 11.3927 11.5 11.9998C11.9561 11.3927 12.6822 11 13.5 11C14.8807 11 16 12.1193 16 13.5C16 14.8807 14.8807 16 13.5 16C12.6822 16 11.9561 15.6073 11.5 15.0002C11.0439 15.6073 10.3178 16 9.5 16C8.11929 16 7 14.8807 7 13.5C7 12.1193 8.11929 11 9.5 11ZM10.9146 13H9.5C9.22386 13 9 13.2239 9 13.5C9 13.7761 9.22386 14 9.5 14H10.9146C10.7087 14.5826 10.1531 15 9.5 15C8.67157 15 8 14.3284 8 13.5C8 12.6716 8.67157 12 9.5 12C10.1531 12 10.7087 12.4174 10.9146 13ZM12.0854 14H13.5C13.7761 14 14 13.7761 14 13.5C14 13.2239 13.7761 13 13.5 13H12.0854C12.2913 12.4174 12.8469 12 13.5 12C14.3284 12 15 12.6716 15 13.5C15 14.3284 14.3284 15 13.5 15C12.8469 15 12.2913 14.5826 12.0854 14Z" fill="white"/>
</svg>

After

Width:  |  Height:  |  Size: 1.9 KiB

View file

@ -0,0 +1,10 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M13 2H14C14.2652 2 14.5196 2.10536 14.7071 2.29289C14.8946 2.48043 15 2.73478 15 3V10.3368C14.5454 10.1208 14.0368 10 13.5 10C12.9632 10 12.4546 10.1208 12 10.3368V12H6.33682C6.12085 12.4546 6 12.9632 6 13.5C6 14.0368 6.12085 14.5454 6.33682 15H5C4.73481 14.9999 4.48049 14.8945 4.293 14.707L2.293 12.707C2.10545 12.5195 2.00006 12.2652 2 12V1C2 0.734784 2.10536 0.48043 2.29289 0.292893C2.48043 0.105357 2.73478 0 3 0H12C12.2652 0 12.5196 0.105357 12.7071 0.292893C12.8946 0.48043 13 0.734784 13 1V2Z" fill="white"/>
<path d="M12 1H5V12H12V1Z" fill="white"/>
<path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M13 2H14C14.2652 2 14.5196 2.10536 14.7071 2.29289C14.8946 2.48043 15 2.73478 15 3V10.3368C14.6891 10.1891 14.3531 10.0859 14 10.0354V3L13 2ZM13 10.0354V2V1C13 0.734784 12.8946 0.48043 12.7071 0.292893C12.5196 0.105357 12.2652 0 12 0H3C2.73478 0 2.48043 0.105357 2.29289 0.292893C2.10536 0.48043 2 0.734784 2 1V12C2.00006 12.2652 2.10545 12.5195 2.293 12.707L4.293 14.707C4.48049 14.8945 4.73481 14.9999 5 15H6.33682C6.18915 14.6891 6.08595 14.3531 6.03544 14H5L4 13H6.03544C6.08595 12.6469 6.18915 12.3109 6.33682 12H5V1H12V10.3368C12.3109 10.1891 12.6469 10.0859 13 10.0354ZM4 1H3V12H4V1Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M13 10.0354V2L14 3V10.0354C13.8367 10.0121 13.6698 10 13.5 10C13.3302 10 13.1633 10.0121 13 10.0354ZM6.03544 13H4L5 14H6.03544C6.01209 13.8367 6 13.6698 6 13.5C6 13.3302 6.01209 13.1633 6.03544 13Z" fill="#EBEBEB"/>
<path d="M4 1H3V12H4V1Z" fill="white"/>
<path d="M8 4H1V6H8V4Z" fill="#B0E5C3"/>
<path d="M8 4V6H1V4H8ZM9 3H0V7H9V3Z" fill="#39BF68"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.5 11C10.3178 11 11.0439 11.3927 11.5 11.9998C11.9561 11.3927 12.6822 11 13.5 11C14.8807 11 16 12.1193 16 13.5C16 14.8807 14.8807 16 13.5 16C12.6822 16 11.9561 15.6073 11.5 15.0002C11.0439 15.6073 10.3178 16 9.5 16C8.11929 16 7 14.8807 7 13.5C7 12.1193 8.11929 11 9.5 11ZM10.9146 13H9.5C9.22386 13 9 13.2239 9 13.5C9 13.7761 9.22386 14 9.5 14H10.9146C10.7087 14.5826 10.1531 15 9.5 15C8.67157 15 8 14.3284 8 13.5C8 12.6716 8.67157 12 9.5 12C10.1531 12 10.7087 12.4174 10.9146 13ZM12.0854 14H13.5C13.7761 14 14 13.7761 14 13.5C14 13.2239 13.7761 13 13.5 13H12.0854C12.2913 12.4174 12.8469 12 13.5 12C14.3284 12 15 12.6716 15 13.5C15 14.3284 14.3284 15 13.5 15C12.8469 15 12.2913 14.5826 12.0854 14Z" fill="#888888"/>
</svg>

After

Width:  |  Height:  |  Size: 2.5 KiB

View file

@ -0,0 +1,10 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M13 2H14C14.2652 2 14.5196 2.10536 14.7071 2.29289C14.8946 2.48043 15 2.73478 15 3V10.3368C14.5454 10.1208 14.0368 10 13.5 10C12.9632 10 12.4546 10.1208 12 10.3368V12H6.33682C6.12085 12.4546 6 12.9632 6 13.5C6 14.0368 6.12085 14.5454 6.33682 15H5C4.73481 14.9999 4.48049 14.8945 4.293 14.707L2.293 12.707C2.10545 12.5195 2.00006 12.2652 2 12V1C2 0.734784 2.10536 0.48043 2.29289 0.292893C2.48043 0.105357 2.73478 0 3 0H12C12.2652 0 12.5196 0.105357 12.7071 0.292893C12.8946 0.48043 13 0.734784 13 1V2Z" fill="white"/>
<path d="M12 1H5V12H12V1Z" fill="white"/>
<path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M13 2H14C14.2652 2 14.5196 2.10536 14.7071 2.29289C14.8946 2.48043 15 2.73478 15 3V10.3368C14.6891 10.1891 14.3531 10.0859 14 10.0354V3L13 2ZM13 10.0354V2V1C13 0.734784 12.8946 0.48043 12.7071 0.292893C12.5196 0.105357 12.2652 0 12 0H3C2.73478 0 2.48043 0.105357 2.29289 0.292893C2.10536 0.48043 2 0.734784 2 1V12C2.00006 12.2652 2.10545 12.5195 2.293 12.707L4.293 14.707C4.48049 14.8945 4.73481 14.9999 5 15H6.33682C6.18915 14.6891 6.08595 14.3531 6.03544 14H5L4 13H6.03544C6.08595 12.6469 6.18915 12.3109 6.33682 12H5V1H12V10.3368C12.3109 10.1891 12.6469 10.0859 13 10.0354ZM4 1H3V12H4V1Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M13 10.0354V2L14 3V10.0354C13.8367 10.0121 13.6698 10 13.5 10C13.3302 10 13.1633 10.0121 13 10.0354ZM6.03544 13H4L5 14H6.03544C6.01209 13.8367 6 13.6698 6 13.5C6 13.3302 6.01209 13.1633 6.03544 13Z" fill="#EBEBEB"/>
<path d="M4 1H3V12H4V1Z" fill="white"/>
<path d="M8 4H1V6H8V4Z" fill="#B0E5C3"/>
<path d="M8 4V6H1V4H8ZM9 3H0V7H9V3Z" fill="#39BF68"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.5 11C10.3178 11 11.0439 11.3927 11.5 11.9998C11.9561 11.3927 12.6822 11 13.5 11C14.8807 11 16 12.1193 16 13.5C16 14.8807 14.8807 16 13.5 16C12.6822 16 11.9561 15.6073 11.5 15.0002C11.0439 15.6073 10.3178 16 9.5 16C8.11929 16 7 14.8807 7 13.5C7 12.1193 8.11929 11 9.5 11ZM10.9146 13H9.5C9.22386 13 9 13.2239 9 13.5C9 13.7761 9.22386 14 9.5 14H10.9146C10.7087 14.5826 10.1531 15 9.5 15C8.67157 15 8 14.3284 8 13.5C8 12.6716 8.67157 12 9.5 12C10.1531 12 10.7087 12.4174 10.9146 13ZM12.0854 14H13.5C13.7761 14 14 13.7761 14 13.5C14 13.2239 13.7761 13 13.5 13H12.0854C12.2913 12.4174 12.8469 12 13.5 12C14.3284 12 15 12.6716 15 13.5C15 14.3284 14.3284 15 13.5 15C12.8469 15 12.2913 14.5826 12.0854 14Z" fill="#888888"/>
</svg>

After

Width:  |  Height:  |  Size: 2.5 KiB

View file

@ -0,0 +1,13 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1960_157)">
<path opacity="0.4" d="M8 4H1V6H8V4Z" fill="white"/>
<path opacity="0.4" fill-rule="evenodd" clip-rule="evenodd" d="M13 10.0354V2L14 3V10.0354C13.8367 10.0121 13.6698 10 13.5 10C13.3302 10 13.1633 10.0121 13 10.0354ZM6.03544 13H4L5 14H6.03544C6.01209 13.8367 6 13.6698 6 13.5C6 13.3302 6.01209 13.1633 6.03544 13Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 1V3H0V7H2V12C2 12.276 2.112 12.526 2.293 12.707L4.293 14.707C4.474 14.888 4.724 15 5 15H6.33682C6.18915 14.6891 6.08595 14.3531 6.03544 14H5L4 13H6.03544C6.08595 12.6469 6.18915 12.3109 6.33682 12H5V7H9V3H5V1H12V10.3368C12.3109 10.1891 12.6469 10.0859 13 10.0354V2L14 3V10.0354C14.3531 10.0859 14.6891 10.1891 15 10.3368V3C15 2.448 14.552 2 14 2H13V1C13 0.448 12.552 0 12 0H3C2.448 0 2 0.448 2 1ZM4 1V3H3V1H4ZM3 12V7H4V12H3ZM8 4H1V6H8V4Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.5 11C10.3178 11 11.0439 11.3927 11.5 11.9998C11.9561 11.3927 12.6822 11 13.5 11C14.8807 11 16 12.1193 16 13.5C16 14.8807 14.8807 16 13.5 16C12.6822 16 11.9561 15.6073 11.5 15.0002C11.0439 15.6073 10.3178 16 9.5 16C8.11929 16 7 14.8807 7 13.5C7 12.1193 8.11929 11 9.5 11ZM10.9146 13H9.5C9.22386 13 9 13.2239 9 13.5C9 13.7761 9.22386 14 9.5 14H10.9146C10.7087 14.5826 10.1531 15 9.5 15C8.67157 15 8 14.3284 8 13.5C8 12.6716 8.67157 12 9.5 12C10.1531 12 10.7087 12.4174 10.9146 13ZM12.0854 14H13.5C13.7761 14 14 13.7761 14 13.5C14 13.2239 13.7761 13 13.5 13H12.0854C12.2913 12.4174 12.8469 12 13.5 12C14.3284 12 15 12.6716 15 13.5C15 14.3284 14.3284 15 13.5 15C12.8469 15 12.2913 14.5826 12.0854 14Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_1960_157">
<rect width="16" height="16" fill="white"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 1.8 KiB

View file

@ -0,0 +1,13 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1960_15938)">
<path opacity="0.4" d="M8 4H1V6H8V4Z" fill="white"/>
<path opacity="0.4" fill-rule="evenodd" clip-rule="evenodd" d="M13 10.0354V2L14 3V10.0354C13.8367 10.0121 13.6698 10 13.5 10C13.3302 10 13.1633 10.0121 13 10.0354ZM6.03544 13H4L5 14H6.03544C6.01209 13.8367 6 13.6698 6 13.5C6 13.3302 6.01209 13.1633 6.03544 13Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 1V3H0V7H2V12C2 12.276 2.112 12.526 2.293 12.707L4.293 14.707C4.474 14.888 4.724 15 5 15H6.33682C6.18915 14.6891 6.08595 14.3531 6.03544 14H5L4 13H6.03544C6.08595 12.6469 6.18915 12.3109 6.33682 12H5V7H9V3H5V1H12V10.3368C12.3109 10.1891 12.6469 10.0859 13 10.0354V2L14 3V10.0354C14.3531 10.0859 14.6891 10.1891 15 10.3368V3C15 2.448 14.552 2 14 2H13V1C13 0.448 12.552 0 12 0H3C2.448 0 2 0.448 2 1ZM4 1V3H3V1H4ZM3 12V7H4V12H3ZM8 4H1V6H8V4Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.5 11C10.3178 11 11.0439 11.3927 11.5 11.9998C11.9561 11.3927 12.6822 11 13.5 11C14.8807 11 16 12.1193 16 13.5C16 14.8807 14.8807 16 13.5 16C12.6822 16 11.9561 15.6073 11.5 15.0002C11.0439 15.6073 10.3178 16 9.5 16C8.11929 16 7 14.8807 7 13.5C7 12.1193 8.11929 11 9.5 11ZM10.9146 13H9.5C9.22386 13 9 13.2239 9 13.5C9 13.7761 9.22386 14 9.5 14H10.9146C10.7087 14.5826 10.1531 15 9.5 15C8.67157 15 8 14.3284 8 13.5C8 12.6716 8.67157 12 9.5 12C10.1531 12 10.7087 12.4174 10.9146 13ZM12.0854 14H13.5C13.7761 14 14 13.7761 14 13.5C14 13.2239 13.7761 13 13.5 13H12.0854C12.2913 12.4174 12.8469 12 13.5 12C14.3284 12 15 12.6716 15 13.5C15 14.3284 14.3284 15 13.5 15C12.8469 15 12.2913 14.5826 12.0854 14Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_1960_15938">
<rect width="16" height="16" fill="white"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 1.8 KiB

View file

@ -0,0 +1,14 @@
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1960_209)">
<path opacity="0.34" d="M14 6H1V11H14V6Z" fill="#39BF68"/>
<path opacity="0.85" fill-rule="evenodd" clip-rule="evenodd" d="M14 6H1V11H14V6ZM0 5V12H15V5H0Z" fill="#39BF68"/>
<path opacity="0.6" fill-rule="evenodd" clip-rule="evenodd" d="M20.9646 24C20.722 22.3037 19.2632 21 17.5 21C15.567 21 14 22.5669 14 24.5C14 26.4331 15.567 28 17.5 28C19.2632 28 20.722 26.6963 20.9646 25H21.0354C21.278 26.6963 22.7368 28 24.5 28C26.433 28 28 26.4331 28 24.5C28 22.5669 26.433 21 24.5 21C22.7368 21 21.278 22.3037 21.0354 24H20.9646ZM19.95 24H17.5C17.2238 24 17 24.2239 17 24.5C17 24.7761 17.2238 25 17.5 25H19.95C19.7183 26.1411 18.7095 27 17.5 27C16.1193 27 15 25.8806 15 24.5C15 23.1194 16.1193 22 17.5 22C18.7095 22 19.7183 22.8589 19.95 24ZM22.05 25H24.5C24.7762 25 25 24.7761 25 24.5C25 24.2239 24.7762 24 24.5 24H22.05C22.2817 22.8589 23.2905 22 24.5 22C25.8807 22 27 23.1194 27 24.5C27 25.8806 25.8807 27 24.5 27C23.2905 27 22.2817 26.1411 22.05 25Z" fill="white"/>
<path opacity="0.6" fill-rule="evenodd" clip-rule="evenodd" d="M24.25 3C24.045 3 23.851 3.042 23.668 3.107L24.781 4.22C24.917 4.356 25.001 4.543 25.001 4.75V19.0225C25.3441 19.0535 25.678 19.116 26 19.207V4.75C26 3.784 25.216 3 24.25 3ZM12.207 26C12.1159 25.6777 12.0534 25.3434 12.0224 25H8.439L6.439 23H12.207C12.3056 22.6514 12.4378 22.3168 12.5997 22H8V12H7V22H5.75C5.336 22 5 21.664 5 21.25V12H4V21.25C4 21.733 4.196 22.171 4.513 22.487L7.513 25.487C7.855 25.829 8.303 26 8.75 26H12.207ZM22 19.5997C22.3168 19.4378 22.6514 19.3056 23 19.207V1.75C23 0.784 22.216 0 21.25 0H5.75C4.784 0 4 0.784 4 1.75V5H5V1.75C5 1.336 5.336 1 5.75 1H7V5H8V1H21.25C21.664 1 22 1.336 22 1.75V19.5997Z" fill="white"/>
<path opacity="0.24" fill-rule="evenodd" clip-rule="evenodd" d="M22.9999 19.2071C23.4768 19.0722 23.98 19 24.5 19C24.6685 19 24.8353 19.0076 24.9999 19.0224V4.74094C24.9989 4.64553 24.9796 4.55117 24.943 4.46299C24.9053 4.37202 24.8498 4.28944 24.7799 4.22002L22.9999 2.43909V19.2071ZM12.0224 25C12.0076 24.8353 12 24.6686 12 24.5C12 23.98 12.0722 23.4769 12.207 23L6.43896 23L8.43894 25H12.0224Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_1960_209">
<rect width="28" height="28" fill="white"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 2.3 KiB

View file

@ -0,0 +1,17 @@
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1960_191)">
<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M23.668 3.107C23.8544 3.03819 24.0513 3.002 24.25 3C24.7141 3.00026 25.159 3.18472 25.4872 3.51286C25.8153 3.84099 25.9997 4.28595 26 4.75V19.207C25.5232 19.0722 25.02 19 24.5 19C23.1704 19 21.9509 19.4718 21 20.2572C20.0491 19.4718 18.8296 19 17.5 19C14.4624 19 12 21.4624 12 24.5C12 25.02 12.0722 25.5232 12.207 26H8.75001C8.52016 26.0004 8.29252 25.9552 8.08021 25.8672C7.8679 25.7791 7.67512 25.6499 7.513 25.487L4.513 22.487C4.35012 22.3248 4.22093 22.1321 4.13289 21.9198C4.04484 21.7075 3.99968 21.4798 4 21.25V1.75C4.00027 1.28595 4.18473 0.840987 4.51286 0.512856C4.84099 0.184725 5.28596 0.000264943 5.75 0H21.25C21.7141 0.000264943 22.159 0.184725 22.4872 0.512856C22.8153 0.840987 22.9997 1.28595 23 1.75V2.43915L23.668 3.107Z" fill="white"/>
<path d="M22 1H8V22H22V1Z" fill="white"/>
<path d="M7 1H5V22H7V1Z" fill="white"/>
<path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M23.668 3.107C23.8544 3.03819 24.0513 3.002 24.25 3C24.714 3.00026 25.159 3.18472 25.4871 3.51286C25.8153 3.84099 25.9997 4.28595 26 4.75V19.207C25.6777 19.1159 25.3434 19.0534 25 19.0224V4.75C25.0002 4.6515 24.9808 4.55394 24.9431 4.46297C24.9053 4.37199 24.8499 4.28941 24.78 4.22L23.668 3.107ZM12.207 23H6.439L8.439 25H12.0224C12.0534 25.3434 12.1159 25.6777 12.207 26H8.75C8.52016 26.0004 8.29252 25.9552 8.0802 25.8672C7.86789 25.7791 7.67512 25.6499 7.513 25.487L4.513 22.487C4.35012 22.3248 4.22093 22.1321 4.13289 21.9198C4.04484 21.7075 3.99968 21.4798 4 21.25V1.75C4.00027 1.28595 4.18473 0.840987 4.51286 0.512856C4.84099 0.184725 5.28595 0.000264943 5.75 0H21.25C21.714 0.000264943 22.159 0.184725 22.4871 0.512856C22.8153 0.840987 22.9997 1.28595 23 1.75V19.207C22.6514 19.3056 22.3168 19.4378 22 19.5997V1.75C22 1.55109 21.921 1.36032 21.7803 1.21967C21.6397 1.07902 21.4489 1 21.25 1H8V22H12.5997C12.4378 22.3168 12.3056 22.6514 12.207 23ZM5 1.75V21.25C5 21.4489 5.07902 21.6397 5.21967 21.7803C5.36032 21.921 5.55109 22 5.75 22H7V1H5.75C5.55109 1 5.36032 1.07902 5.21967 1.21967C5.07902 1.36032 5 1.55109 5 1.75Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M22.9999 19.2071C23.4768 19.0722 23.98 19 24.5 19C24.6685 19 24.8353 19.0076 24.9999 19.0224V4.74094C24.9989 4.64553 24.9796 4.55117 24.943 4.46299C24.9053 4.37202 24.8498 4.28944 24.7799 4.22002L22.9999 2.43909V19.2071ZM12.0224 25C12.0076 24.8353 12 24.6686 12 24.5C12 23.98 12.0722 23.4769 12.207 23L6.43896 23L8.43894 25H12.0224Z" fill="#EBEBEB"/>
<path d="M14 6H1V11H14V6Z" fill="#B0E5C3"/>
<path d="M14 6V11H1V6H14ZM15 5H0V12H15V5Z" fill="#39BF68"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M20.9646 24C20.722 22.3037 19.2632 21 17.5 21C15.567 21 14 22.5669 14 24.5C14 26.4331 15.567 28 17.5 28C19.2632 28 20.722 26.6963 20.9646 25H21.0354C21.278 26.6963 22.7368 28 24.5 28C26.433 28 28 26.4331 28 24.5C28 22.5669 26.433 21 24.5 21C22.7368 21 21.278 22.3037 21.0354 24H20.9646ZM19.95 24H17.5C17.2238 24 17 24.2239 17 24.5C17 24.7761 17.2238 25 17.5 25H19.95C19.7183 26.1411 18.7095 27 17.5 27C16.1193 27 15 25.8806 15 24.5C15 23.1194 16.1193 22 17.5 22C18.7095 22 19.7183 22.8589 19.95 24ZM22.05 25H24.5C24.7762 25 25 24.7761 25 24.5C25 24.2239 24.7762 24 24.5 24H22.05C22.2817 22.8589 23.2905 22 24.5 22C25.8807 22 27 23.1194 27 24.5C27 25.8806 25.8807 27 24.5 27C23.2905 27 22.2817 26.1411 22.05 25Z" fill="#888888"/>
</g>
<defs>
<clipPath id="clip0_1960_191">
<rect width="28" height="28" fill="white"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 3.6 KiB

View file

@ -0,0 +1,7 @@
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.4" fill-rule="evenodd" clip-rule="evenodd" d="M22.9999 19.2071C23.4768 19.0722 23.98 19 24.5 19C24.6685 19 24.8353 19.0076 24.9999 19.0224V4.74094C24.9989 4.64553 24.9796 4.55117 24.943 4.46299C24.9053 4.37202 24.8498 4.28944 24.7799 4.22002L22.9999 2.43909V19.2071ZM12.0224 25C12.0076 24.8353 12 24.6686 12 24.5C12 23.98 12.0722 23.4769 12.207 23L6.43896 23L8.43894 25H12.0224Z" fill="white"/>
<path opacity="0.4" d="M14 6H1V11H14V6Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M14 6H1V11H14V6ZM0 5V12H15V5H0Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M24.25 3C24.045 3 23.851 3.042 23.668 3.107L24.781 4.22C24.917 4.356 25.001 4.543 25.001 4.75V19.0225C25.3441 19.0535 25.678 19.116 26 19.207V4.75C26 3.784 25.216 3 24.25 3ZM12.207 26C12.1159 25.6777 12.0534 25.3434 12.0224 25H8.439L6.439 23H12.207C12.3056 22.6514 12.4378 22.3168 12.5997 22H8V12H7V22H5.75C5.336 22 5 21.664 5 21.25V12H4V21.25C4 21.733 4.196 22.171 4.513 22.487L7.513 25.487C7.855 25.829 8.303 26 8.75 26H12.207ZM22 19.5997C22.3168 19.4378 22.6514 19.3056 23 19.207V1.75C23 0.784 22.216 0 21.25 0H5.75C4.784 0 4 0.784 4 1.75V5H5V1.75C5 1.336 5.336 1 5.75 1H7V5H8V1H21.25C21.664 1 22 1.336 22 1.75V19.5997Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M20.9646 24C20.722 22.3037 19.2632 21 17.5 21C15.567 21 14 22.5669 14 24.5C14 26.4331 15.567 28 17.5 28C19.2632 28 20.722 26.6963 20.9646 25H21.0354C21.278 26.6963 22.7368 28 24.5 28C26.433 28 28 26.4331 28 24.5C28 22.5669 26.433 21 24.5 21C22.7368 21 21.278 22.3037 21.0354 24H20.9646ZM19.95 24H17.5C17.2238 24 17 24.2239 17 24.5C17 24.7761 17.2238 25 17.5 25H19.95C19.7183 26.1411 18.7095 27 17.5 27C16.1193 27 15 25.8806 15 24.5C15 23.1194 16.1193 22 17.5 22C18.7095 22 19.7183 22.8589 19.95 24ZM22.05 25H24.5C24.7762 25 25 24.7761 25 24.5C25 24.2239 24.7762 24 24.5 24H22.05C22.2817 22.8589 23.2905 22 24.5 22C25.8807 22 27 23.1194 27 24.5C27 25.8806 25.8807 27 24.5 27C23.2905 27 22.2817 26.1411 22.05 25Z" fill="white"/>
</svg>

After

Width:  |  Height:  |  Size: 2.1 KiB

View file

@ -48,10 +48,12 @@
.cell.numNotes {
text-align: center;
}
}
$itemTypesIcons: (
$-itemTypesIcons: (
artwork,
attachment-epub,
attachment-epub-link,
attachment-file, // mapped to document below
attachment-link,
attachment-pdf-link,
@ -98,27 +100,30 @@
webpage
);
$itemTypesMap: (
$-itemTypesMap: (
"attachment-file": "document"
);
.virtualized-table .row {
.icon-item-type {
width: 16px;
height: 16px;
}
@include focus-states using ($color) {
// Due to quirks of the state() mixin, we need two sets of .icon-item-type rules:
// one when the icon is within a virtualized-table, and one when it isn't. We declare
// a mixin here to avoid duplication.
@mixin -icon-item-type-rules($color) {
.icon-item-type {
// default icon, for known item types more specific selectors below will apply
@include svgicon("document", $color, "16", "item-type", true);
}
@each $itemTypeIcon in $itemTypesIcons {
@each $itemTypeIcon in $-itemTypesIcons {
$itemType: camelCase(str-replace(str-replace($itemTypeIcon, "pdf", "PDF"), "epub", "EPUB"));
@if map.has-key($itemTypesMap, $itemTypeIcon) {
$itemTypeIcon: map.get($itemTypesMap, $itemTypeIcon);
@if map.has-key($-itemTypesMap, $itemTypeIcon) {
$itemTypeIcon: map.get($-itemTypesMap, $itemTypeIcon);
}
.icon-item-type[data-item-type=#{$itemType}] {
@ -126,5 +131,13 @@
}
}
}
@include focus-states using($color) {
@include -icon-item-type-rules($color);
}
.virtualized-table .row {
@include focus-states using($color) {
@include -icon-item-type-rules($color);
}
}