Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 | 117x 117x 117x | import { DateTime } from 'luxon';
import { Mod } from '../../model/tag';
import { Template } from '../../model/template';
export const folderTemplate: Template = {
tag: 'folder',
name: $localize`📂️ Folder`,
config: {
type: 'lens',
experimental: true,
generated: $localize`Generated by jasper-ui ${DateTime.now().toISO()}`,
submit: $localize`📂️ folder/`,
view: $localize`📂️`,
writeAccess: ['+folder'],
local: true,
description: $localize`Activates built-in Folder mode for viewing Refs.`,
filters: [
{ query: 'folder', label: $localize`📂️ folder`, title: $localize`Folders`, group: $localize`Templates 🎨️` },
],
// language=CSS
css: `
.desktop {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
align-content: flex-start;
max-width: 100vw;
height: 90vh;
}
.file, .subfolder {
display: block;
padding: 6px;
border-radius: 16px;
&:hover, &:active, &.cdk-drag-dragging {
z-index: 1000;
box-shadow: inset 0 0 5px grey;
backdrop-filter: blur(3px);
transition: box-shadow 0.1s ease-out;
}
&.cdk-drag-dragging {
box-shadow: inset 0 0 10px grey;
transition: box-shadow 0.1s ease-in;
}
width: 128px;
min-height: 128px;
display: inline-block;
user-select: none;
text-align: center;
.row {
justify-content: center;
a {
-webkit-box-orient: vertical;
display: -webkit-box;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
}
}
.thumbnail {
width: 128px;
height: 128px;
line-height: 128px;
font-size: 64px;
cursor: default;
}
:focus, :focus-within {
.folder-icon {
filter: drop-shadow(0 0 2px var(--border));
}
}
}
`,
},
defaults: {
files: {},
subfolders: {},
},
schema: {
definitions: {
Pos: {
optionalProperties: {
x: { type: 'uint32' },
y: { type: 'uint32' }
}
}
},
optionalProperties: {
flatten: { type: 'boolean' },
},
properties: {
files: { values: { ref: 'Pos' }},
subfolders: { values: { ref: 'Pos' }},
},
},
};
export interface Pos {
x: number;
y: number;
}
export const folderMod: Mod = {
template: [
folderTemplate,
]
};
|