From 97ef4c3e081e0caf0f67abc10438152055eeb0d8 Mon Sep 17 00:00:00 2001
From: Slava <slavik-undead@mail.ru>
Date: Fri, 22 May 2020 13:47:39 +0300
Subject: [PATCH] lots of fixes

---
 experra_forum/src/components/ForumSection.vue | 18 +++--
 experra_forum/src/components/TopicThread.vue  | 77 +++++++++++++++----
 experra_forum/src/layouts/MainLayout.vue      | 63 +++++++++++----
 experra_forum/src/pages/Index.vue             |  2 +-
 experra_forum/src/pages/Topic.vue             |  2 +-
 experra_forum/src/pages/Topics.vue            |  7 +-
 6 files changed, 129 insertions(+), 40 deletions(-)

diff --git a/experra_forum/src/components/ForumSection.vue b/experra_forum/src/components/ForumSection.vue
index 856bb49..69455c7 100644
--- a/experra_forum/src/components/ForumSection.vue
+++ b/experra_forum/src/components/ForumSection.vue
@@ -1,9 +1,10 @@
 <template>
-  <q-list bordered>
+  <q-list class="shadow-box shadow-1" bordered>
     <q-item class="row" style="background-color: #f8f8fc;">
       <q-item-section style="display: flex; flex-basis: 50%;">
-        <q-item-label class="text-h6">
-          <!--q-btn flat round color="primary" icon="arrow_left" /-->{{title}}
+        <q-item-label class="q-pt-sm text-h5">
+          <q-btn @click="$router.go(-1)" flat round color="primary" icon="arrow_back" />
+          {{title}}
         </q-item-label>
       </q-item-section>
       <q-item-section v-if="topicsMode" style="display: flex; flex-basis: 50%;" side top>
@@ -21,7 +22,7 @@
     </q-item>
 
     <q-separator />
-    <q-item @click="moveTo()" clickable v-ripple v-for="item in pages[pageN]" :key="item.name">
+    <q-item style="background-color: white" @click="moveTo()" clickable v-ripple v-for="item in pages[pageN]" :key="item.name">
       <q-item-section center avatar>
         <q-icon :size="'xs'" :name="item.icon" color="primary"/>
       </q-item-section>
@@ -50,8 +51,7 @@
         <p v-if="!topicsMode"> тема: "{{item.lastMessage.topic}}" </p>
       </q-item-section>
     </q-item>
-    <q-separator />
-    <q-item>
+    <q-item style="background-color: white">
       <q-btn v-if="pageN != 0" @click="pageN = 0" flat color="primary" label="<<" />
       <q-btn v-if="pageN != 0" @click="pageN--" flat color="primary" label="<" />
       <q-btn v-if="pageN != 0" @click="pageN--" flat color="primary" :label="pageN" />
@@ -59,6 +59,12 @@
       <q-btn v-if="pageN + 1 != pages.length" @click="pageN++" flat color="primary" :label="pageN + 2" />
       <q-btn v-if="pageN + 1 != pages.length" @click="pageN++" flat color="primary" label=">" />
       <q-btn v-if="pageN + 1 != pages.length" @click="pageN = pages.length - 1" flat color="primary" label=">>" />
+
+      <!-- <q-btn v-if="pageN != 0" @click="pageN--" flat color="primary" label="<" />
+      <q-btn v-for="i in (5-pageN)" v-if="pageN - i > 0" @click="pageN=i" flat color="primary" :label="pageN" />
+      <q-btn outline color="primary" :label="pageN + 1" />
+      <q-btn v-for="i in (5-pageN)" v-if="pageN - i > 0" @click="pageN=i" flat color="primary" :label="pageN" />
+      <q-btn v-if="pageN + 1 != pages.length" @click="pageN++" flat color="primary" label=">" /> -->
     </q-item>
   </q-list>
 </template>
diff --git a/experra_forum/src/components/TopicThread.vue b/experra_forum/src/components/TopicThread.vue
index e6fb3f2..dc016ea 100644
--- a/experra_forum/src/components/TopicThread.vue
+++ b/experra_forum/src/components/TopicThread.vue
@@ -1,6 +1,16 @@
 <template>
   <q-card>
