fcad-core-dragon 2.0.0-beta.1 → 2.0.0-beta.3

package/src/components/AppCompButtonProgress.vue

@@ -1,147 +1,126 @@
-<template>
-  <div class="button-progress-wrapper">
-    <!-- Building a Progress Ring, Quickly: https://css-tricks.com/building-progress-ring-quickly/ -->
-    <svg class="progress-ring" width="54" height="54">
-      <circle
-        class="progress-ring__circle"
-        stroke-width="3"
-        fill="transparent"
-        :r="radius"
-        cx="25"
-        cy="25"
-        :stroke-dasharray="circumference"
-        :stroke-dashoffset="
-          circumference - (branchData.progression / 100) * circumference
-        "
-      ></circle>
-    </svg>
-    <button
-      :id="`btn_branch_${branchData.id}`"
-      :target-ref="branchData.id"
-      :title="btnTitle || $t('text.place_holder.for_title_btn_progress')"
-      :class="
-        branchData.state === status.COMPLETE
-          ? 'branch-btn-default branche-complete'
-          : 'branch-btn-default'
-      "
-      @click="openBranch(branchData.id)"
-    >
-      <svg v-if="branchData.state === status.COMPLETE" width="24" height="24">
-        <use href="#branch-crochet-icon"></use>
-      </svg>
-      <svg v-if="branchData.state != status.COMPLETE" width="24" height="24">
-        <use href="#navigate-next-icon"></use>
-      </svg>
-    </button>
-  </div>
-</template>
-<script>
-export default {
-  props: {
-    mini: {
-      type: Boolean,
-      default: false
-    },
-    percent: {
-      type: [Number],
-      default: 0,
-      required: true
-    },
-    branchData: {
-      type: Object,
-      required: true
-    },
-    setTarget: {
-      type: [String],
-      default: ''
-    },
-
-    btnTitle: {
-      type: String,
-      default: null
-    }
-  },
-  data() {
-    const svgRadius = 23
-    return {
-      radius: svgRadius,
-      circumference: svgRadius * 2 * Math.PI,
-      status: {
-        NEW: 'new',
-        STARTED: 'started',
-        COMPLETE: 'complete'
-      },
-      withRouter: false, //Only for demo purpose. Remove after demo
-      isActive: false
-    }
-  },
-
-  created() {
-    if (isNaN(this.percent)) this.percent = 0
-    this.$bus.$on('branching-hidden', this.resetIsActive)
-  },
-
-  beforeDestroy() {
-    this.$bus.$off('branching-hidden', this.resetIsActive)
-  },
-
-  methods: {
-    openBranch(e) {
-      this.isActive = true
-      this.$bus.$emit('open-sidebar', { ctx: 'ctxBranching', e })
-    },
-
-    resetIsActive() {
-      this.isActive = false
-    }
-  }
-}
-</script>
-<style lang="scss">
-.button-progress-wrapper {
-  &.card-btn {
-    .branch-btn-default {
-      left: 5.5px;
-      top: 5.5px;
-      min-width: 40px;
-      min-height: 40px;
-    }
-  }
-}
-
-.button-progress-wrapper {
-  &:not(.card-btn) {
-    .branch-btn-default {
-      left: 4px;
-      top: 4px;
-      min-width: 42px;
-      min-height: 42px;
-
-      &:focus {
-        &::after {
-          content: '';
-          position: absolute;
-          top: -50%;
-          left: -50%;
-          width: 200%;
-          height: 200%;
-        }
-      }
-    }
-  }
-}
-
-.button-progress-wrapper {
-  position: relative;
-
-  .progress-ring {
-    position: absolute;
-    top: 0;
-    left: 0;
-  }
-
-  .branch-btn-default {
-    position: absolute;
-  }
-}
-</style>
+<template>
+  <div class="button-progress-wrapper">
+    <button
+      :id="`btn_branch_${branchData.id}`"
+      :target-ref="branchData.id"
+      :title="btnTitle || $t('text.place_holder.for_title_btn_progress')"
+      :class="
+        branchData.state === status.COMPLETE
+          ? 'branch-btn-default branche-complete'
+          : 'branch-btn-default'
+      "
+      @click="openBranch(branchData.id)"
+    >
+      <svg v-if="branchData.state === status.COMPLETE">
+        <use href="#check-icon"></use>
+      </svg>
+      <svg v-if="branchData.state != status.COMPLETE">
+        <use href="#navigate-next-icon"></use>
+      </svg>
+    </button>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    mini: {
+      type: Boolean,
+      default: false
+    },
+    percent: {
+      type: [Number],
+      default: 0,
+      required: true
+    },
+    branchData: {
+      type: Object,
+      required: true
+    },
+    setTarget: {
+      type: [String],
+      default: ''
+    },
+
+    btnTitle: {
+      type: String,
+      default: null
+    }
+  },
+  data() {
+    const svgRadius = 23
+    return {
+      radius: svgRadius,
+      circumference: svgRadius * 2 * Math.PI,
+      status: {
+        NEW: 'new',
+        STARTED: 'started',
+        COMPLETE: 'complete'
+      },
+      withRouter: false, //Only for demo purpose. Remove after demo
+      isActive: false,
+      currentPercent: 0
+    }
+  },
+
+  created() {
+    // if (isNaN(this.percent)) this.percent = 0
+    this.$bus.$on('branching-hidden', this.resetIsActive)
+  },
+
+  beforeUnmount() {
+    this.$bus.$off('branching-hidden', this.resetIsActive)
+  },
+
+  methods: {
+    openBranch(e) {
+      this.isActive = true
+      this.$bus.$emit('open-sidebar', { ctx: 'ctxBranching', e })
+    },
+
+    resetIsActive() {
+      this.isActive = false
+    }
+  }
+}
+</script>
+<style lang="scss">
+.button-progress-wrapper {
+  &.card-btn {
+    .branch-btn-default {
+      left: 5.5px;
+      top: 5.5px;
+      min-width: 40px;
+      min-height: 40px;
+    }
+  }
+}
+
+.button-progress-wrapper {
+  &:not(.card-btn) {
+    .branch-btn-default {
+      // left: 4px;
+      // top: 4px;
+      // min-width: 42px;
+      // min-height: 42px;
+      right: 15px !important;
+      top: -15px !important;
+      min-width: 42px;
+      min-height: 42px;
+    }
+  }
+}
+
+.button-progress-wrapper {
+  position: relative;
+
+  .progress-ring {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+
+  .branch-btn-default {
+    position: absolute;
+  }
+}
+</style>