Skip to content

Commit

Permalink
Margins to gaps
Browse files Browse the repository at this point in the history
  • Loading branch information
@guillemcordoba
guillemcordoba committed Oct 16, 2023
1 parent 5eabfae commit 68e29b1
Show file tree
Hide file tree
Showing 20 changed files with 71 additions and 67 deletions.
8 changes: 4 additions & 4 deletions ...ebab_case coordinator_zome_manifest.name}}/elements/{{kebab_case collection_name}}.ts.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,19 +53,19 @@ export class {{pascal_case collection_name}} extends LitElement {

renderList(hashes: Array<{{referenceable.hash_type}}>) {
if (hashes.length === 0)
return html` <div class="column center-content">
return html` <div class="column center-content" style="gap: 16px;">
<sl-icon
.src=${wrapPathInSvg(mdiInformationOutline)}
style="color: grey; height: 64px; width: 64px; margin-bottom: 16px"
style="color: grey; height: 64px; width: 64px;"
></sl-icon
>
<span class="placeholder">${msg("No {{lower_case (plural referenceable.name)}} found")}</span>
</div>`;

return html`
<div style="display: flex; flex-direction: column; flex: 1">
<div class="column" style="flex: 1; gap: 16px;">
${hashes.map(hash =>
html`<{{kebab_case referenceable.name}}-summary .{{camel_case referenceable.name}}Hash=${hash} style="margin-bottom: 16px;"></{{kebab_case referenceable.name}}-summary>`
html`<{{kebab_case referenceable.name}}-summary .{{camel_case referenceable.name}}Hash=${hash}></{{kebab_case referenceable.name}}-summary>`
)}
</div>
`;
Expand Down
5 changes: 3 additions & 2 deletions ...se coordinator_zome_manifest.name}}/elements/create-{{kebab_case entry_type.name}}.ts.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -131,12 +131,13 @@ export class Create{{pascal_case entry_type.name}} extends LitElement {

<form
id="create-form"
style="display: flex; flex: 1; flex-direction: column;"
class="column"
style="flex: 1; gap: 16px;"
${onSubmit(fields => this.create{{pascal_case entry_type.name}}(fields))}
>
{{#each entry_type.fields}}
{{#if widget}}
<div style="margin-bottom: 16px;">
<div>
{{#if (not (eq cardinality "vector") )}}
{{> (concat field_type.type "/" widget "/edit/render") label=(title_case field_name) field_name=field_name required=(eq cardinality "single") }}
{{else}}
Expand Down
6 changes: 3 additions & 3 deletions ... (plural ..¡entry_type.name)}}-for-{{kebab_case linked_from.name}}.ts{{¡if}}{{¡each}}.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,16 +48,16 @@ export class {{pascal_case (plural ../entry_type.name)}}For{{pascal_case linked_

renderList(hashes: Array<{{#if ../entry_type.reference_entry_hash}}EntryHash{{else}}ActionHash{{/if}}>) {
if (hashes.length === 0)
return html` <div class="column center-content">
return html` <div class="column center-content" style="gap: 16px;">
<sl-icon
style="color: grey; height: 64px; width: 64px; margin-bottom: 16px"
style="color: grey; height: 64px; width: 64px;"
.src=${wrapPathInSvg(mdiInformationOutline)}
></sl-icon>
<span class="placeholder">${msg("No {{lower_case (plural ../entry_type.name)}} found for this {{lower_case linked_from.name}}")}</span>
</div>`;

return html`
<div style="display: flex; flex-direction: column">
<div style="display: flex; flex-direction: column" style="gap: 16px;">
${hashes.map(hash =>
html`<{{kebab_case ../entry_type.name}}-summary .{{camel_case ../entry_type.name}}Hash=${hash}></{{kebab_case ../entry_type.name}}-summary>`
)}
Expand Down
5 changes: 3 additions & 2 deletions ...fest.name}}/elements/{{#if crud.update}}edit-{{kebab_case entry_type.name}}.ts{{¡if}}.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,12 +122,13 @@ export class Edit{{pascal_case entry_type.name}} extends LitElement {
<span slot="header">${msg("Edit {{title_case entry_type.name}}")}</span>

<form
style="display: flex; flex: 1; flex-direction: column;"
class="column"
style="flex: 1; gap: 16px;"
${onSubmit(fields => this.update{{pascal_case entry_type.name}}(fields))}
>
{{#each entry_type.fields}}
{{#if widget}}
<div style="margin-bottom: 16px">
<div>
{{#if (not (eq cardinality "vector") )}}
{{> (concat field_type.type "/" widget "/edit/render") label=(title_case field_name) edit=true field_name=field_name required=(eq cardinality "single") default_value=(concat "this.currentRecord.entry." (snake_case field_name) ) }}
{{else}}
Expand Down
14 changes: 7 additions & 7 deletions ...se coordinator_zome_manifest.name}}/elements/{{kebab_case entry_type.name}}-detail.ts.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,25 +84,25 @@ export class {{pascal_case entry_type.name}}Detail extends LitElement {

renderDetail(entryRecord: EntryRecord<{{pascal_case entry_type.name}}>) {
return html`<sl-card>
<div slot="header" style="display: flex; flex-direction: row">
<div slot="header" class="row" style="gap: 8px;">
<span style="font-size: 18px; flex: 1;">${msg("{{title_case entry_type.name}}")}</span>

{{#if crud.update}}
<sl-icon-button style="margin-left: 8px" .src=${wrapPathInSvg(mdiPencil)} @click=${() => { this._editing = true; } }></sl-icon-button>
<sl-icon-button .src=${wrapPathInSvg(mdiPencil)} @click=${() => { this._editing = true; } }></sl-icon-button>
{{/if}}
{{#if crud.delete}}
<sl-icon-button style="margin-left: 8px" .src=${wrapPathInSvg(mdiDelete)} @click=${() => this.delete{{pascal_case entry_type.name}}()}></sl-icon-button>
<sl-icon-button .src=${wrapPathInSvg(mdiDelete)} @click=${() => this.delete{{pascal_case entry_type.name}}()}></sl-icon-button>
{{/if}}
</div>

<div style="display: flex; flex-direction: column">
<div class="column" style="gap: 16px;">

{{#each entry_type.fields}}
{{#if widget}}
<div style="display: flex; flex-direction: column; margin-bottom: 16px">
<span style="margin-bottom: 8px"><strong>${msg("{{title_case field_name}}")}</strong></span>
<div class="column" style="gap: 8px;">
<span><strong>${msg("{{title_case field_name}}")}</strong></span>
{{#if (not (eq cardinality "vector") )}}
<span style="white-space: pre-line">{{> (concat field_type.type "/" widget "/detail/render") field_name=field_name variable_to_read=(concat "entryRecord.entry." (snake_case field_name) ) }}</span>
<span style="white-space: pre-line">{{> (concat field_type.type "/" widget "/detail/render") field_name=field_name variable_to_read=(concat "entryRecord.entry." (snake_case field_name) ) }}</span>
{{else}}
{{> Vec/detail/render variable_to_read=(concat "entryRecord.entry." (snake_case field_name) ) field_name=field_name field_type=field_type widget=widget }}
{{/if}}
Expand Down
8 changes: 4 additions & 4 deletions ...e coordinator_zome_manifest.name}}/elements/{{kebab_case entry_type.name}}-summary.ts.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,14 +49,14 @@ export class {{pascal_case entry_type.name}}Summary extends LitElement {

renderSummary(entryRecord: EntryRecord<{{pascal_case entry_type.name}}>) {
return html`
<div style="display: flex; flex-direction: column">
<div class="column" style="gap: 16px">

{{#each entry_type.fields}}
{{#if widget}}
<div style="display: flex; flex-direction: column; margin-bottom: 16px">
<span style="margin-bottom: 8px"><strong>${msg("{{title_case field_name}}")}</strong></span>
<div class="column" style="gap: 8px">
<span><strong>${msg("{{title_case field_name}}")}</strong></span>
{{#if (not (eq cardinality "vector") )}}
<span style="white-space: pre-line">{{> (concat field_type.type "/" widget "/detail/render") field_name=field_name variable_to_read=(concat "entryRecord.entry." (snake_case field_name) ) }}</span>
<span style="white-space: pre-line">{{> (concat field_type.type "/" widget "/detail/render") field_name=field_name variable_to_read=(concat "entryRecord.entry." (snake_case field_name) ) }}</span>
{{else}}
{{> Vec/detail/render variable_to_read=(concat "entryRecord.entry." (snake_case field_name) ) field_name=field_name field_type=field_type widget=widget }}
{{/if}}
Expand Down
6 changes: 3 additions & 3 deletions .templates/app/field-types/Vec/edit/render.hbs
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<div style="display: flex; flex-direction: column">
<div class="column" style="gap: 8px">
<span>${msg("{{title_case field_name}}")}</span>

${repeat(this._{{camel_case field_name}}Fields, i => i, index => html`<div class="row" style="align-items: center; margin-top: 8px">{{> (concat field_type.type "/" widget "/edit/render") edit=edit label="" field_name=field_name default_value=(concat "this.currentRecord.entry." (snake_case field_name) "[index]") }} <sl-icon-button .src=${wrapPathInSvg(mdiDelete)} @click=${() => { this._{{camel_case field_name}}Fields = this._{{camel_case field_name}}Fields.filter(i => i !== index) } }></sl-icon-button></div>`)}
<sl-button style="margin-top: 8px" @click=${() => { this._{{camel_case field_name}}Fields = [...this._{{camel_case field_name}}Fields, Math.max(...this._{{camel_case field_name}}Fields) + 1]; } }>${msg("Add {{title_case field_name}}")}</sl-button>
${repeat(this._{{camel_case field_name}}Fields, i => i, index => html`<div class="row" style="align-items: center;">{{> (concat field_type.type "/" widget "/edit/render") edit=edit label="" field_name=field_name default_value=(concat "this.currentRecord.entry." (snake_case field_name) "[index]") }} <sl-icon-button .src=${wrapPathInSvg(mdiDelete)} @click=${() => { this._{{camel_case field_name}}Fields = this._{{camel_case field_name}}Fields.filter(i => i !== index) } }></sl-icon-button></div>`)}
<sl-button @click=${() => { this._{{camel_case field_name}}Fields = [...this._{{camel_case field_name}}Fields, Math.max(...this._{{camel_case field_name}}Fields) + 1]; } }>${msg("Add {{title_case field_name}}")}</sl-button>
</div>
8 changes: 4 additions & 4 deletions ...(plural from_referenceable.name)}}-for-{{kebab_case to_referenceable.name}}.ts{{¡if}}.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,19 +52,19 @@ export class {{pascal_case (plural from_referenceable.name)}}For{{pascal_case to

renderList(hashes: Array<{{from_referenceable.hash_type}}>) {
if (hashes.length === 0)
return html` <div class="column center-content">
return html` <div class="column center-content" style="gap: 16px;">
<sl-icon
style="color: grey; height: 64px; width: 64px; margin-bottom: 16px"
style="color: grey; height: 64px; width: 64px;"
.src=${wrapPathInSvg(mdiInformationOutline)}
></sl-icon>
<span class="placeholder">${msg("No {{lower_case (plural from_referenceable.name)}} found for this {{lower_case to_referenceable.name}}")}</span>
</div>`;

return html`
<div style="display: flex; flex-direction: column">
<div class="column" style="gap: 16px;">
${hashes.map(hash =>
{{#if (not (eq from_referenceable.hash_type "AgentPubKey") )}}
html`<{{kebab_case from_referenceable.name}}-summary .{{camel_case from_referenceable.name}}Hash=${hash} style="margin-bottom: 16px;"></{{kebab_case from_referenceable.name}}-summary>`
html`<{{kebab_case from_referenceable.name}}-summary .{{camel_case from_referenceable.name}}Hash=${hash}></{{kebab_case from_referenceable.name}}-summary>`
{{else}}
html`<agent-avatar .agentPubKey=${hash}></agent-avatar>`
{{/if}}
Expand Down
8 changes: 4 additions & 4 deletions ...(plural to_referenceable.name)}}-for-{{kebab_case from_referenceable.name}}.ts{{¡if}}.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,19 +53,19 @@ export class {{pascal_case (plural to_referenceable.name)}}For{{pascal_case from

renderList(hashes: Array<{{to_referenceable.hash_type}}>) {
if (hashes.length === 0)
return html` <div class="column center-content">
return html` <div class="column center-content" style="gap: 16px;">
<sl-icon
style="color: grey; height: 64px; width: 64px; margin-bottom: 16px"
style="color: grey; height: 64px; width: 64px;"
.src=${wrapPathInSvg(mdiInformationOutline)}
></sl-icon>
<span class="placeholder">${msg("No {{lower_case (plural to_referenceable.name)}} found for this {{lower_case from_referenceable.name}}")}</span>
</div>`;

return html`
<div style="display: flex; flex-direction: column">
<div class="column" style="gap: 16px;">
${hashes.map(hash =>
{{#if (not (eq to_referenceable.hash_type "AgentPubKey") )}}
html`<{{kebab_case to_referenceable.name}}-summary .{{camel_case to_referenceable.name}}Hash=${hash} style="margin-bottom: 16px;" ></{{kebab_case to_referenceable.name}}-summary>`
html`<{{kebab_case to_referenceable.name}}-summary .{{camel_case to_referenceable.name}}Hash=${hash}></{{kebab_case to_referenceable.name}}-summary>`
{{else}}
html`<agent-avatar .agentPubKey=${hash}></agent-avatar>`
{{/if}}
Expand Down
2 changes: 1 addition & 1 deletion .templates/app/web-app/package.json.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
"start": "AGENTS=2 npm run network",
"network": "hc s clean && npm run build:happ && UI_PORT=8888 concurrently -k \"npm start -w ui\" \"npm run launch:happ\" \"holochain-playground\"",
"test": "npm run build:happ && cargo nextest run -j 1 && npm test -w tests",
"launch:happ": "echo \"pass\" | RUST_LOG=warn hc launch --piped -n $AGENTS workdir/{{app_name}}.happ --ui-port $UI_PORT network mdns",
"launch:happ": "echo \"pass\" | RUST_LOG=warn hc launch --piped -n $AGENTS workdir/{{app_name}}.happ --ui-port $UI_PORT network -b https://bootstrap.holo.host webrtc wss://signal.holo.host",
"package": "npm run build:happ && npm run package -w ui && hc web-app pack workdir --recursive",
"build:happ": "npm run build:zomes && hc app pack workdir --recursive",
"build:zomes": "CARGO_TARGET_DIR=target cargo build --release --target wasm32-unknown-unknown"
Expand Down
8 changes: 4 additions & 4 deletions .templates/module/collection/ui/src/elements/{{kebab_case collection_name}}.ts.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,19 +53,19 @@ export class {{pascal_case collection_name}} extends LitElement {

renderList(hashes: Array<{{referenceable.hash_type}}>) {
if (hashes.length === 0)
return html` <div class="column center-content">
return html` <div class="column center-content" style="gap: 16px;">
<sl-icon
.src=${wrapPathInSvg(mdiInformationOutline)}
style="color: grey; height: 64px; width: 64px; margin-bottom: 16px"
style="color: grey; height: 64px; width: 64px;"
></sl-icon
>
<span class="placeholder">${msg("No {{lower_case (plural referenceable.name)}} found")}</span>
</div>`;

return html`
<div style="display: flex; flex-direction: column; flex: 1">
<div class="column" style="gap: 16px; flex: 1">
${hashes.map(hash =>
html`<{{kebab_case referenceable.name}}-summary .{{camel_case referenceable.name}}Hash=${hash} style="margin-bottom: 16px;"></{{kebab_case referenceable.name}}-summary>`
html`<{{kebab_case referenceable.name}}-summary .{{camel_case referenceable.name}}Hash=${hash}></{{kebab_case referenceable.name}}-summary>`
)}
</div>
`;
Expand Down
5 changes: 3 additions & 2 deletions .templates/module/entry-type/ui/src/elements/create-{{kebab_case entry_type.name}}.ts.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -131,12 +131,13 @@ export class Create{{pascal_case entry_type.name}} extends LitElement {

<form
id="create-form"
style="display: flex; flex: 1; flex-direction: column;"
class="column"
style="flex: 1; gap: 16px;"
${onSubmit(fields => this.create{{pascal_case entry_type.name}}(fields))}
>
{{#each entry_type.fields}}
{{#if widget}}
<div style="margin-bottom: 16px;">
<div>
{{#if (not (eq cardinality "vector") )}}
{{> (concat field_type.type "/" widget "/edit/render") label=(title_case field_name) field_name=field_name required=(eq cardinality "single") }}
{{else}}
Expand Down
4 changes: 2 additions & 2 deletions ... (plural ..¡entry_type.name)}}-for-{{kebab_case linked_from.name}}.ts{{¡if}}{{¡each}}.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,9 +48,9 @@ export class {{pascal_case (plural ../entry_type.name)}}For{{pascal_case linked_

renderList(hashes: Array<{{#if ../entry_type.reference_entry_hash}}EntryHash{{else}}ActionHash{{/if}}>) {
if (hashes.length === 0)
return html` <div class="column center-content">
return html` <div class="column center-content" style="gap: 16px;">
<sl-icon
style="color: grey; height: 64px; width: 64px; margin-bottom: 16px"
style="color: grey; height: 64px; width: 64px;"
.src=${wrapPathInSvg(mdiInformationOutline)}
></sl-icon>
<span class="placeholder">${msg("No {{lower_case (plural ../entry_type.name)}} found for this {{lower_case linked_from.name}}")}</span>
Expand Down
5 changes: 3 additions & 2 deletions ...type/ui/src/elements/{{#if crud.update}}edit-{{kebab_case entry_type.name}}.ts{{¡if}}.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,12 +122,13 @@ export class Edit{{pascal_case entry_type.name}} extends LitElement {
<span slot="header">${msg("Edit {{title_case entry_type.name}}")}</span>

<form
style="display: flex; flex: 1; flex-direction: column;"
class="column"
style="flex: 1; gap: 16px;"
${onSubmit(fields => this.update{{pascal_case entry_type.name}}(fields))}
>
{{#each entry_type.fields}}
{{#if widget}}
<div style="margin-bottom: 16px">
<div>
{{#if (not (eq cardinality "vector") )}}
{{> (concat field_type.type "/" widget "/edit/render") label=(title_case field_name) edit=true field_name=field_name required=(eq cardinality "single") default_value=(concat "this.currentRecord.entry." (snake_case field_name) ) }}
{{else}}
Expand Down
14 changes: 7 additions & 7 deletions .templates/module/entry-type/ui/src/elements/{{kebab_case entry_type.name}}-detail.ts.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,25 +85,25 @@ export class {{pascal_case entry_type.name}}Detail extends LitElement {
renderDetail(entryRecord: EntryRecord<{{pascal_case entry_type.name}}>) {
return html`
<sl-card>
<div slot="header" style="display: flex; flex-direction: row">
<div slot="header" class="row" style="gap: 8px">
<span style="font-size: 18px; flex: 1;">${msg("{{title_case entry_type.name}}")}</span>

{{#if crud.update}}
<sl-icon-button style="margin-left: 8px" .src=${wrapPathInSvg(mdiPencil)} @click=${() => { this._editing = true; } }></sl-icon-button>
<sl-icon-button .src=${wrapPathInSvg(mdiPencil)} @click=${() => { this._editing = true; } }></sl-icon-button>
{{/if}}
{{#if crud.delete}}
<sl-icon-button style="margin-left: 8px" .src=${wrapPathInSvg(mdiDelete)} @click=${() => this.delete{{pascal_case entry_type.name}}()}></sl-icon-button>
<sl-icon-button .src=${wrapPathInSvg(mdiDelete)} @click=${() => this.delete{{pascal_case entry_type.name}}()}></sl-icon-button>
{{/if}}
</div>

<div style="display: flex; flex-direction: column">
<div class="column" style="gap: 16px;">

{{#each entry_type.fields}}
{{#if widget}}
<div style="display: flex; flex-direction: column; margin-bottom: 16px">
<span style="margin-bottom: 8px"><strong>${msg("{{title_case field_name}}")}</strong></span>
<div class="column" style="gap: 8px;">
<span><strong>${msg("{{title_case field_name}}")}</strong></span>
{{#if (not (eq cardinality "vector") )}}
<span style="white-space: pre-line">{{> (concat field_type.type "/" widget "/detail/render") field_name=field_name variable_to_read=(concat "entryRecord.entry." (snake_case field_name) ) }}</span>
<span style="white-space: pre-line">{{> (concat field_type.type "/" widget "/detail/render") field_name=field_name variable_to_read=(concat "entryRecord.entry." (snake_case field_name) ) }}</span>
{{else}}
{{> Vec/detail/render variable_to_read=(concat "entryRecord.entry." (snake_case field_name) ) field_name=field_name field_type=field_type widget=widget }}
{{/if}}
Expand Down
8 changes: 4 additions & 4 deletions .templates/module/entry-type/ui/src/elements/{{kebab_case entry_type.name}}-summary.ts.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,14 +49,14 @@ export class {{pascal_case entry_type.name}}Summary extends LitElement {

renderSummary(entryRecord: EntryRecord<{{pascal_case entry_type.name}}>) {
return html`
<div style="display: flex; flex-direction: column">
<div class="column" style="gap: 16px;">

{{#each entry_type.fields}}
{{#if widget}}
<div style="display: flex; flex-direction: column; margin-bottom: 16px">
<span style="margin-bottom: 8px"><strong>${msg("{{title_case field_name}}")}</strong></span>
<div class="column" style="gap: 8px">
<span><strong>${msg("{{title_case field_name}}")}</strong></span>
{{#if (not (eq cardinality "vector") )}}
<span style="white-space: pre-line">{{> (concat field_type.type "/" widget "/detail/render") field_name=field_name variable_to_read=(concat "entryRecord.entry." (snake_case field_name) ) }}</span>
<span style="white-space: pre-line">{{> (concat field_type.type "/" widget "/detail/render") field_name=field_name variable_to_read=(concat "entryRecord.entry." (snake_case field_name) ) }}</span>
{{else}}
{{> Vec/detail/render variable_to_read=(concat "entryRecord.entry." (snake_case field_name) ) field_name=field_name field_type=field_type widget=widget }}
{{/if}}
Expand Down
Loading

0 comments on commit 68e29b1

Please sign in to comment.