From 470b89ef7fc9a9c5643d5eacc399419095250b15 Mon Sep 17 00:00:00 2001
From: Slava <slavik-undead@mail.ru>
Date: Fri, 15 May 2020 10:07:12 +0300
Subject: [PATCH] design rework

---
 experra_forum/src/components/ForumSection.vue |  49 +++++---
 experra_forum/src/components/TopicThread.vue  | 108 ++++++++++++++++++
 experra_forum/src/css/quasar.variables.sass   |   4 +-
 experra_forum/src/layouts/MainLayout.vue      |  24 +++-
 experra_forum/src/pages/Index.vue             |  75 ++----------
 experra_forum/src/pages/NewTopic.vue          |  31 -----
 experra_forum/src/pages/Topic.vue             |  65 ++---------
 experra_forum/src/pages/Topics.vue            |  67 ++++++++---
 experra_forum/src/router/routes.js            |   1 -
 9 files changed, 228 insertions(+), 196 deletions(-)
 create mode 100644 experra_forum/src/components/TopicThread.vue
 delete mode 100644 experra_forum/src/pages/NewTopic.vue

diff --git a/experra_forum/src/components/ForumSection.vue b/experra_forum/src/components/ForumSection.vue
index 0a80a6a..0767876 100644
--- a/experra_forum/src/components/ForumSection.vue
+++ b/experra_forum/src/components/ForumSection.vue
@@ -1,33 +1,54 @@
 <template>
-  <q-list bordered padding>
-    <q-item>
-      <q-item-section>
-        <q-item-label overline>{{title}}</q-item-label>
-        <q-item-label caption>{{description}}</q-item-label>
+  <q-list 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>
       </q-item-section>
-
-      <q-item-section side top>
-        <q-item-label caption>Последнее сообщение: 5 мин. назад</q-item-label>
+      <q-item-section v-if="topicsMode" style="display: flex; flex-basis: 50%;" side top>
+        <q-expansion-item
+        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-separator spaced />
+    <q-separator />
     <q-item-label header>{{topicsMode ? "Темы" : "Разделы"}}</q-item-label>
     <q-item @click="moveTo()" clickable v-ripple v-for="item in items" :key="item.name">
       <q-item-section center avatar>
-        <q-icon :name="topicsMode ? 'arrow_right' : item.icon" color="primary"/>
+        <q-icon :name="item.icon" color="primary"/>
       </q-item-section>
 
       <q-item-section>
         <q-item-label>{{item.name}}</q-item-label>
-        <q-item-label caption>{{item.description}}</q-item-label>
       </q-item-section>
 
       <q-item-section class="q-mt-sm" side top>
