test commit

experra_forum/src/components/ForumSection.vue

@@ -8,25 +8,22 @@
       </q-item-section>
       <q-item-section v-if="topicsMode" style="display: flex; flex-basis: 50%;" side top>
         <q-expansion-item
+        v-model="infoExpanded"
         expand-separator
         label="Информация"
         header-class="primary"
         >
-          <q-card style="background-color: #f8f8fc;">
-            <q-card-section>
-              {{description}}
-            </q-card-section>
-          </q-card>
         </q-expansion-item>
       </q-item-section>
-
+    </q-item>
+    <q-item v-if="infoExpanded" style="background-color: #f8f8fc;">
+      {{description}}
     </q-item>
 
     <q-separator />
-    <q-item-label header>{{topicsMode ? "Темы" : "Разделы"}}</q-item-label>
+    <q-item @click="moveTo()" clickable v-ripple v-for="item in pages[pageN]" :key="item.name">
-    <q-item @click="moveTo()" clickable v-ripple v-for="item in items" :key="item.name">
       <q-item-section center avatar>
-        <q-icon :name="item.icon" color="primary"/>
+        <q-icon :size="'xs'" :name="item.icon" color="primary"/>
       </q-item-section>
 
       <q-item-section>
@@ -34,19 +31,18 @@
       </q-item-section>
 
       <q-item-section class="q-mt-sm" side top>
-        <q-badge v-if="topicsMode" class="q-mb-sm text-h6">
+        <q-badge v-if="topicsMode" class="q-mb-sm">
           {{item.nMessages}}
           <q-tooltip content-class="bg-indigo" :offset="[10, 10]">
             Сообщения
           </q-tooltip>
         </q-badge>
-        <q-badge v-else class="q-mb-sm text-h6">
+        <q-badge v-else class="q-mb-sm">
           {{item.nTopics}}
           <q-tooltip content-class="bg-indigo" :offset="[10, 10]">
             Темы
           </q-tooltip>
         </q-badge>
-        <!--q-badge v-if="!topicsMode" :label="'Темы: ' + item.nTopics" /-->
       </q-item-section>
       <q-item-section v-if="item.lastMessage" class="q-ml-md" style="max-width: 300px; min-width: 300px" top>
         Последнее сообщение: <br>
@@ -54,11 +50,28 @@
         <p v-if="!topicsMode"> тема: "{{item.lastMessage.topic}}" </p>
       </q-item-section>
     </q-item>
