diff --git a/.DS_Store b/.DS_Store
index 45a9dea3dd493872732dd723e18101c769848734..b0eee8d15eb1587d64d8230196b56ce74d0727bb 100644
Binary files a/.DS_Store and b/.DS_Store differ
diff --git a/.gitignore b/.gitignore
index 496ee2ca6a2f08396a4076fe43dedf3dc0da8b6d..45382360ad552e4351ad285b49f34dd53cd4c27c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1,2 @@
+
.DS_Store
\ No newline at end of file
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 324e4674ef4c08c4c4066601f1b6c5dc595e84b9..80d123a363acdb2465119dba5e66b1ab078c753d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,17 @@
+# 0.1.35
+
+_7th November 2020_
+
+### Changed
+
+- Edited a lot of the onboarding language
+
+### Added
+
+- Welcome information node is now part of collect mode too
+- Prompt for pressing leave icon
+- Tip when pressing download icon to paste into a node
+
# 0.1.34
_6th November 2020_
diff --git a/app/package.json b/app/package.json
index f006ec013d9ca066d5a001b71a8827afaf63700e..5a24f4cb370418f84e9b8eafcfc0edc61947c442 100644
--- a/app/package.json
+++ b/app/package.json
@@ -1,6 +1,6 @@
{
"name": "nodenogg.in",
- "version": "0.1.34",
+ "version": "0.1.35",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
diff --git a/app/src/components/CardsLayer.vue b/app/src/components/CardsLayer.vue
index 1944ae00c0f9abc8fd1359327371a573e18306ec..16e4a98b406f6704e46124b6f8f240dd998390d5 100644
--- a/app/src/components/CardsLayer.vue
+++ b/app/src/components/CardsLayer.vue
@@ -35,18 +35,16 @@
</div>
<div class="btn-row">
- <BaseButton buttonClass="danger" @click="deleteFlag()"
- >Discard</BaseButton
- >
+ <SvgButton buttonClass="nodes" @click.prevent="deleteFlag()" />
<div v-if="value.read_mode == true && deleted == false">
- <BaseButton class="read" buttonClass="action" @click="readFlag()"
+ <SvgButton2 buttonClass="nodes" @click.prevent="readFlag()" />
+
+ <!-- <BaseButton class="read" buttonClass="action" @click="readFlag()"
>Edit Mode
- </BaseButton>
+ </BaseButton> -->
</div>
<div v-else>
- <BaseButton class="read" buttonClass="action" @click="readFlag()"
- >Read Mode</BaseButton
- >
+ <SvgButton2 buttonClass="nodes" @click.prevent="readFlag()" />
</div>
</div>
</form>
@@ -58,6 +56,8 @@
<script>
import { mapState } from 'vuex'
import marked from 'marked'
+import SvgButton from '@/components/SvgButton'
+import SvgButton2 from '@/components/SvgButton2'
var readmode
export default {
@@ -134,6 +134,10 @@ export default {
// this.$refs.nodetext.focus()
// },
},
+ components: {
+ SvgButton,
+ SvgButton2,
+ },
}
</script>
diff --git a/app/src/components/ConnectionsLayer.vue b/app/src/components/ConnectionsLayer.vue
index 8d2d1a096ae8c83f4a5e9be5f459e240dd5fc264..2addb63c675feb4d4a8d584b56b107ed31ca3086 100644
--- a/app/src/components/ConnectionsLayer.vue
+++ b/app/src/components/ConnectionsLayer.vue
@@ -297,8 +297,8 @@ export default {
mounted() {
const canvas = this.$refs.pixi
this.PIXIApp = new PIXI.Application({
- width: window.innerWidth,
- height: window.innerHeight,
+ width: 3000,
+ height: 3000,
antialias: true,
transparent: true,
view: canvas,
diff --git a/app/src/components/ListLayer.vue b/app/src/components/ListLayer.vue
index 1ef7fbda26bf88bb36582edc95cfcd4aec36db25..afc9d8e5d1f0c54d9cf0b2858d895f1a646f2618 100644
--- a/app/src/components/ListLayer.vue
+++ b/app/src/components/ListLayer.vue
@@ -36,18 +36,23 @@
</div>
<div class="btn-row">
- <BaseButton buttonClass="danger" @click="deleteFlag()"
+ <!-- <BaseButton buttonClass="danger" @click="deleteFlag()"
>Discard</BaseButton
- >
+ > -->
+ <SvgButton buttonClass="nodes" @click.prevent="deleteFlag()" />
<div v-if="value.read_mode == true && deleted == false">
- <BaseButton class="read" buttonClass="action" @click="readFlag()"
+ <SvgButton2 buttonClass="nodes" @click.prevent="readFlag()" />
+
+ <!-- <BaseButton class="read" buttonClass="action" @click="readFlag()"
>Edit Mode
- </BaseButton>
+ </BaseButton> -->
</div>
<div v-else>
- <BaseButton class="read" buttonClass="action" @click="readFlag()"
+ <SvgButton2 buttonClass="nodes" @click.prevent="readFlag()" />
+
+ <!-- <BaseButton class="read" buttonClass="action" @click="readFlag()"
>Read Mode</BaseButton
- >
+ > -->
</div>
</div>
</form>
@@ -59,6 +64,9 @@
<script>
import { mapState } from 'vuex'
import marked from 'marked'
+import SvgButton from '@/components/SvgButton'
+import SvgButton2 from '@/components/SvgButton2'
+
var readmode
export default {
name: 'ListLayer',
@@ -132,6 +140,10 @@ export default {
}
},
},
+ components: {
+ SvgButton,
+ SvgButton2,
+ },
}
</script>
diff --git a/app/src/components/ModesCard.vue b/app/src/components/ModesCard.vue
index c6ffb4b7b01b5e66e5f1aeb076688e7958e19790..3404884b80e7f6f3028d5a0af3b18e7eee91161e 100644
--- a/app/src/components/ModesCard.vue
+++ b/app/src/components/ModesCard.vue
@@ -4,11 +4,12 @@
<img src="https://alpha.nodenogg.in/files/collect.png" />
<p>
- magpie mode is designed for you to gather your thoughts and research, as
- quickly and easily as possible.
+ Hey! Welcome <span class="inline">👋</span> to
+ <strong>magpie mode</strong> this is where you collect your thoughts and
+ ideas, without distraction and as quickly and easily as possible.
</p>
<p>
- Tap or press the add a new node icon to start
+ Tap the new node icon
<svg
class="example"
xmlns="http://www.w3.org/2000/svg"
@@ -28,8 +29,10 @@
<line class="c" y2="41" transform="translate(1426.5 863.5)" />
</g>
</svg>
- (shortcut <strong>n</strong>)
+ (shortcut <strong>n</strong>) to start (create as many nodes as you want
+ for each thought)
</p>
+
<p>
You can use
<strong
@@ -37,12 +40,13 @@
>markdown</a
></strong
>
- to quickly format your text and add images from websources, you can even
- use html and embed codes.
+ to quickly format your text and you can upload or add images from
+ websources, you can even use plain html and embed codes.
</p>
<p>
- To see what everyone else has collected in your team and to start
- organising, just switch to organise mode (best on a large display).
+ To see what <strong>everyone else</strong> is collecting and to start
+ organising your thoughts <strong>spatially</strong>, switch to organise
+ mode.
</p>
<p>
If you want to hide any nodes tap or press the hide icon
@@ -140,6 +144,10 @@ img {
padding: 1em;
}
+.inline {
+ font-size: 2em;
+}
+
.vdr {
padding: 0 0.5em;
}
diff --git a/app/src/components/ModesCardorg.vue b/app/src/components/ModesCardorg.vue
index d64be91811ab2c3340f5e65eb38725595ea9e15c..11fbaae021693d17fd5c5516632a045fdf9e5078 100644
--- a/app/src/components/ModesCardorg.vue
+++ b/app/src/components/ModesCardorg.vue
@@ -16,12 +16,12 @@
<img src="https://alpha.nodenogg.in/files/organise.png" />
<p>
- organise mode is designed for you to start to organise your thoughts
- together in your team.
+ Hey! Welcome <span class="inline">👋</span> to
+ <strong>web mode</strong> this is where you can start to organise your
+ thoughts <strong>spatially</strong>.
</p>
<p>
- You can move nodes together in real time by pressing or tapping the
- arrow icon
+ You can move nodes by choosing the arrow icon
<svg
class="example"
@@ -60,7 +60,7 @@
(shortcut <strong>a</strong>)
</p>
<p>
- You can also press or tap the connections icon
+ You create connections by choosing this icon
<svg
class="example"
@@ -97,17 +97,16 @@
</g>
</g>
</svg>
- to create connections between any nodes (shortcut <strong>c</strong>),
- you can create as many as you want per node as can each team member.
+ (shortcut <strong>c</strong>), you can create unlimited connections
+ per node and per person.
</p>
<p>
- You can still use add & edit your (<strong
+ You can add (<strong
><a href="https://guides.github.com/features/mastering-markdown/"
>markdown</a
></strong
>
- formatted) nodes here. Tap or press the add node icon tap or press the
- add a new node icon to start
+ formatted) nodes here too just tap to the add node icon
<svg
class="example"
xmlns="http://www.w3.org/2000/svg"
@@ -130,7 +129,7 @@
</p>
<p>
- And dont forget to hide any nodes just tap or press the hide icon
+ And remember to hide any nodes just tap the hide icon
<svg
class="example"
xmlns="http://www.w3.org/2000/svg"
@@ -219,6 +218,10 @@ img {
margin: 10px;
}
+.inline {
+ font-size: 2em;
+}
+
.vdr {
padding: 0 0.5em;
}
diff --git a/app/src/components/NodesLayer.vue b/app/src/components/NodesLayer.vue
index 7e6f784cd6b644426775e68c573c2637c0313adb..d797b704dea62c2b95740a50c10e15152270d236 100644
--- a/app/src/components/NodesLayer.vue
+++ b/app/src/components/NodesLayer.vue
@@ -145,24 +145,27 @@
</div>
</div>
<div class="btn-row">
- <BaseButton buttonClass="danger" @click="deleteFlag()"
+ <!-- <BaseButton buttonClass="danger" @click="deleteFlag()"
>Discard</BaseButton
- >
+ > -->
+ <SvgButton buttonClass="nodes" @click.prevent="deleteFlag()" />
<div v-if="value.read_mode == true">
- <BaseButton
+ <SvgButton2 buttonClass="nodes" @click.prevent="readFlag()" />
+ <!-- <BaseButton
class="read"
buttonClass="action"
@click="readFlag()"
>Edit Mode
- </BaseButton>
+ </BaseButton> -->
</div>
<div v-else>
- <BaseButton
+ <SvgButton2 buttonClass="nodes" @click.prevent="readFlag()" />
+ <!-- <BaseButton
class="read"
buttonClass="action"
@click="readFlag()"
>Read Mode</BaseButton
- >
+ > -->
</div>
</div>
</form>
@@ -175,7 +178,8 @@
<script>
import { mapState } from 'vuex'
import marked from 'marked'
-//import lodash from 'lodash'
+import SvgButton from '@/components/SvgButton'
+import SvgButton2 from '@/components/SvgButton2'
import draggable from '@/experimental/Draggable'
var readmode
@@ -399,6 +403,8 @@ export default {
},
components: {
draggable,
+ SvgButton,
+ SvgButton2,
},
}
</script>
diff --git a/app/src/components/SvgButton.vue b/app/src/components/SvgButton.vue
index 173d712eb1fea5fd9f67c02e867b8e66b16b6da5..5543dee6c310a59859a0a91ab331527e98be523b 100644
--- a/app/src/components/SvgButton.vue
+++ b/app/src/components/SvgButton.vue
@@ -55,8 +55,8 @@ button {
cursor: pointer;
}
-button.list {
- background-color: white;
+button.nodes {
+ background-color: rgb(155, 194, 216);
}
.z {
diff --git a/app/src/components/SvgButton2.vue b/app/src/components/SvgButton2.vue
new file mode 100644
index 0000000000000000000000000000000000000000..164bbfee99d050d4ce14e4f613b3c268e602bb0c
--- /dev/null
+++ b/app/src/components/SvgButton2.vue
@@ -0,0 +1,67 @@
+<template>
+ <div>
+ <button v-on="$listeners" class="button" :class="buttonClass">
+ <svg xmlns="http://www.w3.org/2000/svg" width="50" viewBox="0 0 176 151">
+ <g transform="translate(-1582 -611)">
+ <rect width="164" height="130" transform="translate(1582 632)" />
+ <g class="a" transform="translate(1594 611)">
+ <rect class="d" width="164" height="130" />
+ <rect class="e" x="3.5" y="3.5" width="157" height="123" />
+ </g>
+ <line class="b" x2="76" transform="translate(1605.5 631.5)" />
+ <line class="c" x2="106" transform="translate(1605.5 659.5)" />
+ <line class="b" x2="76" transform="translate(1605.5 687.5)" />
+ <line class="c" x2="106" transform="translate(1605.5 714.5)" />
+ </g>
+ </svg>
+ </button>
+ </div>
+</template>
+
+<script>
+export default {
+ props: {
+ buttonClass: {
+ type: String,
+ },
+ },
+}
+</script>
+
+<style lang="css" scoped>
+button {
+ background-color: #6fcf97;
+ touch-action: manipulation;
+ border: none;
+ outline: none;
+ cursor: pointer;
+}
+
+button.nodes {
+ background-color: rgb(155, 194, 216);
+}
+
+.a {
+ fill: #fff;
+ stroke-width: 7px;
+}
+.a,
+.b {
+ stroke: #000;
+}
+.b,
+.c,
+.e {
+ fill: none;
+}
+.b {
+ stroke-width: 4px;
+}
+.c {
+ stroke: #2d9cdb;
+ stroke-width: 6px;
+}
+.d {
+ stroke: none;
+}
+</style>
diff --git a/app/src/components/WelcomeList.vue b/app/src/components/WelcomeList.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2fd35b4e02c1952628aac7a02548ab5b111ad825
--- /dev/null
+++ b/app/src/components/WelcomeList.vue
@@ -0,0 +1,91 @@
+<template>
+ <div>
+ <div v-if="deleted == false">
+ <div class="nodes">
+ <p :inner-html.prop="nodetext | marked"></p>
+
+ <div class="allemoji">
+ <div
+ class="eachemoji"
+ v-for="(emojis, index) in configEmoji"
+ :key="index"
+ >
+ <p v-if="nodeid == emojis.node_id">
+ {{ emojis.emoji_text }}
+ </p>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import marked from 'marked'
+export default {
+ name: 'WelcomeList',
+
+ data: function () {
+ return {}
+ },
+
+ props: {
+ nodeid: String,
+ nodetext: String,
+ deleted: Boolean,
+ },
+
+ computed: mapState({
+ otherNodes: (state) => state.otherNodes,
+ configEmoji: (state) => state.configEmoji,
+ }),
+
+ filters: {
+ marked: marked,
+ },
+}
+</script>
+
+<style lang="css" scoped>
+.nodes {
+ width: 95%;
+ border: 2px solid black;
+ background-color: rgb(205, 234, 255);
+ margin-top: 1em;
+ margin-left: 0.5em;
+ margin-right: 0.5em;
+}
+
+p {
+ width: 90%;
+ /* height: 175px; */
+ resize: none;
+ box-sizing: border-box;
+ font-family: 'Inter var', Helvetica, sans-serif;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ margin: 1em;
+}
+.btn-row {
+ position: relative;
+ margin-bottom: 5px;
+ display: flex;
+ justify-content: center;
+ flex-wrap: wrap;
+ padding: 0 15px;
+ border-radius: 4px;
+}
+
+.allemoji {
+ font-size: 2em;
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(0, auto));
+
+ /* float: left; */
+}
+
+.eachemoji p {
+ margin: 0em;
+}
+</style>
diff --git a/app/src/experimental/ModeToolbar.vue b/app/src/experimental/ModeToolbar.vue
index ae0f90e07b713688fedb012ad2ea86d19216edad..08c71cd0ec0f23e822671a3cce658f08a317da24 100644
--- a/app/src/experimental/ModeToolbar.vue
+++ b/app/src/experimental/ModeToolbar.vue
@@ -42,7 +42,11 @@ export default {
setMode(mode) {
this.$store.commit('ui/setMode', mode)
if (mode == 'exit') {
- this.removeLocal()
+ if (confirm('Are you sure you want to leave this microcoms?')) {
+ this.removeLocal()
+ } else {
+ // nothing happens
+ }
}
if (mode == 'addNode') {
this.$store.dispatch('addNode')
@@ -52,6 +56,10 @@ export default {
}
if (mode == 'copy') {
this.$emit('copyDone')
+
+ alert(
+ 'Now all you need to do is paste into a new node to display your media'
+ )
}
if (mode == 'draw') {
this.$emit('drawOn')
diff --git a/app/src/views/Cards.vue b/app/src/views/Cards.vue
index acb3372b973ddd30444224cf54d0ad503624de07..1f248ce9d51539b66d55d00e93d8670350bc88fb 100644
--- a/app/src/views/Cards.vue
+++ b/app/src/views/Cards.vue
@@ -141,6 +141,9 @@ export default {
copyDone() {
this.copyready = !this.copyready
+ // alert(
+ // 'Now all you need to do is paste into a new node to display your media'
+ // )
},
},
components: {
diff --git a/app/src/views/List.vue b/app/src/views/List.vue
index 3c686e8df4533ea630c7e0003503462989c9c2f9..47f7aa9209bf6931049f4516a8c714749b2d26a8 100644
--- a/app/src/views/List.vue
+++ b/app/src/views/List.vue
@@ -2,7 +2,6 @@
<div>
<div v-if="clientset">
<div id="listwrapper">
- <!-- <h1 class="mobile">Your nodes - collect</h1> -->
<ModesCard />
<ListLayer
@editTrue="(e) => editTrue(e)"
@@ -54,6 +53,13 @@
</div>
</div>
<div v-else>
+ <WelcomeList
+ v-for="value in otherNodes"
+ v-bind:key="value.node_id"
+ v-bind:nodeid="value.node_id"
+ v-bind:nodetext="value.node_text"
+ v-bind:deleted="value.deleted"
+ />
<OnBoard @clientAdded="clientAdded()" @editTrue="(e) => editTrue(e)" />
</div>
</div>
@@ -64,6 +70,7 @@ import ListLayer from '@/components/ListLayer'
import ModesCard from '@/components/ModesCard'
import UploadLayer from '@/components/UploadLayer'
import OnBoard from '@/components/OnBoard'
+import WelcomeList from '@/components/WelcomeList'
import { mapState } from 'vuex'
@@ -90,7 +97,7 @@ export default {
computed: {
...mapState({
myNodes: (state) => state.myNodes,
- //otherNodes: (state) => state.otherNodes,
+ otherNodes: (state) => state.otherNodes,
shortcutstate: (state) => state.shortcutstate,
// toolmode: (state) => state.ui.mode,
}),
@@ -132,6 +139,10 @@ export default {
copyDone() {
this.copyready = !this.copyready
+
+ // alert(
+ // 'Now all you need to do is paste into a new node to display your media'
+ // )
},
},
components: {
@@ -139,6 +150,7 @@ export default {
ListLayer,
OnBoard,
UploadLayer,
+ WelcomeList,
},
}
</script>
diff --git a/app/src/views/Organise.vue b/app/src/views/Organise.vue
index 966f06bfea69c04631c499985b4dc802f7c95e4b..8755e6dd1a6b4ce274b3ed33279d59b795ef6532 100644
--- a/app/src/views/Organise.vue
+++ b/app/src/views/Organise.vue
@@ -28,7 +28,6 @@
<div class="online" v-else>
<div ref="container" class="wrapper" v-bind:style="modeContainerStyle">
-
<PanZoomContainer
v-bind:width="width"
v-bind:height="height"
@@ -79,7 +78,6 @@
<ConnectionsLayer />
</div>
<ScribbleLayer v-bind:drawready="drawready"></ScribbleLayer>
-
</PanZoomContainer>
<!-- <ToolBar /> -->
<ModeToolbar