Skip to content

Commit

Permalink
wip screens
Browse files Browse the repository at this point in the history
  • Loading branch information
@heapwolf
heapwolf committed Apr 1, 2024
1 parent 0d6b946 commit f52b6be
Show file tree
Hide file tree
Showing 6 changed files with 130 additions and 105 deletions.
14 changes: 7 additions & 7 deletions src/components/subscribe.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,22 +26,22 @@ export class DialogSubscribe extends TonicDialog {
const coInput = this.querySelector('#subscribe-shared-secret')
const url = new URL(coInput.value.trim())

const bundleId = url.searchParams.get('id')
const sharedSecret = url.searchParams.get('secret')

// union://foo?id=com.demo.project&org=test
// union://com.demo.project&secret=foo

if (!bundleId) {
if (!sharedSecret) {
notifications.create({
type: 'error',
title: 'Error',
message: 'Invalid Project Link: expected property "id".'
message: 'Invalid Project Link: expected property "secret".'
})

super.hide()
return
}

const sharedSecret = url.hostname
const bundleId = url.hostname
const clusterId = await sha256('union-app-studio', { bytes: true })
const sharedKey = await Encryption.createSharedKey(sharedSecret)
const derivedKeys = await Encryption.createKeyPair(sharedKey)
Expand Down Expand Up @@ -87,13 +87,13 @@ export class DialogSubscribe extends TonicDialog {
</header>
<main>
<p>
Enter the unique link for the project you want to subscribe to. You will receive updates as "patch requests".
Enter the unique link for the project you want to subscribe to. It may take up to several minutes to acquire all updates. Future updates may arrive in the form of "patch requests".
</p>
<tonic-input
id="subscribe-shared-secret"
label="Project Link"
placeholder="union://foo?id=com.beep.boop&org=bar"
placeholder="union://com.beep.boop&secret=d3adc0de..."
spellcheck="false"
value=""
width="100%"
Expand Down
24 changes: 16 additions & 8 deletions src/css/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,17 @@ body.no-labels label {
display: none;
}

.empty-state {
display: grid;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}

tonic-accordion h3 {
text-transform: uppercase;
margin: 16px 14px 6px;
Expand Down Expand Up @@ -85,15 +96,12 @@ tonic-split-top {

tonic-tab-panel {
position: absolute;
top: 2px;
left: 2px;
bottom: 2px;
right: 2px;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: var(--tonic-background);
}

tonic-tab-panel {
top: 40px;
padding: 6%
}

#options .option {
Expand Down
7 changes: 6 additions & 1 deletion src/css/view-home.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,11 @@ view-home.show {
opacity: 1;
}

view-home header span {
width: 100%;
text-align: center;
}

view-home iframe {
border: none;
height: 280px;
Expand Down Expand Up @@ -79,7 +84,7 @@ view-home section.hero {
}

view-home tonic-tabs {
margin-left: -6px;
margin: auto;
}

view-home tonic-tab a {
Expand Down
9 changes: 5 additions & 4 deletions src/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -334,6 +334,7 @@ class AppView extends Tonic {
try {
await exec('ssc init', { cwd: project.path })
await exec('git init', { cwd: project.path })
await exec('git add .; git commit -m "first" -a;', { cwd: project.path })
} catch (err) {
console.error(err)
}
Expand Down Expand Up @@ -744,15 +745,15 @@ class AppView extends Tonic {
<tonic-split id="split-input" type="horizontal">
<tonic-split-top height="80%">
<app-editor id="editor" parent=${this}></app-editor>
<view-home id="view-home" parent=${this}></view-home>
<view-project-summary id="project-summary" parent=${this}></view-project-summary>
<view-image-preview id="image-preview" parent=${this}></view-image-preview>
</tonic-split-top>
<tonic-split-bottom height="20%">
<app-terminal id="app-terminal" parent=${this}></app-terminal>
</tonic-split-bottom>
</tonic-split>
<view-home id="view-home" parent=${this}></view-home>
<view-image-preview id="image-preview" parent=${this}></view-image-preview>
<view-project-summary id="project-summary" parent=${this}></view-project-summary>
</tonic-split-right>
</tonic-split>
</tonic-split-left>
Expand Down
162 changes: 78 additions & 84 deletions src/views/home.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,93 +93,87 @@ class ViewHome extends Tonic {

return this.html`
<header class="component">
<tonic-tabs selected="tab-news" id="home-tabs">
<tonic-tab
id="tab-news"
for="tab-panel-news"
>What's New</tonic-tab>
<tonic-tab
id="tab-docs"
for="tab-panel-docs"
>Docs</tonic-tab>
<tonic-tab
id="tab-profile"
for="tab-panel-profile"
>Profile</tonic-tab>
</tonic-tabs>
</header>
<div class="content">
<section class="hero">
<h1><b>Union</b> App Studio</h1>
</section>
<section class="main">
<tonic-tabs selected="tab-news" id="home-tabs">
<tonic-tab
id="tab-news"
for="tab-panel-news"
>What's New</tonic-tab>
<tonic-tab
id="tab-docs"
for="tab-panel-docs"
>Docs</tonic-tab>
<tonic-tab
id="tab-profile"
for="tab-panel-profile"
>Profile</tonic-tab>
</tonic-tabs>
<tonic-tab-panel id="tab-panel-news">
<section>
Content One
</section>
</tonic-tab-panel>
<tonic-tab-panel id="tab-panel-docs">
<section>
<tonic-input
width="100%"
placeholder="Search..."
id="docs-search"
symbol-id="search-icon"
position="right"
></tonic-input>
</section>
</tonic-tab-panel>
<tonic-tab-panel id="tab-panel-profile">
<section>
<tonic-profile-image
id="profile-image-example-editable"
size="120px"
src="${avatar}"
data-event="change-avatar"
editable="true"
>
</tonic-profile-image>
<div class="buttons">
<tonic-button
id="profile-regenerate-keypair"
data-event="regenerate-keypair"
width="180px"
>Regenerate Keys</tonic-button>
<!-- tonic-button
id="profile-upgrade"
data-event="upgrade"
width="140px"
>Upgrade</tonic-button -->
</div>
<tonic-textarea
label="Bio"
rows="4"
resize="none"
value="${bio}"
maxlength="512"
data-event="change-bio"
placeholder="Hi. I'm a hacker..."
id="profile-bio"
></tonic-textarea>
<tonic-textarea
label="Public Key (base64)"
rows="4"
resize="none"
value="${publicKey}"
readonly="true"
data-event-"copy-public-key"
id="profile-public-key"
></tonic-textarea>
</section>
</tonic-tab-panel>
</section>
<tonic-tab-panel id="tab-panel-news">
<div class="empty-state">
<span>No new items...</span>
</div>
</tonic-tab-panel>
<tonic-tab-panel id="tab-panel-docs">
<section>
<tonic-input
width="100%"
placeholder="Search..."
id="docs-search"
symbol-id="search-icon"
position="right"
></tonic-input>
</section>
</tonic-tab-panel>
<tonic-tab-panel id="tab-panel-profile">
<section>
<tonic-profile-image
id="profile-image-example-editable"
size="120px"
src="${avatar}"
data-event="change-avatar"
editable="true"
>
</tonic-profile-image>
<div class="buttons">
<tonic-button
id="profile-regenerate-keypair"
data-event="regenerate-keypair"
width="180px"
>Regenerate Keys</tonic-button>
<!-- tonic-button
id="profile-upgrade"
data-event="upgrade"
width="140px"
>Upgrade</tonic-button -->
</div>
<tonic-textarea
label="Bio"
rows="4"
resize="none"
value="${bio}"
maxlength="512"
data-event="change-bio"
placeholder="Hi. I'm a hacker..."
id="profile-bio"
></tonic-textarea>
<tonic-textarea
label="Public Key (base64)"
rows="4"
resize="none"
value="${publicKey}"
readonly="true"
data-event-"copy-public-key"
id="profile-public-key"
></tonic-textarea>
</section>
</tonic-tab-panel>
</div>
`
}
Expand Down
19 changes: 18 additions & 1 deletion src/views/project-summary.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,23 @@ class ViewProjectSummary extends Tonic {

const { event } = el.dataset

if (event === 'project-path') {
const dirHandle = await window.showDirectoryPicker({})
if (!dirHandle) return

console.log(dirHandle)

const app = this.props.parent
const currentProject = app.state.currentProject

const editor = document.querySelector('app-editor')
const project = document.querySelector('app-project')

const { data: dataProject } = await app.db.projects.get(currentProject.projectId)

// TODO(@heapwolf): set the path on the project object and refresh the project and editor components.
}

if (event === 'publish') {
const coDialogPublish = document.querySelector('dialog-publish')
if (coDialogPublish) coDialogPublish.show()
Expand Down Expand Up @@ -107,7 +124,7 @@ class ViewProjectSummary extends Tonic {
position="right"
spellcheck="false"
readonly="true"
value="union://${dataProject.sharedSecret}?id=${encodeURIComponent(dataProject.bundleId)}&org=${dataProject.org}"
value="union://${encodeURIComponent(dataProject.bundleId)}?secret=${dataProject.sharedSecret}"
></tonic-input>
<git-status id="publish" app=${app} parent=${this}>
Expand Down

0 comments on commit f52b6be

Please sign in to comment.