Skip to content

Commit

Permalink
Add color picking and always show example code
Browse files Browse the repository at this point in the history
  • Loading branch information
@electrikmilk
electrikmilk committed May 26, 2024
1 parent 53d7c37 commit 7a74fad
Show file tree
Hide file tree
Showing 2 changed files with 192 additions and 67 deletions.
192 changes: 127 additions & 65 deletions src/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,15 +34,27 @@
</f7-list>
</f7-popover>

<f7-navbar sliding>
<f7-nav-left>
<f7-navbar sliding class="text-align-center" style="padding-top: 5rem;height: 10rem">
<f7-nav-left style="z-index: 999">
<f7-link icon-f7="info_circle"
popover-open=".credits"/>
</f7-nav-left>
<f7-nav-title-large>
{{ f7params.name }}
</f7-nav-title-large>
<f7-nav-title :title="f7params.name"/>

<f7-nav-title style="position: fixed;left: 0;right: 0;margin: 1.5rem 0 auto">
<div style="all: initial">
<div class="shortcut-icon s86"
style="position: relative"
:class="iconClass(glyph.code)">
</div>
<div class="shortcut-icon-color-picker">
<div class="shortcut-icon-color"
v-for="(n,c) in colors"
@click="color = {identifier: c, code: n}"
:class="'c'+n">
</div>
</div>
</div>
</f7-nav-title>
<f7-subnavbar>
<f7-searchbar search-container=".search-list"
class="searchbar"
Expand All @@ -53,68 +65,67 @@
</f7-subnavbar>
</f7-navbar>

<f7-list strong inset accordion-list>
<f7-list-item title="How to Use" media-item accordion-item>
<template #media>
<f7-icon f7="question_circle"
size="24px"
:color="blue"/>
</template>
<f7-accordion-content>
<f7-block>
<p class="margin-top margin-bottom" style="opacity: .5">
<f7-icon f7="doc_on_clipboard_fill"
size="1rem"/>
Click one of the glyphs in the list below to copy the identifier to your clipboard.
</p>
<h3>
<f7-link
href="https://cherrilang.org"
external
target="_blank">
Cherri
</f7-link>
</h3>
<p>
Set it as your Shortcut's icon in Cherri using a definition called <code>glyph</code>.
</p>
<pre>#define glyph identifier</pre>
<h3>
<f7-link
href="https://jellycuts.com"
rel="noopener noreferrer"
external
target="_blank">
Jelly
</f7-link>
</h3>
<p>
Set it as your Shortcut's icon in Jelly using <code>#Icon</code>.
</p>
<pre>#Icon: identifier</pre>
</f7-block>
</f7-accordion-content>
</f7-list-item>
</f7-list>

<f7-list strong inset class="searchbar-not-found">
<f7-list-item title="No glyphs found!"/>
</f7-list>

<f7-list strong dividers inset media-list class="search-list searchbar-found">
<template v-for="(n,g) in glyphs">
<template v-if="typeof n !== 'object'">
<f7-toolbar position="bottom" style="font-size: .8rem"
:style="!color.identifier ? 'height: 9rem' : 'height: 11rem'">
<div v-for="(compiler, name) in compilers"
class="width-100"
style="display: flex;align-items: center;justify-content: center;gap: 1rem">
<f7-link
:href="compiler.url"
external
style="font-weight: 600;font-size: 1rem"
target="_blank">
{{ compiler.icon }} {{ name }}
</f7-link>
<code class="width-100 display-block">
<template v-if="glyph.identifier">
<template v-if="name === 'Cherri'"><span class="keyword">#define</span> <span class="token">glyph</span>
{{ glyph.identifier }}
</template>
<template v-if="name === 'Jelly'"><span class="keyword">#Icon</span>: {{ glyph.identifier }}</template>
</template>
<template v-if="color.identifier">
<template v-if="name === 'Cherri'"><br/><span class="keyword">#define</span> <span
class="token">color</span> {{ color.identifier }}
</template>
<template v-if="name === 'Jelly'"><br/><span class="keyword">#Color</span>: {{ jellyColorName() }}
</template>
</template>
</code>
<f7-button icon-f7="doc_on_clipboard_fill" icon-size="1.3rem"
@click="copyToClipboard(compiler.code)"/>
</div>
</f7-toolbar>

<f7-page-content>
<f7-block-header>
<f7-icon f7="doc_on_clipboard_fill"
size="1rem"/>
Choose one of the glyphs in the list below to copy the identifier and generate code.
</f7-block-header>

