Add movable

compiler/src/core/baseService.vue

@@ -14,6 +14,11 @@ export default {
     settingBoolean: settingBooleanVue,
     settingInt: settingIntVue,
     settingString: settingStringVue
+  },
+  methods:{
+    passMove(move) {
+      this.$emit('move', move)
+    }
   }
 }
 </script>

compiler/src/core/serviceHeader.vue

@@ -3,6 +3,12 @@
   .title(@click="showSettings = !showSettings")
     slot(name="title")
   .settings(v-show="showSettings")
+    input.position(
+      @keyup.up.ctrl.exact="onMove('x', -1)" @keyup.down.ctrl.exact="onMove('x', 1)"
+      @keyup.left.ctrl.exact="onMove('y', -1)" @keyup.right.ctrl.exact="onMove('y', 1)"
+      @keyup.up.alt.exact="onMove('h', -1)" @keyup.down.alt.exact="onMove('h', 1)"
+      @keyup.left.alt.exact="onMove('w', -1)" @keyup.right.alt.exact="onMove('w', 1)"
+    )
     slot(name="settings")
 </template>
 
@@ -10,6 +16,11 @@
 export default {
   data() { return {
     showSettings: false
-  } }
+  } },
+  methods: {
+    onMove(type, direction) {
+      this.$emit('move', { type: type, direction: direction })
+    },
+  }
 }
 </script>

compiler/src/core/tools.js

@@ -1,7 +1,7 @@
 export const emitErrorMixin = {
     methods: {
         emitError(err) {
-            this.$emit("error", err.toString())
+            this.$emit('error', err.toString())
         }
     }
 }
@@ -9,7 +9,7 @@ export const emitErrorMixin = {
 export const handleOptionsMixin = {
     methods: {
         saveOptions(options) {
-            this.$emit("save", options)
+            this.$emit('save', options)
         },
         setOption(name, value) {
             const options = {...this.$props}

compiler/src/mastodon/client.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-.client(@scroll="onScroll")
+.client(@scroll.passive="onScroll")
   .statues
     .header(v-if="notifications.length > 0") Accueil
     .list(v-if="statues.length > 0")
@@ -13,7 +13,8 @@
       | Notifications
       span.date(@click.stop.prevent="onNotificationsClear") ❌
     .list
-      notification(v-for="notification in notifications" :key="notification.id" :notification="notification" :now="now" :showMedia="showMedia" @dismiss="onNotificationDismiss")
+      notification(v-for="notification in notifications" :key="notification.id" :notification="notification" :now="now"
+        :showMedia="showMedia" @dismiss="onNotificationDismiss" @mark="onStatusMark")
 </template>
 
 <script>

compiler/src/mastodon/main.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
 .mastodon
-  service-header
+  service-header(@move="passMove")
     template(#title)
       | Mastodon: 
       span(v-html="parseEmojis(account.display_name, account.emojis)")
@@ -11,7 +11,7 @@
       setting-boolean(:id="'reply'" :title="'Show replies'" :value="reply" @change="setOptionCouple")
       setting-int(:id="'buffer'" :title="'Buffer size'" :value="buffer" @change="setOptionCouple")
       setting-boolean(:id="'showMedia'" :title="'Show medias'" :value="showMedia" @change="setOptionCouple")
-  client(v-if="server && token" v-bind="$props")
+  client(v-if="server && token" v-bind="$props" @error="emitError")
   .auth(v-else)
     form(@submit.prevent="setServer")
       p

compiler/src/mastodon/notification.vue

@@ -11,7 +11,7 @@
   .content
     template(v-if="notification.type == 'follow'") Vous suit
     status.reblog(v-else-if="notification.status" :status="notification.status" :now="now"
-      :showMedia="showMedia" :withAccount="notification.type != 'mention'" @mark.stop.prevent="")
+      :showMedia="showMedia" :withAccount="notification.type != 'mention'" @mark="passMark")
 
   a.date(@click.stop.prevent="makeDismiss" style="margin-top: -1em") ❌
 </template>
@@ -38,6 +38,9 @@ export default {
   methods: {
     makeDismiss() {
       this.$emit('dismiss', this.notification.id)
+    },
+    passMark(action) {
+      this.$emit('mark', action)
     }
   }
 }

compiler/src/mastodon/status.vue

@@ -65,10 +65,10 @@ export default {
     makeReply(status) {
       console.error(status.id) //TODO:
     },
-    emitMark(status, action, callback) {
+    emitMark(status, action, callback, undo = false) {
       this.$emit('mark', {
         id: status.id,
-        type: (status.reblogged ? 'un' : '') + action,
+        type: (undo ? 'un' : '') + action,
         callback: callback
       })
     },
@@ -76,13 +76,13 @@ export default {
       this.emitMark(status, 'reblog', () => {
         status.reblogs_count += (status.reblogged ? -1 : 1)
         status.reblogged = !status.reblogged
-      })
+      }, status.reblogged)
     },
     makeFav(status) {
       this.emitMark(status, 'favourite', () => {
         status.favourites_count += (status.favourited ? -1 : 1)
         status.favourited = !status.favourited
-      })
+      }, status.favourited)
     }
   }
 }

compiler/src/nextcloud-news/main.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
 .nextcloud-news(v-show="showEmpty || unreaded.length > 0 || !server || !token || !username")
-  service-header
+  service-header(@move="passMove")
     template(#title) Nextcloud News
     template(#settings)
       setting-int(:id="'update'" :title="'Update interval'" :value="update" @change="setOptionCouple")

compiler/src/openweathermap/main.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
 .openweathermap
-  service-header
+  service-header(@move="passMove")
     template(#title) OpenWeatherMap
     template(#settings)
       setting-string(:id="'token'" :title="'Token'" :value="token" @change="setOptionCouple")

index.html

@@ -27,8 +27,8 @@
         <div id="services">
             <component
                 v-for="(service, key) in services" :is="service.type" :key="key"
-                v-bind="service.options" @error="addError" @save="setService(key, $event)"
+                @error="addError" @save="setService(key, $event)" @move="moveService(key, $event)"
-                :style="gridPos(key, service.position)"
+                v-bind="service.options" :style="gridPos(key, service.position)"
             />
         </div>
     </div>

main.css

@@ -79,6 +79,11 @@ a {
   font-weight: bold;
 }
 
+#services > div .service-header .settings .position {
+  float: right;
+  width: 1.2em;
+}
+
 #services .service-loader {
   display: inline-block;
   width: 64px;
@@ -137,6 +142,13 @@ a {
   overflow-y: auto;
 }
 
+.mastodon .client .header {
+  margin: 0.3em;
+  background-color: #222;
+  border-radius: 0.3em;
+  padding: 0.3em;
+}
+
 .mastodon .client .list > div {
   margin: 0.3em;
   background-color: #222;

main.js

@@ -46,6 +46,12 @@ var app = new Vue({
             })
             this.saveServices()
         },
+        moveService(id, move) {
+            const service = { ...this.services[id] }
+            service.position[move.type] = Math.max(1, (service.position[move.type] || 1) + move.direction)
+            this.$set(this.services, id, service)
+            this.saveServices()
+        },
         removeService(id) {
             this.services.splice(id, 1)
             this.saveServices()

main.sass

@@ -68,6 +68,9 @@ a
         font-size: large
         text-align: center
         font-weight: bold
+      .settings .position
+        float: right
+        width: 1.2em
   .service-loader
     display: inline-block
     width: 64px
@@ -94,6 +97,8 @@ a
   .client
     display: flex
     overflow-y: auto
+    .header
+      @include tile
     .list
       & > div
         @include tile