-    <q-card-section v-for="item in items" v-bind:key="item.num">
+    <q-card-section style="background-color: #f8f8fc;">
+      <div class="row">
+        <div style="display: flex; flex-basis: 50%;">
+          <q-item-label class="q-pt-sm text-h5">
+            <q-btn @click="$router.go(-1)" flat round color="primary" icon="arrow_back" />
+            {{topicName}}
+          </q-item-label>
+        </div>
+      </div>
+    </q-card-section>
+    <q-card-section @mouseover="item.buttonsShown = true" @mouseleave="item.buttonsShown = false" v-for="(item, index) in items" v-bind:key="item.num">
       <div class="row q-pb-md">
         <div style="display: flex; flex-basis: 20%;">
           <div class="col">
@@ -11,16 +21,17 @@
             <p>{{item.time}}</p>
           </div>
         </div>
-        <q-separator vertical />
         <div class="col">
           <div class="q-ml-md" style="display: flex; flex-basis: 70%;">{{item.text}}</div>
           <div class="col q-ml-md q-mt-md" style="display: flex; flex-basis: 70%;">
             <p class="row" @click="goToLink(file)" v-for="(file, index) in item.attachedFiles" v-bind:key="index"><q-icon name="attach_file" />{{file}}</p>
           </div>
           <div class="col q-mr-md" style="float: right; display: flex; flex-basis: 70%;">
-            <q-btn class="q-mr-sm" outline round color="primary" icon="question_answer" />
-            <q-btn class="q-mr-sm" outline round color="primary" icon="edit" />
-            <q-btn class="q-mr-sm" outline round color="primary" icon="delete" />
+            <div v-if="item.buttonsShown">
+              <q-btn @click="openAnswer(index)" class="q-mr-sm" flat round color="primary" icon="question_answer" />
+              <q-btn class="q-mr-sm" flat round color="primary" icon="edit" />
+              <q-btn class="q-mr-sm" flat round color="primary" icon="delete" />
+            </div>
             <q-rating
               v-model="item.rating"
               size="1.5em"
@@ -29,17 +40,41 @@
           </div>
         </div>
       </div>
-      <q-separator inset />
+      <q-card-section v-if="item.openedAnswer">
+        <div class="q-pt-none">
+          <div class="q-pa-md q-gutter-sm">
+            <!-- p>Ответ на: <q-btn size="xs" color="primary" icon="close" label="#2" /></p -->
+            <q-editor v-model="editor" min-height="5rem" />
+            <q-input v-for="(link, index) in links" v-bind:key="index" outlined v-model="link.text" label="Ссылка на приложение" />
+            <!-- <q-btn @click="createAttachment" round color="primary" icon="attach_file" /><br> -->
+            <q-btn @click="createAttachment" flat round color="primary" icon="attach_file" /><br>
+          </div>
+        </div>
+
+        <q-card-actions align="right">
+          <q-btn @click="createNewTopic" flat label="Ответить" color="primary" v-close-popup />
+        </q-card-actions>
+      </q-card-section>
     </q-card-section>
     <q-card-section>
-      <q-card-section class="q-pt-none">
+      <q-expansion-item
+        v-model="answerExpanded"
+        expand-separator
+        label="Новое сообщение"
+        header-class="primary"
+        >
+      </q-expansion-item>
+    </q-card-section>
+    <q-card-section v-if="answerExpanded">
+      <div class="q-pt-none">
         <div class="q-pa-md q-gutter-sm">
-          <p>Ответ на: <q-btn size="xs" color="primary" icon="close" label="#2" /></p>
+          <!-- p>Ответ на: <q-btn size="xs" color="primary" icon="close" label="#2" /></p -->
           <q-editor v-model="editor" min-height="5rem" />
           <q-input v-for="(link, index) in links" v-bind:key="index" outlined v-model="link.text" label="Ссылка на приложение" />