<f7-list strong inset class="searchbar-not-found">
<f7-list-item title="No glyphs found!"/>
</f7-list>

<f7-list strong dividers inset media-list class="search-list searchbar-found">
<template v-for="(n,g) in glyphs">
<f7-list-item :title="glyphTitle(g)"
:text="g"
link="#"
@click="copyToClipboard(g)">
@click="copyToClipboard(g);glyph = {identifier: g, code: n}">
<template #media>
<div class="shortcut-icon s43" :class="'g'+n"></div>
<div class="shortcut-icon s43"
:class="iconClass(n)">
</div>
</template>
</f7-list-item>
</template>
</template>
</f7-list>
</f7-list>

<br/>
<br/>
</f7-page-content>
</f7-page>
</f7-view>
</f7-app>
Expand All @@ -130,6 +141,7 @@ import {
f7App,
f7Block,
f7BlockHeader,
f7Button,
f7Icon,
f7Link,
f7List,
Expand All @@ -140,6 +152,7 @@ import {
f7NavTitle,
f7NavTitleLarge,
f7Page,
f7PageContent,
f7Popover,
f7Searchbar,
f7Subnavbar,
Expand Down Expand Up @@ -169,6 +182,8 @@ export default {
f7AccordionContent,
f7Block,
f7Popover,
f7Button,
f7PageContent,
},
data() {
return {
Expand All @@ -179,11 +194,21 @@ export default {
darkMode: 'auto',
},
glyphs: glyphs,
glyph: 'identifier',
glyph: {identifier: 'identifier', code: null},
colors: colors,
color: null,
colorName: null,
color: {name: null, code: null},
compilers: {
'Cherri': {
icon: '🍒',
url: 'https://cherrilang.org/',
},
'Jelly': {
icon: '🪼',
url: 'https://jellycuts.com/',
},
},
githubCredits: ['atnbueno', 'actuallytaylor', 'electrikmilk', 'chrisjmendez'],
groups: [],
};
},
mounted() {
Expand All @@ -195,7 +220,22 @@ export default {
},
copyToClipboard(text) {
navigator.clipboard.writeText(text);
f7.dialog.alert(text, 'Copied to Clipboard!');
f7.toast.create({
icon: '<i class="f7-icons">doc_on_clipboard_fill</i>',
text: 'Copied to Clipboard',
position: 'center',
closeTimeout: 2000,
}).open();
},
iconClass(n) {
let classes = {};
classes[`g${n}`] = true;
if (this.color.code) {
classes[`c${this.color.code}`] = true;
}
return classes;
},
glyphTitle(g) {
switch (g) {
Expand Down Expand Up @@ -239,6 +279,28 @@ export default {
return words.join(' ');
},
jellyColorName() {
switch (this.color.identifier) {
case 'darkorange':
return 'orange';
case 'orange':
return 'tangerine';
case 'lightblue':
return 'lightBlue';
case 'darkblue':
return 'navy';
case 'violet':
return 'grape';
case 'taupe':
return 'grayBrown';
case 'gray':
return 'grayGreen';
case 'darkgray':
return 'grayBlue';
default:
return this.color.name;
}
},
},
};
</script>
Expand Down
67 changes: 65 additions & 2 deletions src/style.css
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,72 @@
pre {
code {
background: #222222;
color: #fafafa;
margin: 1rem 0;
padding: 0.5rem;
border-radius: 0.5rem;
border: 1px solid #333333;
overflow: scroll;
}
}

code .keyword {
color: #fb8fff;
}

code .token {
color: #8fa9ff;
}

@media (min-width: 535px) {
.navbar {
height: 10rem !important;
}

.page-content {
padding-top: 6rem !important;
}
}

@media (max-width: 535px) and (min-width: 298px) {
.navbar {
height: 13rem !important;
}
}

@media (max-width: 298px) {
.navbar {
height: 15rem !important;
}
}

.navbar-inner {
align-items: baseline !important;
}

.toolbar-inner {
display: block !important;
}

/* Color Picker */

.shortcut-icon-color-picker {
margin: .5rem 1rem 0;
text-align: center;
}

.shortcut-icon-color {
margin: .3rem;
display: inline-block;
border-radius: 50%;
height: 1.5rem;
width: 1.5rem;
cursor: pointer;
overflow: hidden;
}

.shortcut-icon-color:hover {
filter: brightness(110%);
}

.shortcut-icon-color:active {
filter: brightness(90%);
}

0 comments on commit 7a74fad

Please sign in to comment.