explorigin/gallery
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Switch to FontAwesome SVG icons

Browse Source
This commit is contained in:
Timothy Farrell 2018-06-30 09:00:51 -05:00
parent 83f70aa88d
commit 13468e3c1b
8 changed files with 3968 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3950
packages/gallery/src/assets/fa-pro-light.svg Normal file
View File

File diff suppressed because it is too large Load Diff
Side by Side

After

Width:  |  Height:  |  Size: 812 KiB

14
packages/gallery/src/interface/allImages.js
View File

@ -65,7 +65,9 @@ export function AllImagesView(vm, params) {
}),
[containerScrollTop, sections]
);
const appBarUp = computed(s => (s ? { name: 'x', action: deSelect } : undefined), [selectMode]);
const appBarUp = computed(s => (s ? { name: 'minus-circle', action: deSelect } : undefined), [
selectMode
]);
const appBarActions = computed(
s =>
s
@ -76,7 +78,7 @@ export function AllImagesView(vm, params) {
},
[
Icon({
name: 'trash',
name: 'trash-alt',
size: 0.75
})
]
@ -92,7 +94,7 @@ export function AllImagesView(vm, params) {
},
[
Icon({
name: 'upload',
name: 'cloud-upload',
size: 0.75,
title: 'Upload'
})
@ -226,16 +228,16 @@ export function AllImagesView(vm, params) {
[
el('h1', 'Welcome'),
el('p', [
'To get started, drag some photos from your desktop or click on the ',
'To get started, drag some photos from your desktop or click on the',
el(
'label',
{
for: 'uploadButton',
style: Object.assign({ margin: '0px 3px' }, CLICKABLE)
style: Object.assign({ margin: '0px 6px' }, CLICKABLE)
},
[
Icon({
name: 'upload',
name: 'cloud-upload',
size: 0.75,
title: 'Upload',
style: { verticalAlign: 'middle' }

2
packages/gallery/src/interface/components/appbar.js
View File

@ -29,7 +29,7 @@ export function AppBar(params) {
Icon(
Object.assign(
{
name: up.button || 'arrow_left',
name: up.button || 'arrow-left',
size: 0.75,
style: { verticalAlign: 'middle' }
},

47
packages/gallery/src/interface/components/icon.js
View File

@ -1,51 +1,10 @@
import { defineElement as el, defineSvgElement as sv } from '../../utils/domvm.js';
const ICON_PATHS = {
check_circle: [
'27 32',
'M22.93 13.107q0-.5-.322-.82l-1.625-1.608q-.34-.34-.804-.34t-.807.34l-7.286 7.265L8.05 13.91q-.34-.338-.803-.338t-.805.34L4.82 15.517q-.32.32-.32.82 0 .483.32.805l6.464 6.464q.34.34.804.34.482 0 .82-.34l9.697-9.696q.32-.32.32-.803zM27.43 16q0 3.732-1.84 6.884t-4.99 4.99-6.885 1.84-6.884-1.84-4.99-4.99T0 16t1.84-6.884 4.99-4.99 6.885-1.84 6.884 1.84 4.99 4.99T27.43 16z'
],
circle_o: [
'32 32',
'M13.714 6.286q-2.643 0-4.875 1.304T5.3 11.126 4 16t1.303 4.876 3.536 3.536 4.872 1.304 4.875-1.304 3.535-3.536T23.43 16t-1.305-4.874T18.59 7.59t-4.876-1.304zM27.43 16q0 3.732-1.84 6.884t-4.99 4.99-6.885 1.84-6.884-1.84-4.99-4.99T0 16t1.84-6.884 4.99-4.99 6.885-1.84 6.884 1.84 4.99 4.99T27.43 16z'
],
upload: [
'34 32',
'M22.857 15.429q0-0.25-0.161-0.411l-6.286-6.286q-0.161-0.161-0.411-0.161t-0.411 0.161l-6.268 6.268q-0.179 0.214-0.179 0.429 0 0.25 0.161 0.411t0.411 0.161h4v6.286q0 0.232 0.17 0.402t0.402 0.17h3.429q0.232 0 0.402-0.17t0.17-0.402v-6.286h4q0.232 0 0.402-0.17t0.17-0.402zM34.286 20.571q0 2.839-2.009 4.848t-4.848 2.009h-19.429q-3.304 0-5.652-2.348t-2.348-5.652q0-2.321 1.25-4.286t3.357-2.946q-0.036-0.536-0.036-0.768 0-3.786 2.679-6.464t6.464-2.679q2.786 0 5.098 1.554t3.366 4.125q1.268-1.107 2.964-1.107 1.893 0 3.232 1.339t1.339 3.232q0 1.357-0.732 2.464 2.321 0.554 3.813 2.42t1.491 4.259z'
],
trash: [
'32 32',
'M9.143 13.143v10.286q0 0.25-0.161 0.411t-0.411 0.161h-1.143q-0.25 0-0.411-0.161t-0.161-0.411v-10.286q0-0.25 0.161-0.411t0.411-0.161h1.143q0.25 0 0.411 0.161t0.161 0.411zM13.714 13.143v10.286q0 0.25-0.161 0.411t-0.411 0.161h-1.143q-0.25 0-0.411-0.161t-0.161-0.411v-10.286q0-0.25 0.161-0.411t0.411-0.161h1.143q0.25 0 0.411 0.161t0.161 0.411zM18.286 13.143v10.286q0 0.25-0.161 0.411t-0.411 0.161h-1.143q-0.25 0-0.411-0.161t-0.161-0.411v-10.286q0-0.25 0.161-0.411t0.411-0.161h1.143q0.25 0 0.411 0.161t0.161 0.411zM20.571 26.071v-16.929h-16v16.929q0 0.393 0.125 0.723t0.259 0.482 0.188 0.152h14.857q0.054 0 0.188-0.152t0.259-0.482 0.125-0.723zM8.571 6.857h8l-0.857-2.089q-0.125-0.161-0.304-0.196h-5.661q-0.179 0.036-0.304 0.196zM25.143 7.429v1.143q0 0.25-0.161 0.411t-0.411 0.161h-1.714v16.929q0 1.482-0.839 2.563t-2.018 1.080h-14.857q-1.179 0-2.018-1.045t-0.839-2.527v-17h-1.714q-0.25 0-0.411-0.161t-0.161-0.411v-1.143q0-0.25 0.161-0.411t0.411-0.161h5.518l1.25-2.982q0.268-0.661 0.964-1.125t1.411-0.464h5.714q0.714 0 1.411 0.464t0.964 1.125l1.25 2.982h5.518q0.25 0 0.411 0.161t0.161 0.411z'
],
arrow_left: [
'32 32',
'M12.586 27.414l-10-10c-0.781-0.781-0.781-2.047 0-2.828l10-10c0.781-0.781 2.047-0.781 2.828 0s0.781 2.047 0 2.828l-6.586 6.586h19.172c1.105 0 2 0.895 2 2s-0.895 2-2 2h-19.172l6.586 6.586c0.39 0.39 0.586 0.902 0.586 1.414s-0.195 1.024-0.586 1.414c-0.781 0.781-2.047 0.781-2.828 0z'
],
chevron_left: [
'24 32',
'M20.911 5.375l-9.482 9.482 9.482 9.482q0.339 0.339 0.339 0.804t-0.339 0.804l-2.964 2.964q-0.339 0.339-0.804 0.339t-0.804-0.339l-13.25-13.25q-0.339-0.339-0.339-0.804t0.339-0.804l13.25-13.25q0.339-0.339 0.804-0.339t0.804 0.339l2.964 2.964q0.339 0.339 0.339 0.804t-0.339 0.804z'
],
chevron_right: [
'22 32',
'M19.768 15.661l-13.25 13.25q-0.339 0.339-0.804 0.339t-0.804-0.339l-2.964-2.964q-0.339-0.339-0.339-0.804t0.339-0.804l9.482-9.482-9.482-9.482q-0.339-0.339-0.339-0.804t0.339-0.804l2.964-2.964q0.339-0.339 0.804-0.339t0.804 0.339l13.25 13.25q0.339 0.339 0.339 0.804t-0.339 0.804z'
],
x: [
'24 24',
'M18.984 6.422l-5.578 5.578 5.578 5.578-1.406 1.406-5.578-5.578-5.578 5.578-1.406-1.406 5.578-5.578-5.578-5.578 1.406-1.406 5.578 5.578 5.578-5.578z'
],
unknown: [
'32 32',
'M12 6c2.203 0 3.984 1.781 3.984 3.984 0 2.484-3 2.766-3 5.016h-1.969c0-3.234 3-3 3-5.016 0-1.078-0.938-1.969-2.016-1.969s-2.016 0.891-2.016 1.969h-1.969c0-2.203 1.781-3.984 3.984-3.984zM12 20.016c4.406 0 8.016-3.609 8.016-8.016s-3.609-8.016-8.016-8.016-8.016 3.609-8.016 8.016 3.609 8.016 8.016 8.016zM12 2.016c5.531 0 9.984 4.453 9.984 9.984s-4.453 9.984-9.984 9.984-9.984-4.453-9.984-9.984 4.453-9.984 9.984-9.984zM11.016 18v-2.016h1.969v2.016h-1.969z'
]
};
// const sizeBasis = 24;
import { defineSvgElement as sv, injectElement as iv } from '../../utils/domvm.js';
import spriteSVGURL from '../../assets/fa-pro-light.svg';
export function Icon(params) {
const { name, size } = params;
const attrs = Object.assign({}, params);
const _size = (size || 1) + 1;
const [boxBounds, path] = ICON_PATHS[name] || ICON_PATHS.unknown;
delete attrs.name;
delete attrs.size;
@ -60,6 +19,6 @@ export function Icon(params) {
},
attrs
),
[sv('svg', { viewBox: `0 0 ${boxBounds}` }, [sv('path', { d: path })])]
[sv('use', { href: spriteSVGURL + '#' + name })]
);
}

6
packages/gallery/src/interface/focus.js
View File

@ -171,7 +171,7 @@ export function FocusView(vm, params) {
},
[
Icon({
name: 'trash',
name: 'trash-alt',
size: 0.75,
fill: 'white',
style: { verticalAlign: 'middle' }
@ -184,7 +184,7 @@ export function FocusView(vm, params) {
prevLink()
? prevClickZone({ href: prevLink() }, [
Icon({
name: 'chevron_left',
name: 'chevron-left',
size: 0.75,
fill: 'white'
})
@ -197,7 +197,7 @@ export function FocusView(vm, params) {
nextLink()
? nextClickZone({ href: nextLink() }, [
Icon({
name: 'chevron_right',
name: 'chevron-right',
size: 0.75,
fill: 'white'
})

2
packages/gallery/src/interface/gallery.js
View File

@ -46,7 +46,7 @@ export function GalleryView(vm) {
return [
Overlay([
Icon({
name: 'upload',
name: 'cloud-upload',
size: 4
}),
el('h1', 'Drop pictures here to upload to your gallery')

2
packages/gallery/src/interface/sectionPhoto.js
View File

@ -65,7 +65,7 @@ export function SectionPhoto({
},
[
Icon({
name: selectMode && !isSelected && !hovered ? 'circle_o' : 'check_circle',
name: selectMode && !isSelected && !hovered ? 'circle' : 'check-circle',
size: 0.75,
fill: isSelected ? '#00C800' : '#fff'
})

2
packages/gallery/src/interface/sectionView.js
View File

@ -109,7 +109,7 @@ export function SectionView(vm, params, key) {
opacity: selectMode ? 0.7 : 0
}
},
[Icon({ name: 'check_circle', size: 0.25 })]
[Icon({ name: 'check-circle', size: 0.25 })]
)
]),
sectionContent(sections().map(sectionRowTemplate))