Skip to content

Commit

Permalink
update to we-applet 0.14, and clean up attacments ux
Browse files Browse the repository at this point in the history
  • Loading branch information
@zippy
zippy committed Jan 20, 2024
1 parent e43583f commit e68c460
Show file tree
Hide file tree
Showing 7 changed files with 83 additions and 51 deletions.
8 changes: 4 additions & 4 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion ui/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
"@holochain-open-dev/stores": "^0.8.3",
"@holochain-open-dev/utils": "^0.16.0",
"@holochain/client": "0.16",
"@lightningrodlabs/we-applet": "^0.12.2",
"@lightningrodlabs/we-applet": "^0.14.0",
"@lit/context": "^1.0.0",
"@lit/localize": "^0.12.0",
"lit": "^3.0.0",
Expand Down
68 changes: 40 additions & 28 deletions ui/src/elements/how-document.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,9 @@ import {
} from "@scoped-elements/material-web";

import '@holochain-open-dev/profiles/dist/elements/agent-avatar.js';
import '@shoelace-style/shoelace/dist/components/icon/icon.js';
import '@shoelace-style/shoelace/dist/components/button/button.js';

import { HowNewSectionDialog } from "./how-new-section-dialog";
import { HowSection } from "./how-section";
import { HowComment } from "./how-comment";
Expand Down Expand Up @@ -538,6 +541,7 @@ import { hrlB64WithContextToRaw, hrlWithContextToB64 } from "../util";
}
const docStats: DocumentStats = doc.getStats()
let affordancesHTML: Array<TemplateResult> = []
let attachmentsHTML: Array<TemplateResult> = []
if (!this.readOnly) {
this.controls.forEach(control=>{
affordancesHTML = affordancesHTML.concat(control.affordances(this._store.myAgentPubKey, doc, this._confirmElem!))
Expand All @@ -556,50 +560,45 @@ import { hrlB64WithContextToRaw, hrlWithContextToB64 } from "../util";
if (this._store.weClient) {
const isSteward = unit.stewards.includes(this._store.myAgentPubKey)
if (isSteward) {
affordancesHTML.push(html`
<div>
attachmentsHTML.push(html`
<svg-button
button="clipboard"
info="hrl to clipboard"
infoPosition="right"
button="faShare"
.click=${() => {
const attachment = { hrl: [this._store.dnaHash, decodeHashFromBase64(this.currentDocumentEh)], context: {} }
// @ts-ignore
this._store.weClient?.hrlToClipboard(attachment)
}}
></svg-button>
<svg-button
button="plus"
info="add attachment"
infoPosition="right"
button="link"
.click=${() => this.addAttachment()}
></svg-button>
</div>`)
`)
}
for (const mark of doc.marks.filter(m=>m.markType==MarkTypes.Attachment)) {
const attachment = JSON.parse(`${mark.mark}`)
affordancesHTML.push(html`
<div style="display:flex; align-items:center">
${until(this._store.weClient.entryInfo(hrlB64WithContextToRaw(attachment).hrl)
.then(res=> {
if (res) {
const entryInfo = res.entryInfo
return html`
${entryInfo.name}
<svg-button
button="paperclip"
.click=${()=>{
attachmentsHTML.push(html`
<div class="hrl-link">
<sl-button size="small"
.click=${()=>{
const hrl = hrlB64WithContextToRaw(attachment)
// @ts-ignore
this._store.weClient.openHrl(hrl.hrl, hrl.context)
this._store.weClient.openHrl(hrl)
}}
>
</svg-button>`
}}
),
html`...`
)}
>
${until(this._store.weClient.attachableInfo(hrlB64WithContextToRaw(attachment))
.then(res=> {
if (res) {
const attachableInfo = res.attachableInfo
return html`
<sl-icon style="margin-right:4px;" src=${attachableInfo.icon_src} ></sl-icon>${attachableInfo.name}
`
}}
),
html`...`
)}
</sl-button>
</div>
`)
}
Expand All @@ -616,6 +615,8 @@ import { hrlB64WithContextToRaw, hrlWithContextToB64 } from "../util";
tasksHTML = tasksHTML.concat(control.tasks(this._store.myAgentPubKey, doc))
})
return html`
${attachmentsHTML.length>0 ? html`<div class="attachments">${attachmentsHTML}</div>`:''}
<div id="header">
${doc.documentType == DocType.Collection ? html`<h3>Collection</h3>` :
html`
Expand Down Expand Up @@ -662,6 +663,17 @@ import { hrlB64WithContextToRaw, hrlWithContextToB64 } from "../util";
how-section {
width: 1000px;
}
.attachments {
justify-content: flex-end;
display:flex;
flex-direction: row;
align-items:center;
}
.hrl-link {
display:flex;
align-items:center;
background: 1px solid ligh
}
`,
];
}
Expand Down
4 changes: 3 additions & 1 deletion ui/src/elements/svg-icons.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,8 @@ export const SVG = {
collect: `<svg xmlns="http://www.w3.org/2000/svg" height="26" width="24" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M384 336H192c-8.8 0-16-7.2-16-16V64c0-8.8 7.2-16 16-16l140.1 0L400 115.9V320c0 8.8-7.2 16-16 16zM192 384H384c35.3 0 64-28.7 64-64V115.9c0-12.7-5.1-24.9-14.1-33.9L366.1 14.1c-9-9-21.2-14.1-33.9-14.1H192c-35.3 0-64 28.7-64 64V320c0 35.3 28.7 64 64 64zM64 128c-35.3 0-64 28.7-64 64V448c0 35.3 28.7 64 64 64H256c35.3 0 64-28.7 64-64V416H272v32c0 8.8-7.2 16-16 16H64c-8.8 0-16-7.2-16-16V192c0-8.8 7.2-16 16-16H96V128H64z"/></svg>`,
chevron: `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/></svg>`,
paperclip: `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M364.2 83.8c-24.4-24.4-64-24.4-88.4 0l-184 184c-42.1 42.1-42.1 110.3 0 152.4s110.3 42.1 152.4 0l152-152c10.9-10.9 28.7-10.9 39.6 0s10.9 28.7 0 39.6l-152 152c-64 64-167.6 64-231.6 0s-64-167.6 0-231.6l184-184c46.3-46.3 121.3-46.3 167.6 0s46.3 121.3 0 167.6l-176 176c-28.6 28.6-75 28.6-103.6 0s-28.6-75 0-103.6l144-144c10.9-10.9 28.7-10.9 39.6 0s10.9 28.7 0 39.6l-144 144c-6.7 6.7-6.7 17.7 0 24.4s17.7 6.7 24.4 0l176-176c24.4-24.4 24.4-64 0-88.4z"/></svg>`,
clipboard: `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="12" viewBox="0 0 384 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M280 64h40c35.3 0 64 28.7 64 64V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V128C0 92.7 28.7 64 64 64h40 9.6C121 27.5 153.3 0 192 0s71 27.5 78.4 64H280zM64 112c-8.8 0-16 7.2-16 16V448c0 8.8 7.2 16 16 16H320c8.8 0 16-7.2 16-16V128c0-8.8-7.2-16-16-16H304v24c0 13.3-10.7 24-24 24H192 104c-13.3 0-24-10.7-24-24V112H64zm128-8a24 24 0 1 0 0-48 24 24 0 1 0 0 48z"/></svg>`
clipboard: `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="12" viewBox="0 0 384 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M280 64h40c35.3 0 64 28.7 64 64V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V128C0 92.7 28.7 64 64 64h40 9.6C121 27.5 153.3 0 192 0s71 27.5 78.4 64H280zM64 112c-8.8 0-16 7.2-16 16V448c0 8.8 7.2 16 16 16H320c8.8 0 16-7.2 16-16V128c0-8.8-7.2-16-16-16H304v24c0 13.3-10.7 24-24 24H192 104c-13.3 0-24-10.7-24-24V112H64zm128-8a24 24 0 1 0 0-48 24 24 0 1 0 0 48z"/></svg>`,
link: `<svg width="20" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8 12C8 12.2652 8.10536 12.5196 8.29289 12.7071C8.48043 12.8946 8.73478 13 9 13H15C15.2652 13 15.5196 12.8946 15.7071 12.7071C15.8946 12.5196 16 12.2652 16 12C16 11.7348 15.8946 11.4804 15.7071 11.2929C15.5196 11.1054 15.2652 11 15 11H9C8.73478 11 8.48043 11.1054 8.29289 11.2929C8.10536 11.4804 8 11.7348 8 12ZM10 15H7C6.20435 15 5.44129 14.6839 4.87868 14.1213C4.31607 13.5587 4 12.7956 4 12C4 11.2044 4.31607 10.4413 4.87868 9.87868C5.44129 9.31607 6.20435 9 7 9H10C10.2652 9 10.5196 8.89464 10.7071 8.70711C10.8946 8.51957 11 8.26522 11 8C11 7.73478 10.8946 7.48043 10.7071 7.29289C10.5196 7.10536 10.2652 7 10 7H7C5.67392 7 4.40215 7.52678 3.46447 8.46447C2.52678 9.40215 2 10.6739 2 12C2 13.3261 2.52678 14.5979 3.46447 15.5355C4.40215 16.4732 5.67392 17 7 17H10C10.2652 17 10.5196 16.8946 10.7071 16.7071C10.8946 16.5196 11 16.2652 11 16C11 15.7348 10.8946 15.4804 10.7071 15.2929C10.5196 15.1054 10.2652 15 10 15ZM17 7H14C13.7348 7 13.4804 7.10536 13.2929 7.29289C13.1054 7.48043 13 7.73478 13 8C13 8.26522 13.1054 8.51957 13.2929 8.70711C13.4804 8.89464 13.7348 9 14 9H17C17.7956 9 18.5587 9.31607 19.1213 9.87868C19.6839 10.4413 20 11.2044 20 12C20 12.7956 19.6839 13.5587 19.1213 14.1213C18.5587 14.6839 17.7956 15 17 15H14C13.7348 15 13.4804 15.1054 13.2929 15.2929C13.1054 15.4804 13 15.7348 13 16C13 16.2652 13.1054 16.5196 13.2929 16.7071C13.4804 16.8946 13.7348 17 14 17H17C18.3261 17 19.5979 16.4732 20.5355 15.5355C21.4732 14.5979 22 13.3261 22 12C22 10.6739 21.4732 9.40215 20.5355 8.46447C19.5979 7.52678 18.3261 7 17 7Z" fill="black"/></svg>`,
faShare: `<svg width="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zM384 160c0 35.3-28.7 64-64 64c-15.4 0-29.5-5.4-40.6-14.5L194.1 256l85.3 46.5c11-9.1 25.2-14.5 40.6-14.5c35.3 0 64 28.7 64 64s-28.7 64-64 64s-64-28.7-64-64c0-2.5 .1-4.9 .4-7.3L174.5 300c-11.7 12.3-28.2 20-46.5 20c-35.3 0-64-28.7-64-64s28.7-64 64-64c18.3 0 34.8 7.7 46.5 20l81.9-44.7c-.3-2.4-.4-4.9-.4-7.3c0-35.3 28.7-64 64-64s64 28.7 64 64z"/></svg>`
}

17 changes: 8 additions & 9 deletions ui/src/holochain-app.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@ import {
} from '@holochain/client';
import { provide } from '@lit/context';
import { LitElement, css, html } from 'lit';
import { AsyncStatus, StoreSubscriber } from '@holochain-open-dev/stores';
import { customElement, property, state } from 'lit/decorators.js';

import {HowController} from "./elements/how-controller"
Expand Down Expand Up @@ -61,7 +60,7 @@ export class HolochainApp extends ScopedElementsMixin(LitElement) {
_profilesStore!: ProfilesStore;

renderType = RenderType.App
hrl: Hrl| undefined
hrlWithContext: HrlWithContext| undefined

async firstUpdated() {

Expand Down Expand Up @@ -111,19 +110,19 @@ export class HolochainApp extends ScopedElementsMixin(LitElement) {
throw new Error("Unknown applet-view block type:"+weClient.renderInfo.view.block);
}
break;
case "entry":
case "attachable":
switch (weClient.renderInfo.view.roleName) {
case "how":
switch (weClient.renderInfo.view.integrityZomeName) {
case "how_integrity":
switch (weClient.renderInfo.view.entryType) {
case "unitx":
this.renderType = RenderType.Unit
this.hrl = weClient.renderInfo.view.hrl
this.hrlWithContext = weClient.renderInfo.view.hrlWithContext
break;
case "document":
this.renderType = RenderType.Document
this.hrl = weClient.renderInfo.view.hrl
this.hrlWithContext = weClient.renderInfo.view.hrlWithContext
break;
default:
throw new Error("Unknown entry type:"+weClient.renderInfo.view.entryType);
Expand Down Expand Up @@ -182,10 +181,10 @@ export class HolochainApp extends ScopedElementsMixin(LitElement) {
<profile-prompt>
${this.renderType == RenderType.App ? html`
<how-controller></how-controller>`:""}
${this.renderType == RenderType.Unit && this.hrl ? html`
<how-unit .currentUnitEh=${encodeHashToBase64(this.hrl[1])}></how-unit>`:""}
${this.renderType == RenderType.Document && this.hrl ? html`
<how-document .currentDocumentEh=${encodeHashToBase64(this.hrl[1])}></how-document>`:""}
${this.renderType == RenderType.Unit && this.hrlWithContext ? html`
<how-unit .currentUnitEh=${encodeHashToBase64(this.hrlWithContext.hrl[1])}></how-unit>`:""}
${this.renderType == RenderType.Document && this.hrlWithContext ? html`
<how-document .currentDocumentEh=${encodeHashToBase64(this.hrlWithContext.hrl[1])}></how-document>`:""}
</profile-prompt>
<!-- <how-controller id="controller" dummy="{true}""></how-controller> -->
Expand Down
14 changes: 7 additions & 7 deletions ui/src/we.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { CellType, type AppAgentClient, type RoleName, type ZomeName, type DnaHash, decodeHashFromBase64, encodeHashToBase64 } from '@holochain/client';
import type { AppletHash, AppletServices, EntryInfo, Hrl, HrlWithContext, WeServices } from '@lightningrodlabs/we-applet';
import { type AppAgentClient, type RoleName, type ZomeName, decodeHashFromBase64, encodeHashToBase64 } from '@holochain/client';
import type { AppletHash, AppletServices, AttachableInfo, HrlWithContext, WeServices } from '@lightningrodlabs/we-applet';
import { HowStore } from './how.store';
import { getMyDna } from './util';

Expand All @@ -17,18 +17,18 @@ export const appletServices: AppletServices = {
// Types of UI widgets/blocks that this Applet supports
blockTypes: {
},
getEntryInfo: async (
getAttachableInfo: async (
appletClient: AppAgentClient,
roleName: RoleName,
integrityZomeName: ZomeName,
entryType: string,
hrl: Hrl
): Promise<EntryInfo | undefined> => {
hrlWithContext: HrlWithContext
): Promise<AttachableInfo | undefined> => {

const store = new HowStore(undefined, appletClient, "how")
switch (entryType) {
case "document": {
const docHash = hrl[1]
const docHash = hrlWithContext.hrl[1]
const doc = await store.pullDocument(docHash)
const title = doc.content.content[0].content
return {
Expand All @@ -38,7 +38,7 @@ export const appletServices: AppletServices = {
}
case "unitx":
const units = await store.pullUnits()
const unitHash = encodeHashToBase64(hrl[1])
const unitHash = encodeHashToBase64(hrlWithContext.hrl[1])

return {
icon_src: `data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M464 256A208 208 0 1 0 48 256a208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256z"/></svg>`,
Expand Down
21 changes: 20 additions & 1 deletion we_dev/config.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,12 @@
"instanceName": "notebooks",
"registeringAgent": 1,
"joiningAgents": [2]
},
{
"name": "kando",
"instanceName": "kando",
"registeringAgent": 1,
"joiningAgents": [2]
}
]
}
Expand Down Expand Up @@ -70,7 +76,20 @@
},
"source": {
"type": "https",
"url": "https://github.com/lightningrodlabs/notebooks/releases/download/v0.0.8/notebooks.webhapp"
"url": "https://github.com/lightningrodlabs/notebooks/releases/download/v0.0.13/notebooks.webhapp"
}
},
{
"name": "kando",
"subtitle": "kanban boards",
"description": "Real-time kanban boards based on syn",
"icon": {
"type": "filesystem",
"path": "/home/eric/code/metacurrency/holochain/kando/we_dev/kando_icon.png"
},
"source": {
"type": "https",
"url": "https://github.com/holochain-apps/kando/releases/download/v0.8.15/kando.webhapp"
}
}
]
Expand Down

0 comments on commit e68c460

Please sign in to comment.