-        <q-badge class="q-mb-sm" :label="'Сообщения: ' + item.nMessages" />
-        <q-badge v-if="!topicsMode" :label="'Темы: ' + item.nTopics" />
+        <q-badge v-if="topicsMode" class="q-mb-sm text-h6">
+          {{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">
+          {{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 class="q-ml-md" style="max-width: 300px; min-width: 300px" top>
+      <q-item-section v-if="item.lastMessage" class="q-ml-md" style="max-width: 300px; min-width: 300px" top>
         Последнее сообщение: <br>
         от {{item.lastMessage.from}}, {{item.lastMessage.time}} <br>
         <p v-if="!topicsMode"> тема: "{{item.lastMessage.topic}}" </p>
diff --git a/experra_forum/src/components/TopicThread.vue b/experra_forum/src/components/TopicThread.vue
new file mode 100644
index 0000000..e6fb3f2
--- /dev/null
+++ b/experra_forum/src/components/TopicThread.vue
@@ -0,0 +1,108 @@
+<template>
+  <q-card>
+    <q-card-section v-for="item in items" v-bind:key="item.num">
+      <div class="row q-pb-md">
+        <div style="display: flex; flex-basis: 20%;">
+          <div class="col">
+            <p><b>{{item.name}} </b>
+              <q-badge v-if="item.isTS">Автор</q-badge>
+              <q-badge class="q-ml-sm" v-if="item.isTS" color="negative">Админ</q-badge>
+            </p>
+            <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" />
+            <q-rating
+              v-model="item.rating"
+              size="1.5em"
+              icon="star"
+            />
+          </div>
+        </div>
+      </div>
+      <q-separator inset />
+    </q-card-section>
+    <q-card-section>
+      <q-card-section 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>
+        </div>
+      </q-card-section>
+
+      <q-card-actions align="right">
+        <q-btn @click="createNewTopic" flat label="Ответить" color="primary" v-close-popup />
+      </q-card-actions>
+    </q-card-section>
+  </q-card>
+</template>
+<script>
+export default {
+  name: 'TopicThread',
+  data () {
+    return {
+      links: [],
+      editor: ''
+    }
+  },
+  props: {
+    items: {
+      type: Array,
+      default: () => [
+        {
+          name: 'kekus maximus',
+          text: 'Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.',
+          isDeleted: false,
+          isTS: true,
+          isAdmin: true,
+          attachedFiles: ['lul.com', 'kek.kek'],
+          num: 1,
+          time: '19:20',
+          rating: 3
+        },
+        {
+          name: 'kekus maximus',
+          text: 'Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.',
+          isDeleted: false,
+          isTS: true,
+          isAdmin: true,
+          attachedFiles: ['lul.com', 'kek.kek'],
+          num: 2,
+          time: '19:20',
+          rating: 3
+        },
+        {
+          name: 'kekus maximus',
+          text: 'Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.',
+          isDeleted: false,
+          isTS: true,
+          isAdmin: true,
+          attachedFiles: ['lul.com', 'kek.kek'],
+          num: 3,
+          time: '19:20',
+          rating: 3
+        }
+      ]
+    }
+  },
+  methods: {
+    goToLink () {
+      alert('ПРЫГ')
+    },
+    createAttachment () {
+      this.links.push({ text: '' })
+    }
+  }
+}
+</script>
diff --git a/experra_forum/src/css/quasar.variables.sass b/experra_forum/src/css/quasar.variables.sass
index cf59b8e..a743ccb 100644
--- a/experra_forum/src/css/quasar.variables.sass
+++ b/experra_forum/src/css/quasar.variables.sass
@@ -12,8 +12,8 @@
 // to match your app's branding.
 // Tip: Use the "Theme Builder" on Quasar's documentation website.
 
-$primary   : #1976D2
-$secondary : #26A69A
+$primary   : #3E53B4
+$secondary : #7B89CA
 $accent    : #9C27B0
 
 $dark      : #1D1D1D
diff --git a/experra_forum/src/layouts/MainLayout.vue b/experra_forum/src/layouts/MainLayout.vue
index 63b2026..6c98f2c 100644
--- a/experra_forum/src/layouts/MainLayout.vue
+++ b/experra_forum/src/layouts/MainLayout.vue
@@ -12,21 +12,21 @@
         />
 
         <q-toolbar-title>
-          Форум экспертов EXPERRA
+          Форум ЭкспеРО
         </q-toolbar-title>
       </q-toolbar>
     </q-header>
 
     <q-drawer
       v-model="leftDrawerOpen"
-      show-if-above
       bordered
       content-class="bg-grey-1"
     >
       <q-list>
         <q-item-label
           header
-          class="text-grey-8"
+          style="background-color: #7B89CA"
+          class="text-white text-h6"
         >
           Меню
         </q-item-label>
@@ -59,19 +59,31 @@ export default {
       leftDrawerOpen: false,
       essentialLinks: [
         {
-          title: 'Глагне',
+          title: 'Приборная панель',
           caption: 'Перейти на глагне',
           icon: 'backspace',
           link: '/'
         },
         {
-          title: 'Experra',
+          title: 'Пользователи',
           caption: 'Перейти на площадку',
           icon: 'school',
           link: 'https://quasar.dev'
         },
         {
-          title: 'Выйти',
+          title: 'Дополнительные поля',
+          caption: 'Выйти из платформы',
+          icon: 'subdirectory_arrow_left',
+          link: 'https://github.com/quasarframework'
+        },
+        {
+          title: 'Зоны ответственности',
+          caption: 'Выйти из платформы',
+          icon: 'subdirectory_arrow_left',
+          link: 'https://github.com/quasarframework'
+        },
+        {
+          title: 'Группы черт',
           caption: 'Выйти из платформы',
           icon: 'subdirectory_arrow_left',
           link: 'https://github.com/quasarframework'
diff --git a/experra_forum/src/pages/Index.vue b/experra_forum/src/pages/Index.vue
index 1d687bd..a7ef780 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 justify-center full-height">
-    <ForumSection v-for="section in sections" :key="section.name" class="q-mb-md" :title="section.name" :description="section.description" :items="section.items"/>
+  <div class="q-pa-md row justify-center full-height">
+    <ForumSection style="max-width: 700px" class="q-mb-md col" title="Семейства методик" description="Какое-то описание" :items="sections"/>
   </div>
 </template>
 
@@ -15,72 +15,11 @@ export default {
   data () {
     return {
       sections: [
-        {
-          name: 'Семейство методик 1',
-          description: 'Описание семейства 1',
-          items: [
-            {
-              name: 'razdel 1',
-              description: 'razdel 1 description',
-              icon: 'school',
-              nMessages: 10,
-              nTopics: 10,
-              lastMessage: { from: 'Василий Терентьев', time: 'Сегодня 19:20', topic: 'Как пропатчить KDE2 под FreeBSD' }
-            },
-            {
-              name: 'razdel 2',
-              description: 'razdel 2 description',
-              icon: 'arrow_left',
-              nMessages: 110,
-              nTopics: 1110,
-              lastMessage: { from: 'Ольга Быстрая', time: 'Вчера 08:20', topic: 'Сап эксперач!' }
-            }
-          ]
-        },
-        {
-          name: 'Семейство методик 2',
-          description: 'Описание семейства 2',
-          items: [
-            {
-              name: 'Музыка',
-              description: 'razddescription',
-              icon: 'school',
-              nMessages: 10,
-              nTopics: 10,
-              lastMessage: { from: 'Василий Терентьев', time: 'Сегодня 19:20', topic: 'Как пропатчить KDE2 под FreeBSD' }
-            },
-            {
-              name: 'Анимэ',
-              description: 'description',
-              icon: 'check',
-              nMessages: 110,
-              nTopics: 1110,
-              lastMessage: { from: 'Ольга Быстрая', time: 'Вчера 08:20', topic: 'Сап эксперач!' }
-            },
-            {
-              name: 'Обучение школьников',
-              description: 'description',
-              icon: 'arrow_left',
-              nMessages: 110,
-              nTopics: 1110,
-              lastMessage: { from: 'Ольга Быстрая', time: 'Вчера 08:20', topic: 'Сап эксперач!' }
-            }
-          ]
-        },
-        {
-          name: 'Кошки',
-          description: 'Описание семейства 3',
-          items: [
-            {
-              name: 'Флудилка',
-              description: 'description',
-              icon: 'map',
-              nMessages: 110,
-              nTopics: 1110,
-              lastMessage: { from: 'Ольга Быстрая', time: 'Вчера 08:20', topic: 'Сап эксперач!' }
-            }
-          ]
-        }
+        { name: 'Семейство 1', icon: 'error', nMessages: 10, nTopics: 10 },
+        { name: 'Семейство 2', icon: 'error', 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 }
       ]
     }
   }
diff --git a/experra_forum/src/pages/NewTopic.vue b/experra_forum/src/pages/NewTopic.vue
deleted file mode 100644
index d437a67..0000000
--- a/experra_forum/src/pages/NewTopic.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<template>
-  <div class="q-pa-md q-gutter-sm">
-    <q-input v-model="title" label="Название" stack-label :dense="dense" />
-    <q-editor v-model="editor" min-height="5rem" />
-
-    <q-card flat bordered>
-      <q-badge label="Предпросмотр" />
-      <!--q-badge class="q-mb-sm" :label="'Сообщения: ' + item.nMessages" /-->
-      <q-card-section v-html="editor" />
-    </q-card>
-    <q-btn @click="createNewTopic" label="Создать"/>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'NewTopic',
-  data () {
-    return {
-      title: null,
-      editor: null
-    }
-  },
-
-  methods: {
-    createNewTopic () {
-      this.$router.push({ path: '/topics/1' })
-    }
-  }
-}
-</script>
diff --git a/experra_forum/src/pages/Topic.vue b/experra_forum/src/pages/Topic.vue
index 0be2f1f..be6ecd3 100644
--- a/experra_forum/src/pages/Topic.vue
+++ b/experra_forum/src/pages/Topic.vue
@@ -1,68 +1,17 @@
 <template>
-  <div class="q-pa-md q-gutter-sm">
-    <q-card flat bordered>
-      <p class="text-h5 q-pa-md">Название темы</p>
-      <p class="q-pa-md">Многие думают, что Lorem Ipsum - взятый с потолка псевдо-латинский набор слов, но это не совсем так. Его корни уходят в один фрагмент классической латыни 45 года н.э., то есть более двух тысячелетий назад. Ричард МакКлинток, профессор латыни из колледжа Hampden-Sydney, штат Вирджиния, взял одно из самых странных слов в Lorem Ipsum, "consectetur", и занялся его поисками в классической латинской литературе. В результате он нашёл неоспоримый первоисточник Lorem Ipsum в разделах 1.10.32 и 1.10.33 книги "de Finibus Bonorum et Malorum" ("О пределах добра и зла"), написанной Цицероном в 45 году н.э. Этот трактат по теории этики был очень популярен в эпоху Возрождения. Первая строка Lorem Ipsum, "Lorem ipsum dolor sit amet..", происходит от одной из строк в разделе 1.10.32</p>
-      <q-separator spaced />
-      <div class="row" style="display: flex; width: 100%;">
-        <p style="display: flex; flex-basis: 50%;" class="text-subtitle2 q-pa-sm q-mt-md">Иван Иванов, Сегодня 17:03</p>
-        <div class="row" style="display: flex; flex-basis: 50%; justify-content: flex-end;">
-          <q-btn size="30px" flat style="color: #0000FF">+</q-btn>
-          <p class="text-h6 q-pa-sm q-mt-md">10</p>
-          <q-btn size="30px" flat style="color: #FF0080">-</q-btn>
-        </div>
-      </div>
-    </q-card>
-    <q-card class="q-ml-xl" flat bordered>
-      <p class="q-pa-md">Многие думают, что Lorem Ipsum - взятый с потолка псевдо-латинский набор слов, но это не совсем так. Его корни уходят в один фрагмент классической латыни 45 года н.э., то есть более двух тысячелетий назад. Ричард МакКлинток, профессор латыни из колледжа Hampden-Sydney, штат Вирджиния, взял одно из самых странных слов в Lorem Ipsum, "consectetur", и занялся его поисками в классической латинской литературе. В результате он нашёл неоспоримый первоисточник Lorem Ipsum в разделах 1.10.32 и 1.10.33 книги "de Finibus Bonorum et Malorum" ("О пределах добра и зла"), написанной Цицероном в 45 году н.э. Этот трактат по теории этики был очень популярен в эпоху Возрождения. Первая строка Lorem Ipsum, "Lorem ipsum dolor sit amet..", происходит от одной из строк в разделе 1.10.32</p>
-      <q-separator spaced />
-      <div class="row" style="display: flex; width: 100%;">
-        <p style="display: flex; flex-basis: 50%;" class="text-subtitle2 q-pa-sm q-mt-md">Олег Олегов, Сегодня 17:04</p>
-        <div class="row" style="display: flex; flex-basis: 50%; justify-content: flex-end;">
-          <q-btn size="30px" flat style="color: #0000FF">+</q-btn>
-          <p class="text-h6 q-pa-sm q-mt-md">11</p>
-          <q-btn size="30px" flat style="color: #FF0080">-</q-btn>
-        </div>
-      </div>
-    </q-card>
-    <q-card class="q-ml-xl" flat bordered>
-      <p class="q-pa-md">Многие думают, что Lorem Ipsum - взятый с потолка псевдо-латинский набор слов, но это не совсем так. Его корни уходят в один фрагмент классической латыни 45 года н.э., то есть более двух тысячелетий назад. Ричард МакКлинток, профессор латыни из колледжа </p>
-      <q-separator spaced />
-      <div class="row" style="display: flex; width: 100%;">
-        <p style="display: flex; flex-basis: 50%;" class="text-subtitle2 q-pa-sm q-mt-md">Алиса Встранечудесова, Сегодня 17:09</p>
-        <div class="row" style="display: flex; flex-basis: 50%; justify-content: flex-end;">
-          <q-btn size="30px" flat style="color: #0000FF">+</q-btn>
-          <p class="text-h6 q-pa-sm q-mt-md">0</p>
-          <q-btn size="30px" flat style="color: #FF0080">-</q-btn>
-        </div>
-      </div>
-    </q-card>
-    <q-card class="q-ml-xl" flat bordered>
-      <p class="q-pa-md">Многие думают, что Lorem Ipsum - взятый с потолка псевдо-латинский набор слов, но это не совсем так. Его корни уходят в один фрагмент классической латыни 45 года н.э., то есть более двух тысячелетий назад. Ричард МакКлинток, профессор латыни из колледжа </p>
-      <q-separator spaced />
-      <div class="row" style="display: flex; width: 100%;">
-        <p style="display: flex; flex-basis: 50%;" class="text-subtitle2 q-pa-sm q-mt-md">Евгений Женин, Сегодня 17:10</p>
-        <div class="row" style="display: flex; flex-basis: 50%; justify-content: flex-end;">
-          <q-btn size="30px" flat style="color: #0000FF">+</q-btn>
-          <p class="text-h6 q-pa-sm q-mt-md">0</p>
-          <q-btn size="30px" flat style="color: #FF0080">-</q-btn>
-        </div>
-      </div>
-    </q-card>
-    <q-separator spaced />
-    <q-editor v-model="editor" min-height="5rem" />
-
-    <q-card flat bordered>
-      <q-badge label="Предпросмотр" />
-      <q-card-section v-html="editor" />
-    </q-card>
-    <q-btn @click="answer" label="Ответить"/>
+  <div class="q-pa-md justify-center full-height row">
+    <TopicThread class="col" style="max-width: 700px;"/>
   </div>
 </template>
 
 <script>
+import TopicThread from 'components/TopicThread'
+
 export default {
   name: 'Topic',
+  components: {
+    TopicThread
+  },
   data () {
     return {
       editor: '',
diff --git a/experra_forum/src/pages/Topics.vue b/experra_forum/src/pages/Topics.vue
index b2f60c9..8e0f287 100644
--- a/experra_forum/src/pages/Topics.vue
+++ b/experra_forum/src/pages/Topics.vue
@@ -1,7 +1,32 @@
 <template>
-  <div class="q-pa-md justify-center full-height">
-    <q-btn @click="goToNewTheme()" class="q-mt-md q-mb-md">Новая тема</q-btn>
-    <ForumSection class="q-mb-md" :title="name" :description="description" :items="themes" :topicsMode="true"/>
+  <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" />
+    </q-page-sticky>
+    <q-dialog v-model="creatingTopic" persistent>
+      <q-card style="width:700px">
+        <q-card-section>
+          <div class="text-h6">Новая тема</div>
+        </q-card-section>
+
+        <q-card-section class="q-pt-none">
+          <div class="q-pa-md q-gutter-sm">
+            <q-input v-model="newTopicTitle" class="text-h5" label="Название" stack-label />
+            <q-editor v-model="newTopicEditor" 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>
+            <p>Важная тема: <q-checkbox v-model="newTopicIsImportant" /></p>
+          </div>
+        </q-card-section>
+
+        <q-card-actions align="right">
+          <q-btn @click="createNewTopic" flat label="OK" color="primary" v-close-popup />
+          <q-btn @click="cleanNewTopicVals" flat label="Закрыть" color="primary" v-close-popup />
+        </q-card-actions>
+      </q-card>
+    </q-dialog>
   </div>
 </template>
 
@@ -15,39 +40,36 @@ export default {
   },
   data () {
     return {
+      links: [],
+      newTopicTitle: '',
+      newTopicEditor: '',
+      creatingTopic: false,
+      newTopicIsImportant: false,
       name: 'Имя раздела',
       description: 'описание',
-      themes: [
+      topics: [
         {
           name: 'tema 1',
-          description: 'razdel 1 description',
-          icon: 'school',
+          icon: 'error',
           nMessages: 10,
-          nTopics: 10,
           lastMessage: { from: 'Василий Терентьев', time: 'Сегодня 19:20', topic: 'Как пропатчить KDE2 под FreeBSD' }
         },
         {
           name: 'tema 3',
-          description: 'razdel 1 description',
-          icon: 'school',
+          icon: 'error',
           nMessages: 10,
-          nTopics: 10,
           lastMessage: { from: 'Василий Терентьев', time: 'Сегодня 19:20', topic: 'Как пропатчить KDE2 под FreeBSD' }
         },
         {
           name: 'tema 4',
-          description: 'razdel 1 description',
-          icon: 'school',
+          icon: 'fiber_manual_record',
           nMessages: 10,
-          nTopics: 10,
           lastMessage: { from: 'Василий Терентьев', time: 'Сегодня 19:20', topic: 'Как пропатчить KDE2 под FreeBSD' }
         },
         {
           name: 'tema 2',
-          description: 'razdel 2 description',
-          icon: 'arrow_left',
+          icon: 'fiber_manual_record',
           nMessages: 110,
-          nTopics: 1110,
           lastMessage: { from: 'Ольга Быстрая', time: 'Вчера 08:20', topic: 'Сап эксперач!' }
         }
       ]
@@ -56,6 +78,19 @@ export default {
   methods: {
     goToNewTheme () {
       this.$router.push({ path: '/new-topic/1' })
+    },
+    createNewTopic () {
+      this.topics.unshift({ name: this.newTopicTitle, icon: 'error', nMessages: 1, lastMessage: { from: 'Василий Терентьев', time: 'Сегодня 19:20', topic: 'Как пропатчить KDE2 под FreeBSD' } })
+      this.cleanNewTopicVals()
+    },
+    cleanNewTopicVals () {
+      this.newTopicTitle = ''
+      this.newTopicEditor = ''
+      this.links = []
+      this.newTopicIsImportant = false
+    },
+    createAttachment () {
+      this.links.push({ text: '' })
     }
   }
 }
diff --git a/experra_forum/src/router/routes.js b/experra_forum/src/router/routes.js
index 10223a1..50ae134 100644
--- a/experra_forum/src/router/routes.js
+++ b/experra_forum/src/router/routes.js
@@ -6,7 +6,6 @@ const routes = [
     children: [
       { path: '', component: () => import('pages/Index.vue') },
       { path: '/topics/:id', component: () => import('pages/Topics.vue') },
-      { path: '/new-topic/:id', component: () => import('pages/NewTopic.vue') },
       { path: '/topic/:id', component: () => import('pages/Topic.vue') }
     ]
   }