diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4b078a1c7c76b6327f8ebf8747dc78fc80ea70dd..6484cb85995ea354c531559403b6db011aa58cbf 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,13 @@
+# 0.1.5
+
+_14th March 2020_
+
+### Changed
+
+- Added BaseButton Component to use for all buttons
+- removed CanvasLayer. and DeBug.vue no longer necessary as CanvasLayer is being rebuilt and Debug buttons all moved to ControlsLayer.vue
+- Minor CSS changes as well
+
# 0.1.4
_11th March 2020_
diff --git a/app/src/App.vue b/app/src/App.vue
index 921591abe6a88f30386d16d7f171377ab64256ef..c7243058d6393c9eb0c7c3ea3ab76dd5bb280776 100644
--- a/app/src/App.vue
+++ b/app/src/App.vue
@@ -17,6 +17,10 @@
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
+
+h1 {
+ font-size: 3em;
+}
img {
width: 100%;
}
diff --git a/app/src/components/BaseButton.vue b/app/src/components/BaseButton.vue
new file mode 100644
index 0000000000000000000000000000000000000000..26f783e338770507c65facd7fb92b8dcbf254504
--- /dev/null
+++ b/app/src/components/BaseButton.vue
@@ -0,0 +1,60 @@
+<template>
+ <div>
+ <!-- FIXME: Maybe need to use $attrs at somepoint -->
+ <button v-on="$listeners" class="button" :class="buttonClass">
+ <slot>DEFAULT</slot>
+ </button>
+ </div>
+</template>
+
+<script>
+export default {
+ props: {
+ buttonClass: {
+ type: String
+ }
+ }
+}
+</script>
+
+
+<style lang="css" scoped>
+button {
+ font-size: 1em;
+ touch-action: manipulation;
+ color: black;
+ border: none;
+ outline: none;
+ border-radius: 8px;
+ box-shadow: 1px 1px 1px #000000;
+ padding: 0.6em;
+ margin-right: 1em;
+}
+
+button.onboard {
+ font-size: 1.8em;
+ color: black;
+ border-style: solid;
+ border-width: 5px;
+ border-color: black;
+ border-radius: 50%;
+ background-color: white;
+ box-shadow: none;
+ height: 1.5em;
+ width: 1.5em;
+ padding: 0px;
+}
+
+button.danger {
+ color: white;
+ background-color: red;
+}
+
+button.action {
+ background-color: aqua;
+}
+
+button:active {
+ background-color: #cab6ff;
+}
+</style>
\ No newline at end of file
diff --git a/app/src/components/CanvasLayer.vue b/app/src/components/CanvasLayer.vue
deleted file mode 100644
index fb3183f035cc2f6504c15d5350ec30fa2058a00d..0000000000000000000000000000000000000000
--- a/app/src/components/CanvasLayer.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<template>
- <div class="canvas">
- <!-- canvas element draws the connection and nodes -->
- <canvas ref="canvas"></canvas>
- <!-- textarea is the cards/nodes -->
- </div>
-</template>
-
-<script>
-import { mapState } from 'vuex'
-import { draw } from './mixins/draw.js'
-
-var canvas = null
-
-export default {
- name: 'CanvasLayer',
- mixins: [draw],
-
- computed: mapState({
- configConnect: state => state.configConnect,
- configHandle: state => state.configHandle
- }),
-
- mounted() {
- canvas = this.$refs.canvas
- this.ctx = canvas.getContext('2d')
- this.draw()
- },
- methods: {
- clear(ctx) {
- ctx.clearRect(0, 0, canvas.width, canvas.height)
- }
- }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-canvas {
- border: 1px solid black;
-}
-</style>
diff --git a/app/src/components/ControlsLayer.vue b/app/src/components/ControlsLayer.vue
index e85e77afcf25fbbfdba3a2fc0201c390282c13a8..9a102b69fa224e6304637e49767ba5bfdd7452f4 100644
--- a/app/src/components/ControlsLayer.vue
+++ b/app/src/components/ControlsLayer.vue
@@ -1,11 +1,16 @@
<template>
<div class="controls">
<div class="btn-row">
- <!-- <button on:click="popups.showPane = !popups.showPane"> -->
- <button @click="addNode()">
- Create Node
- </button>
+ <BaseButton buttonClass="action" @click="addNode()">Create Node</BaseButton>
+ <BaseButton buttonClass="action" @click="removeLocal()">Join another microcosm</BaseButton>
+ <!-- <BaseButton @click="exportStorage()">Export my contributions</BaseButton>
+ <BaseButton buttonClass="danger" v-on:click="deleteClient">
+ Delete my contributions (inc. attachments) permanently
+ </BaseButton>
+ <BaseButton @click="handleConnection()">Online check</BaseButton>-->
</div>
+ <!-- TEMP: This was old code for possible pop up panes -->
+ <!-- <button on:click="popups.showPane = !popups.showPane"> -->
<!--
<div class="popup" v-if="popups.showPane">
<div class="popup-title">Pane Title</div>
@@ -17,14 +22,63 @@
</template>
<script>
+// This is for detecting offline issues
+var serverUrl = 'https://nodenogg.in'
+
export default {
- data() {
- return {}
+ mounted() {
+ window.addEventListener('online', this.handleConnection)
+ window.addEventListener('offline', this.handleConnection)
},
methods: {
addNode() {
this.$store.dispatch('addNode')
- // this.$store.dispatch('shortcutsState', true)
+ },
+ exportStorage: function() {
+ // Save local indexeddb document-store to JSON file
+ // or export state.notes to JSON file
+ },
+ removeLocal: function() {
+ localStorage.removeItem('myNNClient')
+ localStorage.removeItem('mylastMicrocosm')
+ // Hardcoded as when I set a URL had parameters the reload fails
+ //location.assign('https://alpha.nodenogg.in/')
+ //location.assign('http://localhost:8080/')
+ location.reload()
+ },
+
+ deleteClient() {
+ this.$store.dispatch('deleteClient')
+ },
+ handleConnection: function() {
+ var ref = this
+ if (navigator.onLine) {
+ this.isReachable(this.getServerUrl()).then(function(online) {
+ if (online) {
+ // handle online status
+ console.log('online')
+ location.reload()
+ } else {
+ console.log('no connectivity')
+ }
+ })
+ } else {
+ // handle offline status
+ console.log('offline')
+ ref.$emit('offlineTriggered')
+ }
+ },
+ isReachable: function(url) {
+ return fetch(url, { method: 'HEAD', mode: 'no-cors' })
+ .then(function(resp) {
+ return resp && (resp.ok || resp.type === 'opaque')
+ })
+ .catch(function(err) {
+ console.warn('[conn test failure]:', err)
+ })
+ },
+ getServerUrl: function() {
+ return serverUrl || window.location.origin
}
}
}
diff --git a/app/src/components/DeBug.vue b/app/src/components/DeBug.vue
deleted file mode 100644
index 34150a9fcb45f99c2a8dc724b7a29a3c414c5928..0000000000000000000000000000000000000000
--- a/app/src/components/DeBug.vue
+++ /dev/null
@@ -1,112 +0,0 @@
-<template>
- <div class="debug">
- <hr />
- <!-- <h2>Debug Options</h2> -->
- <h4>LAST UPDATE 1st March 2020.</h4>
- <p>You need to know what this button does before you press it.</p>
- <button class="danger" @click="removeLocal()">
- Join another microcosm
- </button>
- <!-- <button @click="exportStorage()">Export my contributions</button>
- <button class="danger" v-on:click="deleteClient">
- Delete my contributions (inc. attachments) permanently
- </button>
- <button @click="handleConnection()">Online check</button>-->
- <hr />
- </div>
-</template>
-
-<script>
-// This is for detecting offline issues
-var serverUrl = 'https://nodenogg.in'
-
-export default {
- mounted() {
- window.addEventListener('online', this.handleConnection)
- window.addEventListener('offline', this.handleConnection)
- },
- methods: {
- exportStorage: function() {
- // Save local indexeddb document-store to JSON file
- // or export state.notes to JSON file
- },
- removeLocal: function() {
- localStorage.removeItem('myNNClient')
- localStorage.removeItem('mylastMicrocosm')
- // Hardcoded as when I set a URL had parameters the reload fails
- //location.assign('https://alpha.nodenogg.in/')
- //location.assign('http://localhost:8080/')
- location.reload()
- },
-
- deleteClient() {
- this.$store.dispatch('deleteClient')
- },
- handleConnection: function() {
- var ref = this
- if (navigator.onLine) {
- this.isReachable(this.getServerUrl()).then(function(online) {
- if (online) {
- // handle online status
- console.log('online')
- location.reload()
- } else {
- console.log('no connectivity')
- }
- })
- } else {
- // handle offline status
- console.log('offline')
- ref.$emit('offlineTriggered')
- }
- },
- isReachable: function(url) {
- return fetch(url, { method: 'HEAD', mode: 'no-cors' })
- .then(function(resp) {
- return resp && (resp.ok || resp.type === 'opaque')
- })
- .catch(function(err) {
- console.warn('[conn test failure]:', err)
- })
- },
- getServerUrl: function() {
- return serverUrl || window.location.origin
- }
- }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-li:before {
- content: '';
-}
-.danger {
- background-color: red;
-}
-
-button {
- font-size: 1em;
- touch-action: manipulation;
- color: white;
- border: none;
- outline: none;
- border-radius: 8px;
- box-shadow: 1px 1px 1px #000000;
- padding: 0.6em;
-}
-
-hr {
- display: block;
- height: 1px;
- border: 0;
- border-top: 1px solid #ccc;
- margin: 1em 0;
- padding: 0;
-}
-
-b {
- background-color: yellow;
- padding-right: 2em;
-}
-</style>
diff --git a/app/src/components/NodesLayer.vue b/app/src/components/NodesLayer.vue
index 9b1b879264d6d364c805f971ac00df55e09c39d0..86713c9a04e5a0578d108e9ed1ecbf5bbaf0d50b 100644
--- a/app/src/components/NodesLayer.vue
+++ b/app/src/components/NodesLayer.vue
@@ -29,13 +29,11 @@
</div>
<h3>Reactions</h3>
<div v-for="(emojis, index) in configEmoji" :key="index">
- <p class="allemoji" v-if="nodeid == emojis.node_id">
- {{ emojis.emoji_text }}
- </p>
+ <p class="allemoji" v-if="nodeid == emojis.node_id">{{ emojis.emoji_text }}</p>
</div>
<p>markdown supported</p>
- <button class="danger" @click="deleteFlag()">Delete</button>
+ <BaseButton buttonClass="danger" @click="deleteFlag()">Delete</BaseButton>
</form>
</vue-draggable-resizable>
</div>
diff --git a/app/src/components/OnBoard.vue b/app/src/components/OnBoard.vue
index 10006eda92573a32356cd21bc42831016f6686bb..67a12a30c760fb3320c059dbddba466e74af3bb5 100644
--- a/app/src/components/OnBoard.vue
+++ b/app/src/components/OnBoard.vue
@@ -1,11 +1,12 @@
<template>
<div class="notlogged">
- <h1>nodenogg.in</h1>
<p>
nodenogg.in is a
<span>work in progress</span> collaborative co-creation research and
design thinking tool, read more details and links in the
- <a href="/#/about">about</a> section.
+ <a
+ href="/#/about"
+ >about</a> section.
</p>
<form v-show="parta">
@@ -26,7 +27,7 @@
autocapitalize="none"
autofocus
/>
- <button @click="createMicrocosm(), setFocus()">+</button>
+ <BaseButton buttonClass="onboard" @click="createMicrocosm(), setFocus()">+</BaseButton>
</form>
<form v-show="partb">
@@ -44,13 +45,13 @@
autocapitalize="none"
ref="objectname"
/>
- <button @click="setClient()">+</button>
+ <BaseButton buttonClass="onboard" @click="setClient()">+</BaseButton>
</form>
<form v-show="partc">
<h2>3</h2>
<h3>start</h3>
- <button @click="letsGo()">+</button>
+ <BaseButton buttonClass="onboard" @click="letsGo()">+</BaseButton>
</form>
</div>
</template>
@@ -106,47 +107,13 @@ export default {
</script>
<style lang="css" scoped>
-@import url('https://rsms.me/inter/inter.css');
-html {
- font-family: 'Inter', sans-serif;
-}
-@supports (font-variation-settings: normal) {
- html {
- font-family: 'Inter var', sans-serif;
- }
-}
-ul {
- font-family: 'Pica 10 Pitch W01';
- font-size: 16px;
- line-height: 20px;
-}
-
-li:before {
- content: '';
-}
-
-b {
- background-color: yellow;
- padding-right: 2em;
-}
-
-h1 {
- font-size: 3em;
-}
-
h1,
h2,
h3,
p {
- font-family: 'Inter var', sans-serif;
- color: black;
margin: 0px;
}
-p {
- margin-top: 2em;
-}
-
h2 {
float: right;
font-size: 3em;
@@ -172,24 +139,6 @@ input {
padding: 0.5em;
}
-button {
- font-size: 1.8em;
- color: black;
- border-style: solid;
- border-width: 5px;
- border-color: black;
- border-radius: 50%;
- background-color: white;
- box-shadow: none;
- height: 1.5em;
- width: 1.5em;
- padding: 0px;
-}
-
-button:active {
- background-color: #cab6ff;
-}
-
@media only screen and (min-width: 640px) {
/* Style adjustments for viewports that meet the condition */
diff --git a/app/src/main.js b/app/src/main.js
index f25345696713d1bf0ab7b359da6ec17acf417b2d..5c5e0b1c3149088ae5346e31854a9775065461a2 100644
--- a/app/src/main.js
+++ b/app/src/main.js
@@ -3,6 +3,11 @@ import App from './App.vue'
import router from './router'
import store from './store'
+// FIXME: Probably update this to the global import code from Vue
+// https://vuejs.org/v2/guide/components-registration.html#Automatic-Global-Registration-of-Base-Components
+import BaseButton from './components/BaseButton.vue'
+Vue.component('BaseButton', BaseButton)
+
Vue.config.productionTip = false
new Vue({
diff --git a/app/src/views/Home.vue b/app/src/views/Home.vue
index 12e27e540c389390aa9a8db52b5da7848ee288e9..42609fe0508c18863b629aba1b8fdc378ccb5809 100644
--- a/app/src/views/Home.vue
+++ b/app/src/views/Home.vue
@@ -1,6 +1,5 @@
<template>
<div class="home">
- <DeBug />
<div v-if="clientset">
<OtherNodeslayer
v-for="value in otherNodes"
@@ -16,8 +15,6 @@
v-bind:nodetext="value.node_text"
/>
- <CanvasLayer />
-
<ControlsLayer />
</div>
<OnBoard v-else @clientAdded="clientAdded()" />
@@ -27,10 +24,8 @@
<script>
// @ is an alias to /src
import OnBoard from '@/components/OnBoard.vue'
-import CanvasLayer from '@/components/CanvasLayer.vue'
import NodesLayer from '@/components/NodesLayer.vue'
import OtherNodeslayer from '@/components/OtherNodeslayer.vue'
-import DeBug from '@/components/DeBug.vue'
import ControlsLayer from '@/components/ControlsLayer.vue'
import { mapState } from 'vuex'
@@ -47,10 +42,8 @@ export default {
components: {
OnBoard,
- CanvasLayer,
NodesLayer,
OtherNodeslayer,
- DeBug,
ControlsLayer
},
computed: mapState({