faq styles

src/components/Widgets/FAQ/FAQ.vue

@@ -8,17 +8,24 @@
       </div>
     </div>
     <div class="faq-content">
-      <q-virtual-scroll v-slot="{ item, index }"
-                        :items="localOptions.topics"
-                        virtual-scroll-horizontal>
-        <q-btn :key="index"
-               color="primary"
-               class="q-ma-md"
+      <div class="faq-topics">
+        <q-virtual-scroll v-slot="{ item, index }"
+                          :items="localOptions.topics"
+                          virtual-scroll-horizontal>
+          <div :key="index"
+               class="topic-item"
+               :class="{'selected': topicIndex === index}"
                @click="topicIndex=index">
-          {{ item.title }}
-        </q-btn>
-      </q-virtual-scroll>
-
+            <div class="icon">
+              <q-icon :name="item.icon"
+                      size="40px" />
+            </div>
+            <div class="title ellipsis-2-lines">
+              {{ item.title }}
+            </div>
+          </div>
+        </q-virtual-scroll>
+      </div>
       <q-tab-panels v-model="topicIndex"
                     animated>
         <q-tab-panel v-for="(topic, topicIndex) in localOptions.topics"
@@ -64,5 +71,64 @@ export default {
     justify-content: space-between;
     padding-bottom: 33px;
   }
+  .faq-content {
+    .faq-topics {
+      display: flex;
+      flex-flow: row;
+      justify-content: center;
+      align-items: center;
+      position: relative;
+      z-index: 2;
+      :deep(.q-virtual-scroll__content) {
+        padding-left: 5px;
+        padding-bottom: 5px;
+        .topic-item {
+          background: #FBF4EA;
+          box-shadow: 0 0 5px #00000029;
+          border-radius: 54px 54px 0 54px;
+          width: 200px;
+          height: 174px;
+          margin-right: 24px;
+          border-top: solid 12px $primary;
+          padding: 0 15px;
+          display: flex;
+          flex-flow: column;
+          justify-content: center;
+          align-items: center;
+          cursor: pointer;
+          &:hover {
+            box-shadow: 0 0 10px #00000029;
+          }
+          .icon {
+            margin-top: 46px;
+            color: $primary;
+          }
+          .title {
+            margin-top: 19.3px;
+          }
+          &.selected {
+            background: #FFFFFF;
+          }
+        }
+      }
+    }
+    .q-tab-panels {
+      $topSpace: 85px;
+      background: #F6F6F6;
+      border-radius: 20px;
+      margin-top: -$topSpace;
+      padding-top: $topSpace;
+      position: relative;
+      z-index: 1;
+      .q-panel {
+        .q-tab-panel {
+          .q-expansion-item {
+            background: white;
+            margin-bottom: 20px;
+          }
+        }
+      }
+    }
+  }
 }
 </style>

src/components/Widgets/FAQ/OptionPanel.vue

@@ -11,7 +11,11 @@
                    @click="removeTopic(topicIndex)">
               حذف موضوع
             </q-btn>
-            ({{ topic.title }})
+            (
+            <q-icon :name="localOptions.topics[topicIndex].icon"
+                    size="30px" />
+            {{ topic.title }}
+            )
           </div>
         </template>
         <q-card class="bg-grey-3">
@@ -20,6 +24,14 @@
               عنوان موضوع
             </div>
             <q-input v-model="localOptions.topics[topicIndex].title" />
+            <div>
+              آیکون موضوع
+            </div>
+            <div>
+              <icon-sax v-model:icon="localOptions.topics[topicIndex].icon"
+                        :select-type="'emit'" />
+            </div>
+
             <q-separator />
             <div v-for="(subTopic, subTopicIndex) in topic.subTopics"
                  :key="subTopicIndex"
@@ -58,11 +70,12 @@
 <script>
 import { defineComponent } from 'vue'
 import { mixinOptionPanel } from 'quasar-ui-q-page-builder'
+import IconSax from 'src/pages/Document/IconSax.vue'
 import OptionPanelTabs from 'quasar-ui-q-page-builder/src/components/OptionPanelComponents/OptionPanelTabs.vue'
 
 export default defineComponent({
   name: 'OptionPanel',
-  components: { OptionPanelTabs },
+  components: { OptionPanelTabs, IconSax },
   mixins: [mixinOptionPanel],
   data() {
     return {

src/pages/Document/IconSax.vue

@@ -19,7 +19,7 @@
                      :icon="'isax:' + svgIcon"
                      flat
                      class="full-width"
-                     @click="copyIconName('isax:' + svgIcon)" />
+                     @click="onSelect('isax:' + svgIcon)" />
             </div>
           </div>
         </q-card-section>
@@ -31,8 +31,19 @@
 <script>
 import { copyToClipboard } from 'quasar'
 import IconList from 'src/iconListDoocument/font-icons.js'
+
 export default {
   name: 'IconSax',
+  props: {
+    selectType: {
+      type: String,
+      default: 'copyToClipboard'
+    },
+    icon: {
+      type: String,
+      default: null
+    }
+  },
   data () {
     return {
       filterIconName: null
@@ -47,6 +58,13 @@ export default {
     }
   },
   methods: {
+    onSelect (iconName) {
+      if (this.selectType === 'copyToClipboard') {
+        this.copyIconName(iconName)
+      } else {
+        this.$emit('update:icon', iconName)
+      }
+    },
     copyIconName (iconName) {
       copyToClipboard(iconName)
         .then(() => {