From f1c427eadc68dda553a1f7de3cf17d5d3587108c Mon Sep 17 00:00:00 2001
From: Adam Procter <adamprocter@researchnot.es>
Date: Thu, 13 Aug 2020 14:30:25 +0100
Subject: [PATCH] 0.1.19
updated to mobile (previously list view)
fixed IPFS support for media
updated packages
Slightly out of sync with Master now which I will need to address
---
CHANGELOG.md | 12 ++
app/package.json | 2 +-
app/src/components/UploadLayer.vue | 21 ++-
app/src/experimental/ModeToolbar.vue | 60 +++++----
app/src/experimental/PanZoomContainer.vue | 2 +-
app/src/router/index.js | 10 +-
app/src/views/List.vue | 157 ++++++++++++----------
7 files changed, 147 insertions(+), 117 deletions(-)
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 496c3f9..2358202 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,15 @@
+# 0.1.19
+
+_13th July 2020_
+
+### Changes
+
+- List view has be renamed mobile view and works better on smaller devices. Allow for quick capture of ideas whislt using a smaller screen (not perfect but better than before)
+
+### Fixed
+
+- IPFS Media is working (updated code for 0.49.0)
+
# 0.1.18
_2nd July 2020_
diff --git a/app/package.json b/app/package.json
index 4e539ec..70d471c 100644
--- a/app/package.json
+++ b/app/package.json
@@ -1,6 +1,6 @@
{
"name": "nodenogg.in",
- "version": "0.1.18",
+ "version": "0.1.19",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
diff --git a/app/src/components/UploadLayer.vue b/app/src/components/UploadLayer.vue
index 52759c1..a0f300b 100644
--- a/app/src/components/UploadLayer.vue
+++ b/app/src/components/UploadLayer.vue
@@ -9,12 +9,12 @@
ref="fileInput"
@change="onFileSelected"
/>
- <!-- <h1>{{ status }}</h1>
+ <h1>{{ status }}</h1>
<h2>ID: {{ id }}</h2>
- <h2>Agent version: {{ agentVersion }}</h2> -->
- <!--
+ <h2>Agent version: {{ agentVersion }}</h2>
+
<button type="button" @click="saveIPFS">Upload</button>
- <button type="button" @click="getIPFS">Get IPFS</button> -->
+ <button type="button" @click="getIPFS">Get IPFS</button>
<!-- {{ uploadready }} -->
<textarea id="ipfshash" v-model="copytext"></textarea>
<div class="btn-row">
@@ -103,13 +103,8 @@ export default {
async saveIPFS() {
try {
- for await (const result of node.add(this.selectedFile)) {
- //console.log(result.cid.string)
- this.fileContents = result
- // console.log(this.fileContents.path)
- // node.swarm.peers().then((a) => console.log(a))
- this.getIPFS()
- }
+ this.fileContents = await node.add(this.selectedFile)
+ this.getIPFS()
} catch (err) {
// Set error status text.
this.status = `Error: ${err}`
@@ -153,7 +148,7 @@ export default {
</script>
<style lang="css" scoped>
-.fileInput {
+/* .fileInput {
display: none;
}
@@ -163,5 +158,5 @@ textarea {
height: 0px;
width: 0px;
padding: 0px;
-}
+} */
</style>
diff --git a/app/src/experimental/ModeToolbar.vue b/app/src/experimental/ModeToolbar.vue
index 488e13e..f6e0c8d 100644
--- a/app/src/experimental/ModeToolbar.vue
+++ b/app/src/experimental/ModeToolbar.vue
@@ -113,33 +113,39 @@ export default {
<style scoped>
nav {
- position: fixed;
-
- bottom: 1em;
- left: 1em;
- display: flex;
- flex-wrap: wrap;
- align-items: center;
- justify-content: space-between;
-}
-button {
- border: none;
- width: 50px;
- height: 50px;
- padding: 0;
- margin: 0;
- margin-top: 1em;
- background: white;
- border-radius: 25px;
- display: flex;
- align-items: center;
- justify-content: center;
- color: white;
- outline: none;
- box-shadow: 0px 0px 0px 2px rgba(0, 0, 0, 0.1);
- margin-right: 10px;
+ display: none;
}
-button.active {
- background: rgb(30, 30, 30);
+
+@media (min-width: 450px) {
+ nav {
+ position: fixed;
+
+ bottom: 1em;
+ left: 1em;
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: space-between;
+ }
+ button {
+ border: none;
+ width: 50px;
+ height: 50px;
+ padding: 0;
+ margin: 0;
+ margin-top: 1em;
+ background: white;
+ border-radius: 25px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: white;
+ outline: none;
+ box-shadow: 0px 0px 0px 2px rgba(0, 0, 0, 0.1);
+ margin-right: 10px;
+ }
+ button.active {
+ background: rgb(30, 30, 30);
+ }
}
</style>
diff --git a/app/src/experimental/PanZoomContainer.vue b/app/src/experimental/PanZoomContainer.vue
index 2f258e4..9580d93 100644
--- a/app/src/experimental/PanZoomContainer.vue
+++ b/app/src/experimental/PanZoomContainer.vue
@@ -133,7 +133,7 @@ export default {
if (!this.interaction.origin) {
return
}
- // console.log('touch')
+ //console.log(e.touches.length)
e.preventDefault()
const isPinchAction =
e.touches.length == 2 && this.interaction.origin.points.length > 1
diff --git a/app/src/router/index.js b/app/src/router/index.js
index 7e5919b..f95e43f 100644
--- a/app/src/router/index.js
+++ b/app/src/router/index.js
@@ -13,6 +13,11 @@ export const routes = [
name: 'Home',
component: Home,
},
+ {
+ path: '/mobile',
+ name: 'Mobile',
+ component: List,
+ },
{
path: '/about',
name: 'About',
@@ -22,11 +27,6 @@ export const routes = [
component: () =>
import(/* webpackChunkName: "about" */ '../views/About.vue'),
},
- {
- path: '/list',
- name: 'List Test',
- component: List,
- },
// {
// path: '/test',
diff --git a/app/src/views/List.vue b/app/src/views/List.vue
index 30bb86e..36cf66a 100644
--- a/app/src/views/List.vue
+++ b/app/src/views/List.vue
@@ -2,7 +2,6 @@
<div id="listwrapper">
<!-- <div v-for="(posvalue, index) in configPositions" v-bind:key="index"> -->
<h1 class="mobile">Your nodes - list mode</h1>
- <h2>Testing Only</h2>
<!-- <OffLine
v-for="value in myNodes"
v-bind:key="value.node_id"
@@ -10,79 +9,92 @@
v-bind:nodetext="value.node_text"
@editTrue="(e) => editTrue(e)"
/> -->
+ <div v-if="clientset">
+ <div class="btn-row">
+ <BaseButton class="new" buttonClass="action" @click="addNode()"
+ >Create Node</BaseButton
+ >
+ </div>
- <form>
- <div>
- <p id="nodeid" :inner-html.prop="nodetext1 | marked"></p>
- <input
- type="text"
- v-model.trim="clientid"
- placeholder="device name"
- autocorrect="off"
- autocapitalize="none"
- ref="objectname"
- v-on:keyup.enter="setClient()"
- @focus="editTrue(true)"
- @blur="editTrue(false)"
- />
- <div class="btn-row">
- <BaseButton buttonClass="special" @click="setClient()"
- >Store</BaseButton
- >
+ <form>
+ <!-- <div v-if="posvalue.read_mode == false"> -->
+ <div
+ v-for="value in myNodes.slice().reverse()"
+ v-bind:key="value.node_id"
+ >
+ <textarea
+ @focus="editTrue(true)"
+ @blur="editTrue(false)"
+ autofocus
+ @input="editNode"
+ v-model="value.node_text"
+ :id="nodeid"
+ ref="nodetext"
+ placeholder="Idea goes here!"
+ ></textarea>
</div>
- </div>
- </form>
-
- <form>
- <div>
- <p id="nodeid" :inner-html.prop="nodetext2 | marked"></p>
- <input
- type="text"
- v-model.trim="localmicrocosm"
- placeholder="microcosm name"
- autocorrect="off"
- autocapitalize="none"
- autofocus
- v-on:keyup.enter="createMicrocosm()"
- @focus="editTrue(true)"
- @blur="editTrue(false)"
- />
- <div class="btn-row">
- <BaseButton buttonClass="special" @click="createMicrocosm(), letsGo()"
- >Create Microcosm</BaseButton
- >
+ </form>
+ </div>
+ <!-- // onboarding for list view -->
+ <div v-else>
+ <form>
+ <div>
+ <p id="nodeid" :inner-html.prop="nodetext1 | marked"></p>
+
+ <div v-if="name == false">
+ <input
+ type="text"
+ v-model.trim="clientid"
+ placeholder="device name"
+ autocorrect="off"
+ autocapitalize="none"
+ ref="objectname"
+ v-on:keyup.enter="setClient()"
+ @focus="editTrue(true)"
+ @blur="editTrue(false)"
+ />
+ <div class="btn-row">
+ <BaseButton buttonClass="special" @click="setClient()"
+ >Store</BaseButton
+ >
+ </div>
+ </div>
+ <div v-else>
+ <h4>Saved</h4>
+ </div>
</div>
- </div>
- </form>
- <div class="btn-row">
- <BaseButton class="new" buttonClass="action" @click="addNode()"
- >Create Node</BaseButton
- >
+ </form>
+
+ <form>
+ <div>
+ <p id="nodeid" :inner-html.prop="nodetext2 | marked"></p>
+ <div v-if="microcosm == false">
+ <input
+ type="text"
+ v-model.trim="localmicrocosm"
+ placeholder="microcosm name"
+ autocorrect="off"
+ autocapitalize="none"
+ autofocus
+ v-on:keyup.enter="createMicrocosm()"
+ @focus="editTrue(true)"
+ @blur="editTrue(false)"
+ />
+ <div class="btn-row">
+ <BaseButton
+ buttonClass="special"
+ @click="createMicrocosm(), letsGo()"
+ >Create Microcosm</BaseButton
+ >
+ </div>
+ </div>
+ <div v-else>
+ <h4>Loading...</h4>
+ </div>
+ </div>
+ </form>
</div>
- <form>
- <!-- <div v-if="posvalue.read_mode == false"> -->
- <div
- v-for="value in myNodes.slice().reverse()"
- v-bind:key="value.node_id"
- >
- <textarea
- @focus="editTrue(true)"
- @blur="editTrue(false)"
- autofocus
- @input="editNode"
- v-model="value.node_text"
- :id="nodeid"
- ref="nodetext"
- placeholder="Idea goes here!"
- ></textarea>
- </div>
- <!-- </div> -->
- <!-- <div v-if="posvalue.read_mode == true">
- <p class="read" :id="nodeid" :inner-html.prop="nodetext | marked"></p>
- </div> -->
- </form>
-
<ModeToolbar />
</div>
<!-- </div> -->
@@ -108,9 +120,10 @@ export default {
offline: false,
nodetext1:
'## What shall we call you ? 💥 \n First we need to connect this device to your ideas. This name is what allows you to create and edit your nodes and can be anything you like and this name is always anonymous.',
-
nodetext2:
'## Start those engines ! 🎠\n Now you can create your own microcosm to store your ideas and ask people to join you, either just tell them the name of the microcosm or share the alpha.nodenogg.in URL and add the ending; </br><em><b>/microcosm/nameofyourmicrocosm</b></em>',
+ name: false,
+ microcosm: false,
}
},
@@ -145,6 +158,7 @@ export default {
this.createMicrocosm()
this.setClient()
this.letsGo()
+ this.clientset = 'true'
}
},
@@ -165,13 +179,16 @@ export default {
createMicrocosm() {
this.$store.dispatch('createMicrocosm', this.localmicrocosm)
localStorage.setItem('mylastMicrocosm', this.localmicrocosm)
+ this.microcosm = true
},
setClient() {
this.$store.dispatch('setClient', this.clientid),
localStorage.setItem('myNNClient', this.clientid)
+ this.name = true
},
letsGo() {
+ this.clientset = !this.clientset
this.$emit('clientAdded')
},
--
GitLab