+    <q-separator />
+    <q-item>
+      <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" />
+      <q-btn outline color="primary" :label="pageN + 1" />
+      <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-item>
   </q-list>
 </template>
 <script>
 export default {
   name: 'ForumSelection',
+  data () {
+    return ({
+      pages: [],
+      pageN: 0,
+      infoExpanded: false
+    })
+  },
   props: {
     title: {
       type: String,
@@ -82,6 +95,23 @@ export default {
     topicsMode: {
       type: Boolean,
       default: false
+    },
+    maxPerPage: {
+      type: Number
+    }
+  },
+  beforeMount () {
+    const self = this
+    let page = []
+    this.items.forEach((el) => {
+      page.push(el)
+      if (page.length === self.maxPerPage) {
+        self.pages.push(page)
+        page = []
+      }
+    })
+    if (page.length !== 0) {
+      self.pages.push(page)
     }
   },
   methods: {

experra_forum/src/layouts/MainLayout.vue

@@ -1,8 +1,9 @@
 <template>
-  <q-layout view="lHh Lpr lFf">
+  <q-layout style="background-color: #f5f5f5;" view="lHh Lpr lFf">
-    <q-header elevated>
+    <q-header>
       <q-toolbar>
         <q-btn
+          v-if="$q.screen.width < 1200"
           flat
           dense
           round
@@ -10,31 +11,75 @@
           aria-label="Menu"
           @click="leftDrawerOpen = !leftDrawerOpen"
         />
-
+        <q-space />
-        <q-toolbar-title>
+        <q-btn-dropdown flat :label="'Иван Иванов'">
-          Форум ЭкспеРО
+         <q-list>
-        </q-toolbar-title>
+           <q-item clickable v-close-popup tabindex="0" v-ripple>
+             <q-item-section>
+               <q-item-label>Выйти</q-item-label>
+             </q-item-section>
+             <q-item-section side>
+               <q-icon name="exit_to_app" />
+             </q-item-section>
+           </q-item>
+         </q-list>
+       </q-btn-dropdown>
       </q-toolbar>
     </q-header>
 
     <q-drawer
       v-model="leftDrawerOpen"
-      bordered
+      show-if-above
-      content-class="bg-grey-1"
+      content-class="bg-white"
     >
       <q-list>
         <q-item-label
           header
-          style="background-color: #7B89CA"
+          style="background-color: #7B89CA; height: 50px"
-          class="text-white text-h6"
+          class="text-white text-h6 text-center"
         >
-          Меню
+          ЭкспеРО
         </q-item-label>
-        <EssentialLink
+        <q-item
-          v-for="link in essentialLinks"
+          v-for="option in menu.options"
-          :key="link.title"
+          :key="option.title"
-          v-bind="link"
+          clickable
-        />
+          @click="menu.chosenOption = option"
+        >
+          <q-item-section
+            v-if="option.icon"
+            avatar
+          >
+            <q-icon :name="option.icon" />
+          </q-item-section>
+
+          <q-item-section>
+            <q-item-label>{{ option.title }}</q-item-label>
+          </q-item-section>
+        </q-item>
+        <div v-if="menu.chosenOption">
+          <q-item style="background-color: #7b89ca">
+            <q-item-section>
+              {{menu.chosenOption.title}}
+            </q-item-section>
+          </q-item>
+          <q-item
+            v-for="suboption in menu.chosenOption.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>
+        </div>
       </q-list>
     </q-drawer>
 
@@ -45,51 +90,108 @@
 </template>
 
 <script>
-import EssentialLink from 'components/EssentialLink'
+// import EssentialLink from 'components/EssentialLink'
 
 export default {
   name: 'MainLayout',
 
-  components: {
+  // components: {
-    EssentialLink
+  //   EssentialLink
-  },
+  // },
 
   data () {
     return {
       leftDrawerOpen: false,
-      essentialLinks: [
+      menu: {
+        chosenOption: null,
+        options: [
           {
             title: 'Приборная панель',
-          caption: 'Перейти на глагне',
             icon: 'backspace',
-          link: '/'
+            suboptions: [
+              {
+                title: 'Пользователи',
+                icon: 'school',
+                link: 'https://quasar.dev'
+              },
+              {
+                title: 'Дополнительные поля',
+                icon: 'subdirectory_arrow_left',
+                link: 'https://github.com/quasarframework'
+              },
+              {
+                title: 'Зоны ответственности',
+                icon: 'subdirectory_arrow_left',
+                link: 'https://github.com/quasarframework'
+              }
+            ]
           },
           {
             title: 'Пользователи',
-          caption: 'Перейти на площадку',
+            icon: 'school',
+            suboptions: [
+              {
+                title: 'Пользователи',
                 icon: 'school',
                 link: 'https://quasar.dev'
               },
               {
                 title: 'Дополнительные поля',
-          caption: 'Выйти из платформы',
                 icon: 'subdirectory_arrow_left',
                 link: 'https://github.com/quasarframework'
               },
               {
                 title: 'Зоны ответственности',
-          caption: 'Выйти из платформы',
                 icon: 'subdirectory_arrow_left',
                 link: 'https://github.com/quasarframework'
+              }
+            ]
           },
           {
-          title: 'Группы черт',
+            title: 'Дополнительные поля',
-          caption: 'Выйти из платформы',
+            icon: 'subdirectory_arrow_left',
+            suboptions: [
+              {
+                title: 'Пользователи',
+                icon: 'school',
+                link: 'https://quasar.dev'
+              },
+              {
+                title: 'Дополнительные поля',
+                icon: 'subdirectory_arrow_left',
+                link: 'https://github.com/quasarframework'
+              },
+              {
+                title: 'Зоны ответственности',
+                icon: 'subdirectory_arrow_left',
+                link: 'https://github.com/quasarframework'
+              }
+            ]
+          },
+          {
+            title: 'Зоны ответственности',
+            icon: 'subdirectory_arrow_left',
+            suboptions: [
+              {
+                title: 'Пользователи',
+                icon: 'school',
+                link: 'https://quasar.dev'
+              },
+              {
+                title: 'Дополнительные поля',
                 icon: 'subdirectory_arrow_left',
                 link: 'https://github.com/quasarframework'
+              },
+              {
+                title: 'Зоны ответственности',
+                icon: 'subdirectory_arrow_left',
+                link: 'https://github.com/quasarframework'
+              }
+            ]
           }
         ]
       }
     }
+  }
 }
 </script>

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="Какое-то описание" :items="sections"/>
+    <ForumSection style="max-width: 700px" class="q-mb-md col" title="Семейства методик" description="Какое-то описание" :maxPerPage="3" :items="sections"/>
   </div>
 </template>
 
@@ -15,8 +15,8 @@ export default {
   data () {
     return {
       sections: [
-        { name: 'Семейство 1', icon: 'error', nMessages: 10, nTopics: 10 },
+        { name: 'Семейство 1', icon: 'warning', nMessages: 10, nTopics: 10 },
-        { name: 'Семейство 2', icon: 'error', nMessages: 10, nTopics: 10 },
+        { name: 'Семейство 2', icon: 'warning', nMessages: 10, nTopics: 10 },
         { name: 'Семейство 5', icon: 'fiber_manual_record', nMessages: 10, nTopics: 10 },
         { name: 'Семейство 14', icon: 'fiber_manual_record', nMessages: 10, nTopics: 10 },
         { name: 'Семейство -1', icon: 'fiber_manual_record', nMessages: 10, nTopics: 10 }

experra_forum/src/pages/Topics.vue

@@ -50,13 +50,13 @@ export default {
       topics: [
         {
           name: 'tema 1',
-          icon: 'error',
+          icon: 'warning',
           nMessages: 10,
           lastMessage: { from: 'Василий Терентьев', time: 'Сегодня 19:20', topic: 'Как пропатчить KDE2 под FreeBSD' }
         },
         {
           name: 'tema 3',
-          icon: 'error',
+          icon: 'warning',
           nMessages: 10,
           lastMessage: { from: 'Василий Терентьев', time: 'Сегодня 19:20', topic: 'Как пропатчить KDE2 под FreeBSD' }
         },