-          <q-btn @click="createAttachment" round color="primary" icon="attach_file" /><br>
+          <!-- <q-btn @click="createAttachment" round color="primary" icon="attach_file" /><br> -->
+          <q-btn @click="createAttachment" flat round color="primary" icon="attach_file" /><br>
         </div>
-      </q-card-section>
+      </div>
 
       <q-card-actions align="right">
         <q-btn @click="createNewTopic" flat label="Ответить" color="primary" v-close-popup />
@@ -53,7 +88,9 @@ export default {
   data () {
     return {
       links: [],
-      editor: ''
+      editor: '',
+      answerExpanded: false,
+      topicName: 'Имя темы'
     }
   },
   props: {
@@ -69,7 +106,9 @@ export default {
           attachedFiles: ['lul.com', 'kek.kek'],
           num: 1,
           time: '19:20',
-          rating: 3
+          rating: 3,
+          openedAnswer: false,
+          buttonsShown: false
         },
         {
           name: 'kekus maximus',
@@ -80,7 +119,9 @@ export default {
           attachedFiles: ['lul.com', 'kek.kek'],
           num: 2,
           time: '19:20',
-          rating: 3
+          rating: 3,
+          openedAnswer: false,
+          buttonsShown: false
         },
         {
           name: 'kekus maximus',
@@ -91,7 +132,9 @@ export default {
           attachedFiles: ['lul.com', 'kek.kek'],
           num: 3,
           time: '19:20',
-          rating: 3
+          rating: 3,
+          openedAnswer: false,
+          buttonsShown: false
         }
       ]
     }
@@ -102,6 +145,12 @@ export default {
     },
     createAttachment () {
       this.links.push({ text: '' })
+    },
+    openAnswer (i) {
+      this.items[i].openedAnswer = true
+    },
+    showButtons (i) {
+      this.items[i].buttonsShown = !this.items[i].buttonsShown
     }
   }
 }
diff --git a/experra_forum/src/layouts/MainLayout.vue b/experra_forum/src/layouts/MainLayout.vue
index 40279f6..a2edb5e 100644
--- a/experra_forum/src/layouts/MainLayout.vue
+++ b/experra_forum/src/layouts/MainLayout.vue
@@ -1,7 +1,7 @@
 <template>
   <q-layout style="background-color: #f5f5f5;" view="lHh Lpr lFf">
     <q-header>
-      <q-toolbar>
+      <q-toolbar style="height: 64px">
         <q-btn
           v-if="$q.screen.width < 1200"
           flat
@@ -31,33 +31,58 @@
       v-model="leftDrawerOpen"
       show-if-above
       content-class="bg-white"
+      :width="280"
+      class="shadow-1"
+      elevated
     >
       <q-list>
         <q-item-label
           header
-          style="background-color: #7B89CA; height: 50px"
-          class="text-white text-h6 text-center"
+          style="background-color: #5c6bc0; height: 64px"
+          class="text-white text-h5 text-center"
         >
           ЭкспеРО
         </q-item-label>
         <q-item
+          class="column"
           v-for="option in menu.options"
           :key="option.title"
           clickable
-          @click="menu.chosenOption = option"
+          @click="chooseOption(option)"
         >
-          <q-item-section
-            v-if="option.icon"
-            avatar
-          >
-            <q-icon :name="option.icon" />
-          </q-item-section>
+          <div class="row">
+            <q-item-section
+              v-if="option.icon"
+              avatar
+            >
+              <q-icon size="sm" :name="option.icon" />
+            </q-item-section>
 
-          <q-item-section>
-            <q-item-label>{{ option.title }}</q-item-label>
+            <q-item-section>
+              <q-item-label>{{ option.title }}</q-item-label>
+            </q-item-section>
+          </div>
+          <q-item-section v-if="option.chosen">
+            <!-- style="background-color: #7b89ca" -->
+            <q-item
+              v-for="suboption in option.suboptions"
+              :key="suboption.title"
+              clickable
+            >
+              <q-item-section
+                v-if="suboption.icon"
+                avatar
+              >
+                <q-icon :name="suboption.icon" />
+              </q-item-section>
+
+              <q-item-section>
+                <q-item-label>{{ suboption.title }}</q-item-label>
+              </q-item-section>
+            </q-item>
           </q-item-section>
         </q-item>
