Skip to content
This repository was archived by the owner on Dec 6, 2021. It is now read-only.

Commit ceb840e

Browse files
jdeepeejdeepee
committed
add ad4m language
1 parent 5eff23c commit ceb840e

33 files changed

+7112
-3
lines changed

‎.gitignore‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,13 @@
11
dist/
2-
node_modules/
2+
hc-dna/zomes/tests/node_modules
33
target/
44
.hc
55
.cargo
6+
*.dna
7+
*.js
8+
*.js.map
9+
node_modules
10+
!dna.js
11+
!*.icons.js
12+
!*.config.js
13+
build

‎ConstructorIcon.svelte‎

Lines changed: 236 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,236 @@
1+
<svelte:options tag={null}/>
2+
3+
<script lang="ts">
4+
import '@simonwep/pickr/dist/themes/nano.min.css'; // 'nano' theme
5+
import Pickr from '@simonwep/pickr';
6+
import { afterUpdate, onMount } from 'svelte';
7+
8+
let picker
9+
let container
10+
export let colour = '#9C27B0E6'
11+
let index = 1
12+
let pickers = [{'index': 1, 'color': colour}]
13+
14+
const createPickr = ({picker}) => {
15+
const pickr = Pickr.create({
16+
el: picker,
17+
theme: 'nano', // or 'monolith', or 'nano'
18+
container: container,
19+
20+
swatches: [
21+
'rgba(244, 67, 54, 1)',
22+
'rgba(233, 30, 99, 0.95)',
23+
'rgba(156, 39, 176, 0.9)',
24+
'rgba(103, 58, 183, 0.85)',
25+
'rgba(63, 81, 181, 0.8)',
26+
'rgba(33, 150, 243, 0.75)',
27+
'rgba(3, 169, 244, 0.7)',
28+
'rgba(0, 188, 212, 0.7)',
29+
'rgba(0, 150, 136, 0.75)',
30+
'rgba(76, 175, 80, 0.8)',
31+
'rgba(139, 195, 74, 0.85)',
32+
'rgba(205, 220, 57, 0.9)',
33+
'rgba(255, 235, 59, 0.95)',
34+
'rgba(255, 193, 7, 1)'
35+
],
36+
37+
components: {
38+
// Main components
39+
preview: true,
40+
opacity: true,
41+
hue: true,
42+
43+
// Input / output Options
44+
interaction: {
45+
hex: true,
46+
input: true,
47+
clear: true,
48+
save: true
49+
}
50+
}
51+
});
52+
53+
pickr.on('save', (color, instance) => {
54+
console.log('Event: "save"', color, instance);
55+
colour = color.toHEXA().toString();
56+
console.log("Colour is now", colour);
57+
});
58+
}
59+
60+
61+
onMount(() => {
62+
createPickr(picker)
63+
// const pickr = Pickr.create({
64+
// el: picker,
65+
// theme: 'nano', // or 'monolith', or 'nano'
66+
// container: container,
67+
68+
// swatches: [
69+
// 'rgba(244, 67, 54, 1)',
70+
// 'rgba(233, 30, 99, 0.95)',
71+
// 'rgba(156, 39, 176, 0.9)',
72+
// 'rgba(103, 58, 183, 0.85)',
73+
// 'rgba(63, 81, 181, 0.8)',
74+
// 'rgba(33, 150, 243, 0.75)',
75+
// 'rgba(3, 169, 244, 0.7)',
76+
// 'rgba(0, 188, 212, 0.7)',
77+
// 'rgba(0, 150, 136, 0.75)',
78+
// 'rgba(76, 175, 80, 0.8)',
79+
// 'rgba(139, 195, 74, 0.85)',
80+
// 'rgba(205, 220, 57, 0.9)',
81+
// 'rgba(255, 235, 59, 0.95)',
82+
// 'rgba(255, 193, 7, 1)'
83+
// ],
84+
85+
// components: {
86+
87+
// // Main components
88+
// preview: true,
89+
// opacity: true,
90+
// hue: true,
91+
92+
// // Input / output Options
93+
// interaction: {
94+
// hex: true,
95+
// input: true,
96+
// clear: true,
97+
// save: true
98+
// }
99+
// }
100+
// });
101+
102+
// pickr.on('save', (color, instance) => {
103+
// console.log('Event: "save"', color, instance);
104+
// colour = color.toHEXA().toString();
105+
// console.log("Colour is now", colour);
106+
// });
107+
});
108+
export let commitExpression
109+
110+
let expData = {
111+
body: "",
112+
background: []
113+
};
114+
115+
const addPicker = () => {
116+
const c = '#9C27B0E6'
117+
const i = index += 1
118+
pickers.push({'index': i, 'color': c})
119+
pickers = pickers
120+
console.log("addPicker clicked", pickers)
121+
}
122+
123+
afterUpdate(() => {
124+
console.log("afterUpdate")
125+
})
126+
</script>
127+
128+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/themes/nano.min.css"/> <!-- 'nano' theme -->
129+
130+
<div class="container" id="exp_container" bind:this={container} style="--theme-color: {colour}">
131+
<div class="typings">
132+
<textarea bind:value={expData.body} />
133+
</div>
134+
<div class="clickings">
135+
<div class="picker-container">
136+
<span>Pickers</span>
137+
<div class="pickers">
138+
{#each pickers as pickerObj, index (pickerObj.index)}
139+
<span>Picker {pickerObj.index}</span>
140+
<div bind:this={picker}></div>
141+
{/each}
142+
<button on:click={addPicker}>+</button>
143+
</div>
144+
</div>
145+
146+
<div class="button">
147+
<button on:click={()=>commitExpression(JSON.stringify(expData))}>Commit</button>
148+
</div>
149+
</div>
150+
</div>
151+
152+
153+
<style lang="scss">
154+
.container {
155+
background-color: var(--theme-color);
156+
width: 80%;
157+
height: 20rem;
158+
display: flex;
159+
flex-flow: column nowrap;
160+
justify-content: space-evenly;
161+
align-items: center;
162+
margin: 35% auto;
163+
border-radius: 15px;
164+
color: #fff;
165+
.typings {
166+
width: 55%;
167+
height: 40%;
168+
textarea {
169+
width: 100%;
170+
height: 100%;
171+
color: #fff;
172+
background: rgba(0.5,0.5,0.5,0.4);
173+
cursor: text;
174+
caret-color: #fff;
175+
text-align: center;
176+
font-size: 1.4rem;
177+
border-radius: 15px;
178+
&:focus {
179+
outline: none;
180+
border: 1px solid #fff;
181+
}
182+
}
183+
}
184+
.clickings {
185+
display: flex;
186+
justify-content: space-evenly;
187+
align-items: center;
188+
width: 55%;
189+
190+
.picker-container {
191+
display: flex;
192+
flex-flow: column nowrap;
193+
align-items: center;
194+
width: 45%;
195+
span {
196+
font-size: 1.4rem;
197+
}
198+
.pickers {
199+
display: flex;
200+
justify-content: space-between;
201+
width: 100%;
202+
203+
button {
204+
width: 30px;
205+
height: 30px;
206+
border-radius: 50%;
207+
background: rgba(0.5,0.5,0.5,0.4);
208+
color: #fff;
209+
cursor: pointer;
210+
outline: none;
211+
font-size: 1.4rem;
212+
&:hover {
213+
border: 1px solid #fff;
214+
}
215+
}
216+
}
217+
}
218+
.button {
219+
width: 35%;
220+
button {
221+
width: 100%;
222+
padding: 0.5rem 1rem;
223+
border-radius: 15px;
224+
cursor: pointer;
225+
background: rgba(0.5, 0.5, 0.5, 0.4);
226+
border: none;
227+
color: #fff;
228+
font-size: 1.4rem;
229+
&:hover {
230+
border: 1px solid #fff;
231+
}
232+
}
233+
}
234+
}
235+
}
236+
</style>

‎Icon.svelte‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<svelte:options tag={null}/>
2+
3+
<script lang="ts">
4+
import type Expression from "ad4m/Expression";
5+
export let expression: Expression
6+
</script>
7+
8+
<div class="container">
9+
{#if expression}
10+
<!-- <span class="header">Author:</span><span class="value">{expression.author}</span>
11+
<span class="header">Timestamp:</span><span class="value">{expression.timestamp}</span> -->
12+
<input disabled bind:value={expression.data}>
13+
{/if}
14+
</div>
15+
16+
17+
<style>
18+
.container {
19+
color: burlywood;
20+
width: 400px;
21+
height: 300px;
22+
}
23+
24+
input {
25+
width: 100%;
26+
height: 300px;
27+
color: black;
28+
background: yellowgreen;
29+
text-align: center;
30+
font-size: 20px;
31+
}
32+
</style>

‎README.md‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1 @@
11
# Short-Form-Expression
2-
Holochain DNA that implements the Expression [trait](https://github.com/juntofoundation/Holochain-Trait-Definitions#expressions) for ShortForm Junto Expressions.

‎Settings.svelte‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<svelte:options tag={null}/>
2+
3+
<script lang="ts">
4+
export let settings: object
5+
</script>
6+
7+
<div class="container">
8+
{#if settings }
9+
Dont need custom settings...
10+
{:else}
11+
Loading...
12+
{/if}
13+
</div>

‎SettingsUI.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import type { SettingsUI } from "@perspect3vism/ad4m/Language";
2+
import SettingsIcon from './build/SettingsIcon.js';
3+
4+
export class JuntoSettingsUI implements SettingsUI {
5+
settingsIcon(): string {
6+
return SettingsIcon
7+
}
8+
}

0 commit comments

Comments
 (0)