Merge pull request #8 from mugi-uno/add_expand_hidden_code

Add expand hidden code

lib/panel/components/Control.vue

@@ -5,7 +5,7 @@
     :ripple='false'
     :class='[watching ? "red--text" : "grey--text", watching ? "red lighten-4" : ""]'
     @click.native='toggle'
-  )
+  ) 
     v-icon
       | fiber_manual_record
     | REC
@@ -32,3 +32,9 @@ export default {
   },
 }
 </script>
+
+<style scoped>
+.control {
+  height: 35px;
+}
+</style>

lib/panel/components/EventArea.vue

@@ -15,29 +15,46 @@
 </template>
 
 <script>
+import _ from 'lodash';
 import EventGroup from './EventGroup';
 
 export default {
   name: 'EventArea',
   props: ['eventGroups'],
   components: { EventGroup },
+
   data() {
     return {
       copying: false,
     };
   },
+
+  watch: {
+    eventGroups(newVal, oldVal) {
+      if (newVal.length !== oldVal.length) return;
+
+      const area = this.$refs.area;
+      area.scrollTop = area.scrollHeight - area.offsetHeight;
+    },
+  },
+
   methods: {
     copy() {
-      const range = document.createRange();
-      range.selectNodeContents(this.$refs.area);
+      const dummy = document.createElement("textarea");
+      dummy.style.cssText = "position:absolute; top: -100%; left:-100%";
+      
+      const events = _.flattenDeep(
+        this.eventGroups.map(eg => eg.open ? eg.events : eg.events.filter(e => e.show)
+      ));
 
-      const selection = document.getSelection();
-      selection.removeAllRanges();
-      selection.addRange(range);
+      dummy.value = _.join(events.map(e => e.code), "\n");
 
-      document.execCommand('copy');
+      document.body.appendChild(dummy);
+
+      dummy.select();
 
-      selection.removeAllRanges();
+      document.execCommand('copy');
+      document.body.removeChild(dummy);
 
       this.copying = true;
       setTimeout(() => {
@@ -58,8 +75,11 @@ export default {
   color: #333;
   line-height: 16px;
   padding: 10px;
-  box-shadow: 0px 1px 3px #ccc;
-  border-radius: 2px;
+}
+
+.event-area-body {
+  height: calc(100vh - 55px);
+  overflow-y: scroll;
 }
 
 .copy-button {

lib/panel/components/EventGroup.vue

@@ -1,19 +1,62 @@
 <template lang="pug">
 .event-group
-  event-item(v-for='e in events' :key='e.key' :event='e')
+  event-group-control(
+    :size='events.length'
+    :open='eventGroup.open'
+    @toggle='toggle'
+  )
+  .event-items
+    event-item(
+      v-for='e in showEvents'
+      :key='e.key'
+      :event='e'
+    )
 </template>
 
 <script>
+import EventGroupControl from './EventGroupControl';
 import EventItem from './EventItem';
 
 export default {
   name: 'EventGroup',
   props: ['eventGroup'],
-  components: { EventItem },
+  components: { EventGroupControl, EventItem },
   computed: {
     events() {
-      return this.eventGroup.events.filter(e => e.show);
+      return this.eventGroup.events;
+    },
+
+    showEvents() {
+      if (this.eventGroup.open) {
+        return this.events;
+      }
+
+      return this.events.filter(e => e.show);
+    },
+  },
+
+  methods: {
+    toggle() {
+      this.$store.dispatch('toggleEventGroup', this.eventGroup.key);
     },
   },
 }
 </script>
+
+<style scoped>
+.event-group {
+  display: flex;
+  align-items: center;
+  box-shadow: -1px 1px 1px #ddd;
+  border-radius: 2px;
+  margin: 5px;
+  padding: 5px;
+  overflow-x: scroll;
+}
+
+.event-items {
+  display: flex;
+  flex-direction: column;
+}
+</style>
+

lib/panel/components/EventGroupControl.vue

@@ -0,0 +1,49 @@
+<template lang="pug">
+.event-group-control
+  template(v-if='expandable')
+    v-btn(
+      flat icon :color='toggleButtonColor'
+      @click.native='toggle'
+    )
+      v-icon {{toggleIcon}}
+  template(v-else)
+    v-icon.default-icon(color='grey lighten-2') check
+</template>
+
+<script>
+export default {
+  name: 'EventGroupControl',
+  props: ['size', 'open'],
+  computed: {
+    expandable() {
+      return this.size && this.size > 1;
+    },
+    toggleButtonColor() {
+      return this.open ? 'blue' : 'grey';
+    },
+    toggleIcon() {
+      return this.open ? 'arrow_drop_up' : 'arrow_drop_down';
+    },
+  },
+  methods: {
+    toggle() {
+      this.$emit('toggle');
+    },
+  },
+}
+</script>
+
+<style scoped>
+.event-group-control button {
+  margin: 0px 5px 0px 0px;
+  height: 20px;
+  width: 20px;
+}
+
+.default-icon {
+  margin: 0px 5px 0px 0px;
+  height: 20px;
+  width: 20px;
+  font-size: 14px;
+}
+</style>

lib/panel/store/modules/panel.js

@@ -15,6 +15,9 @@ const actions = {
   toggleWatching({ commit, state }) {
     commit(types.PANEL_TOGGLE_WATCHING, !state.watching);
   },
+  toggleEventGroup({ commit, state }, key) {
+    commit(types.PANEL_TOGGLE_EVENT_GROUP, key);
+  },
   clearPanel({ commit }) {
     commit(types.PANEL_CLEAR);
   },
@@ -36,11 +39,19 @@ const mutations = {
     state.eventGroups = [];
   },
 
+  [types.PANEL_TOGGLE_EVENT_GROUP](state, key) {
+    const index = state.eventGroups.findIndex(eg => eg.key === key);
+    if (~index) {
+      const eg = state.eventGroups[index];
+      eg.open = !eg.open;
+    }
+  },
+
   [types.CONTENT_FIRE](state, originalEvent) {
     const lastEventGroup = _.last(state.eventGroups);
 
     if (isDropEvent(lastEventGroup, originalEvent)) return;
-    
+
     const code = capybarize(originalEvent);
 
     if (!code) return;
@@ -52,7 +63,6 @@ const mutations = {
       show: true,
     };
 
-
     if (isSameGroup(lastEventGroup, event)) {
       const events = lastEventGroup.events;
       const newEvents = createNewEvents(events, event);
@@ -62,6 +72,7 @@ const mutations = {
       state.eventGroups.push({
         key: uuid(),
         events: [event],
+        open: false,
       });
     }
   },

lib/panel/store/mutation-types.js

@@ -1,5 +1,6 @@
 export const PANEL_TOGGLE_WATCHING = 'PANEL_TOGGLE_WATCHING';
 export const PANEL_CLEAR = 'PANEL_CLEAR';
+export const PANEL_TOGGLE_EVENT_GROUP = 'PANEL_TOGGLE_EVENT_GROUP';
 
 export const CONTENT_FIRE = 'CONTENT_FIRE';
 export const CONTENT_CONNECT = 'CONTENT_CONNECT';