Commit 5b56122d authored by Jozef Bátrna's avatar Jozef Bátrna
Browse files

added vue-swatches

parent a9e0a45c

package-lock.json

+5 −0
Original line number Diff line number Diff line
@@ -16650,6 +16650,11 @@ 
        "loader-utils": "^1.0.2"

      }

    },

    "vue-swatches": {

      "version": "1.0.4",

      "resolved": "https://registry.npmjs.org/vue-swatches/-/vue-swatches-1.0.4.tgz",

      "integrity": "sha512-bVzLpmwQU1sYgvQ0sD8jDzhFhAortJyc8KDogr0uC3SxzsPw/osfT0A28rhAQWsKYU1mpPXn6qk4khpbkgpbFw=="

    },

    "vue-template-compiler": {

      "version": "2.6.10",

      "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.6.10.tgz",

package.json

+1 −0
Original line number Diff line number Diff line
@@ -28,6 +28,7 @@ 
    "vue": "^2.6.6",

    "vue-router": "^3.0.6",

    "vue-screen-size": "^1.0.0",

    "vue-swatches": "^1.0.4",

    "vuejs-logger": "^1.5.3",

    "vuex": "^3.1.1"

  },

src/components/Tools/NodeTagCard.vue

+53 −68
Original line number Diff line number Diff line
@@ -15,72 +15,24 @@ 


    <div class="card-content">

      <div class="content">

        <b-field label="Tag color">

          <b-dropdown v-model="color" aria-role="list">

            <button

              slot="trigger"

              class="button"

              type="button"

              @change="

                color = value

                dispatchSetTagColor()

              "

            >

              <template v-if="color === 'red'">

                <span>red</span>

              </template>

              <template v-else-if="color === 'orange'">

                <span>orange</span>

              </template>

              <template v-else-if="color === 'green'">

                <span>green</span>

              </template>

              <template v-else>

                <span>blue</span>

              </template>

              <b-icon icon="menu-down"></b-icon>

            </button>



            <b-dropdown-item :value="'red'" aria-role="listitem">

              <div class="media" @click="dispatchSetTagColor('red')">

                <b-icon class="media-left"></b-icon>

                <div class="media-content">

                  <span>red</span>

                </div>

              </div>

            </b-dropdown-item>



            <b-dropdown-item :value="'blue'" aria-role="listitem">

              <div class="media" @click="dispatchSetTagColor('blue')">

                <b-icon class="media-left"></b-icon>

                <div class="media-content">

                  <span>blue</span>

        <div class="form__field">

          <div class="label-buefy-style">

            <!-- class="form__label" -->

            <span>Choose a tag color:</span>

          </div>

          <div class="form__input">

            <swatches

              v-model="color"

              :colors="colors"

              shapes="circles"

              popover-to="left"

              @input="dispatchSetTagColor()"

            ></swatches>

          </div>

            </b-dropdown-item>



            <b-dropdown-item :value="'orange'" aria-role="listitem">

              <div class="media" @click="dispatchSetTagColor('orange')">

                <b-icon class="media-left"></b-icon>

                <div class="media-content">

                  <span>orange</span>

                </div>

              </div>

            </b-dropdown-item>



            <b-dropdown-item :value="'green'" aria-role="listitem">

              <div class="media" @click="dispatchSetTagColor('green')">

                <b-icon class="media-left"></b-icon>

                <div class="media-content">

                  <span>green</span>

        </div>

              </div>

            </b-dropdown-item>

          </b-dropdown>

        </b-field>



        <b-field>

          <b-field label="Name">

          <b-field label="Choose a tag name">

            <b-input

              v-model="name"

              placeholder="Group name"
@@ -102,13 +54,41 @@ 


<script>

import { mapState, mapGetters, mapActions } from 'vuex'

import Swatches from 'vue-swatches'

import 'vue-swatches/dist/vue-swatches.min.css'



export default {

  components: {

    Swatches

  },

  data() {

    return {

      isSelectingRepresentativeNode: false,

      previouslySelectedNodes: [],

      color: 'red',

      color: '#e6194B',

      colors: [

        '#e6194B',

        '#3cb44b',

        '#ffe119',

        '#4363d8',

        '#f58231',

        '#911eb4',

        '#42d4f4',

        '#f032e6',

        '#bfef45',

        '#fabebe',

        '#469990',

        '#e6beff',

        '#9A6324',

        '#fffac8',

        '#800000',

        '#aaffc3',

        '#808000',

        '#ffd8b1',

        '#000075',

        '#a9a9a9',

        '#000000'

      ],

      name: ''

    }

  },
@@ -128,9 +108,8 @@ export default { 
        name: this.name

      })

    },

    dispatchSetTagColor(value) {

      //console.log('color', this.color) //for some reason it didn't update yet

      this.$store.dispatch('data/setTagColor', value)

    dispatchSetTagColor() {

      this.$store.dispatch('data/setTagColor', this.color)

    },

    dispatchSetTagName() {

      this.$store.dispatch('data/setTagName', this.name)
@@ -172,4 +151,10 @@ export default { 


.clearfix:after

  clear: both



.label-buefy-style

  color: #363636;

  display: block;

  font-size: 1rem;

  font-weight: 600;

</style>

src/store/modules/interaction.js

+0 −2
Original line number Diff line number Diff line
@@ -14,8 +14,6 @@ export const state = { 
  hoveredNode: NaN,

  detailedLink: NaN,



  tagColor: 'black',



  shownTools: {

    nodeDetail: false,

    nodePopover: false,

src/components/NetworkGraph.vue

+11 −11

File changed.

Contains only whitespace changes.