-        <div v-if="menu.chosenOption">
+        <!-- <div v-if="menu.chosenOption">
           <q-item style="background-color: #7b89ca">
             <q-item-section>
               {{menu.chosenOption.title}}
@@ -79,7 +104,7 @@
               <q-item-label>{{ suboption.title }}</q-item-label>
             </q-item-section>
           </q-item>
-        </div>
+        </div> -->
       </q-list>
     </q-drawer>
 
@@ -108,6 +133,7 @@ export default {
           {
             title: 'Приборная панель',
             icon: 'backspace',
+            chosen: false,
             suboptions: [
               {
                 title: 'Пользователи',
@@ -129,6 +155,7 @@ export default {
           {
             title: 'Пользователи',
             icon: 'school',
+            chosen: false,
             suboptions: [
               {
                 title: 'Пользователи',
@@ -150,6 +177,7 @@ export default {
           {
             title: 'Дополнительные поля',
             icon: 'subdirectory_arrow_left',
+            chosen: false,
             suboptions: [
               {
                 title: 'Пользователи',
@@ -171,6 +199,7 @@ export default {
           {
             title: 'Зоны ответственности',
             icon: 'subdirectory_arrow_left',
+            chosen: false,
             suboptions: [
               {
                 title: 'Пользователи',
@@ -192,6 +221,12 @@ export default {
         ]
       }
     }
+  },
+  methods: {
+    chooseOption (opt) {
+      this.menu.options.forEach(el => { el.chosen = false })
+      opt.chosen = true
+    }
   }
 }
 </script>
diff --git a/experra_forum/src/pages/Index.vue b/experra_forum/src/pages/Index.vue
index 7982d8b..586086e 100644
--- a/experra_forum/src/pages/Index.vue
+++ b/experra_forum/src/pages/Index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="q-pa-md row justify-center full-height">
-    <ForumSection style="max-width: 700px" class="q-mb-md col" title="Семейства методик" description="Какое-то описание" :maxPerPage="3" :items="sections"/>
+    <ForumSection style="max-width: 905px" class="q-mt-lg q-mb-md col" title="Семейства методик" description="Какое-то описание" :maxPerPage="3" :items="sections"/>
   </div>
 </template>
 
diff --git a/experra_forum/src/pages/Topic.vue b/experra_forum/src/pages/Topic.vue
index be6ecd3..b46afd1 100644
--- a/experra_forum/src/pages/Topic.vue
+++ b/experra_forum/src/pages/Topic.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="q-pa-md justify-center full-height row">
-    <TopicThread class="col" style="max-width: 700px;"/>
+    <TopicThread class="col q-mt-lg " style="max-width: 905px;"/>
   </div>
 </template>
 
diff --git a/experra_forum/src/pages/Topics.vue b/experra_forum/src/pages/Topics.vue
index b94efa3..b7b6160 100644
--- a/experra_forum/src/pages/Topics.vue
+++ b/experra_forum/src/pages/Topics.vue
@@ -1,9 +1,8 @@
 <template>
   <div class="q-pa-md justify-center full-height row">
-    <!--q-btn @click="goToNewTheme()" class="q-mt-md q-mb-md">Новая тема</q-btn-->
-    <ForumSection style="max-width: 700px" class="q-mb-md col" :title="name" :description="description" :items="topics" :topicsMode="true"/>
-    <q-page-sticky position="bottom-right" :offset="[18, 18]">
-      <q-btn @click="creatingTopic=true" fab icon="add" color="primary" />
+    <ForumSection style="max-width: 905px" class="q-mt-lg q-mb-md col" :title="name" :description="description" :items="topics" :topicsMode="true"/>
+    <q-page-sticky position="bottom-right" :offset="[32, 32]">
+      <q-btn @click="creatingTopic=true" fab icon="add" style="background-color: #5c6bc0; color: white" />
     </q-page-sticky>
     <q-dialog v-model="creatingTopic" persistent>
       <q-card style="width:700px">