Improved/fixed votetype selection (snapshot-labs#971)

* improved/fixed votetype selection * added alternative check icon * increase check icon size
septa6377 · Nov 2, 2021 · d00ee76 · d00ee76
1 parent 9f76361
commit d00ee76
Show file tree

Hide file tree

Showing 8 changed files with 56 additions and 14 deletions.
diff --git a/src/assets/fonts/iconfont.css b/src/assets/fonts/iconfont.css
@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 1946815 */
-  src: url('iconfont.woff2?t=1632986541203') format('woff2'),
-       url('iconfont.woff?t=1632986541203') format('woff'),
-       url('iconfont.ttf?t=1632986541203') format('truetype');
+  src: url('iconfont.woff2?t=1635879635621') format('woff2'),
+       url('iconfont.woff?t=1635879635621') format('woff'),
+       url('iconfont.ttf?t=1635879635621') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.iconcheck1:before {
+  content: "\e607";
+}
+
 .iconremind:before {
   content: "\e69e";
 }

diff --git a/src/assets/fonts/iconfont.json b/src/assets/fonts/iconfont.json
@@ -5,6 +5,13 @@
   "css_prefix_text": "icon",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "583318",
+      "name": "check",
+      "font_class": "check1",
+      "unicode": "e607",
+      "unicode_decimal": 58887
+    },
     {
       "icon_id": "1410439",
       "name": "notifications-none",

diff --git a/src/assets/fonts/iconfont.ttf b/src/assets/fonts/iconfont.ttf
diff --git a/src/assets/fonts/iconfont.woff b/src/assets/fonts/iconfont.woff
diff --git a/src/assets/fonts/iconfont.woff2 b/src/assets/fonts/iconfont.woff2
diff --git a/src/components/Modal/VotingType.vue b/src/components/Modal/VotingType.vue
@@ -4,10 +4,14 @@ defineProps({
     type: Boolean,
     required: true
   },
-  selected: String
+  selected: String,
+  allowAny: {
+    type: Boolean,
+    default: false
+  }
 });
 
-const emit = defineEmits(['close', 'update:modelValue']);
+const emit = defineEmits(['close', 'update:selected']);
 
 const types = [
   'single-choice',
@@ -19,7 +23,7 @@ const types = [
 ];
 
 function select(id) {
-  emit('update:modelValue', id);
+  emit('update:selected', id);
   emit('close');
 }
 </script>
@@ -30,19 +34,46 @@ function select(id) {
       <h3>{{ $t('voting.selectVoting') }}</h3>
     </template>
     <div class="mt-4 mx-0 md:mx-4">
-      <a v-if="selected" @click="select(undefined)">
-        <Block>
+      <a v-if="allowAny" @click="select(undefined)">
+        <Block
+          :class="[
+            'transition-colors relative voting-type',
+            { 'voting-type-active': !selected }
+          ]"
+        >
+          <i
+            v-if="!selected"
+            class="iconfont iconcheck1 absolute top-2 right-2 text-lg"
+          />
           <h3>
             {{ $t('settings.anyType') }}
           </h3>
         </Block>
       </a>
-      <a v-for="type in types" :key="type" @click="select(type)">
-        <Block class="button--submit">
-          <h3 v-text="$t(`voting.${type}`)" />
+      <a v-for="(type, key) in types" :key="key" @click="select(type)">
+        <Block
+          :class="[
+            'transition-colors relative voting-type',
+            { 'voting-type-active': type === selected }
+          ]"
+        >
+          <i
+            v-if="type === selected"
+            class="iconfont iconcheck1 absolute top-2 right-2 text-lg"
+          />
+          <h3 v-text="$t(`voting.${type}`)" class="mt-0" />
           <div v-text="$t(`voting.description.${type}`)" class="text-color" />
         </Block>
       </a>
     </div>
   </UiModal>
 </template>
+
+<style scoped lang="scss">
+.voting-type {
+  &.voting-type-active,
+  &:hover {
+    border-color: var(--link-color);
+  }
+}
+</style>
diff --git a/src/views/SpaceCreate.vue b/src/views/SpaceCreate.vue
@@ -416,7 +416,7 @@ watchEffect(() => {
     <ModalVotingType
       :open="modalVotingTypeOpen"
       @close="modalVotingTypeOpen = false"
-      v-model="form.type"
+      v-model:selected="form.type"
     />
   </teleport>
 </template>

diff --git a/src/views/SpaceSettings.vue b/src/views/SpaceSettings.vue
@@ -665,8 +665,8 @@ watchEffect(async () => {
     <ModalVotingType
       :open="modalVotingTypeOpen"
       @close="modalVotingTypeOpen = false"
-      v-model="form.voting.type"
-      :selected="form.voting?.type"
+      v-model:selected="form.voting.type"
+      allowAny
     />
   </teleport>
 </template>