Merge branch 'help-page' into dev

gustavotoyota · gustavotoyota · commit 2c15b0a7acaf · 2023-07-25T21:45:56.000-04:00
diff --git a/apps/client/components.d.ts b/apps/client/components.d.ts
@@ -19,6 +19,7 @@ declare module '@vue/runtime-core' {
     DisplayBtn: typeof import('./src/components/DisplayBtn.vue')['default']
     EvaluatedPasswordField: typeof import('./src/components/EvaluatedPasswordField.vue')['default']
     Gap: typeof import('./src/components/Gap.vue')['default']
+    InlineGap: typeof import('./src/components/InlineGap.vue')['default']
     LinkURL: typeof import('./src/components/LinkURL.vue')['default']
     LoadingOverlay: typeof import('./src/components/LoadingOverlay.vue')['default']
     MiniSidebarBtn: typeof import('./src/components/MiniSidebarBtn.vue')['default']
diff --git a/apps/client/public/help/how-to-create-a-group/create-new-page.png b/apps/client/public/help/how-to-create-a-group/create-new-page.png
diff --git a/apps/client/public/help/how-to-create-a-group/create-with-options.png b/apps/client/public/help/how-to-create-a-group/create-with-options.png
diff --git a/apps/client/public/help/how-to-create-a-group/new-group.png b/apps/client/public/help/how-to-create-a-group/new-group.png
diff --git a/apps/client/public/help/how-to-create-a-group/new-page-dialog-group.png b/apps/client/public/help/how-to-create-a-group/new-page-dialog-group.png
diff --git a/apps/client/public/help/how-to-create-a-group/new-page-dialog.png b/apps/client/public/help/how-to-create-a-group/new-page-dialog.png
diff --git a/apps/client/src/components/InlineGap.vue b/apps/client/src/components/InlineGap.vue
@@ -0,0 +1,9 @@
+<template>
+  <div class="inline-gap"></div>
+</template>
+
+<style scoped>
+.inline-gap {
+  display: inline-block;
+}
+</style>
diff --git a/apps/client/src/layouts/HomeLayout/Header/Header.vue b/apps/client/src/layouts/HomeLayout/Header/Header.vue
@@ -124,6 +124,19 @@
                   : undefined,
             }"
           />
+
+          <Gap style="width: 12px" />
+
+          <DeepBtn
+            label="Help"
+            flat
+            class="toolbar-btn"
+            :to="{ name: 'help' }"
+            :style="{
+              'background-color':
+                $route.name === 'help' ? 'rgba(255,255,255,0.15)' : undefined,
+            }"
+          />
         </template>
 
         <q-space />
diff --git a/apps/client/src/layouts/HomeLayout/Header/RightButtons/RightButtons.vue b/apps/client/src/layouts/HomeLayout/Header/RightButtons/RightButtons.vue
@@ -25,7 +25,15 @@
         style="height: 46px"
       >
         <span style="font-weight: bold">Go to pages</span>
-        <span style="margin-left: 3px; font-weight: bold; font-size: 1.3em">
+        <span
+          style="
+            position: relative;
+            top: -1px;
+            margin-left: 3px;
+            font-weight: bold;
+            font-size: 1.3em;
+          "
+        >
           →
         </span>
       </DeepBtn>
diff --git a/apps/client/src/layouts/HomeLayout/Header/RightButtons/RightMenu.vue b/apps/client/src/layouts/HomeLayout/Header/RightButtons/RightMenu.vue
@@ -105,6 +105,16 @@
               </q-item-section>
               <q-item-section>Whitepaper</q-item-section>
             </q-item>
+
+            <q-item
+              clickable
+              :to="{ name: 'help' }"
+            >
+              <q-item-section avatar>
+                <q-icon name="mdi-help" />
+              </q-item-section>
+              <q-item-section>Help</q-item-section>
+            </q-item>
           </template>
 
           <template v-if="uiStore().loggedIn">
diff --git a/apps/client/src/layouts/PagesLayout/MainToolbar/AccountPopup.vue b/apps/client/src/layouts/PagesLayout/MainToolbar/AccountPopup.vue
@@ -90,6 +90,17 @@
         <q-item-section>Whitepaper</q-item-section>
       </q-item>
 
+      <q-item
+        clickable
+        v-close-popup
+        :href="multiModePath('/help')"
+      >
+        <q-item-section avatar>
+          <q-icon name="mdi-help" />
+        </q-item-section>
+        <q-item-section>Help</q-item-section>
+      </q-item>
+
       <q-item
         v-if="uiStore().loggedIn"
         clickable
diff --git a/apps/client/src/pages/home/Help/Help.vue b/apps/client/src/pages/home/Help/Help.vue
@@ -0,0 +1,43 @@
+<template>
+  <q-page>
+    <ResponsiveContainer>
+      <Gap style="height: 130px" />
+
+      <div style="font-size: 45px; font-weight: bold; text-align: center">
+        Help
+      </div>
+
+      <Gap style="height: 56px" />
+
+      <ul class="question-list">
+        <li>
+          <router-link :to="{ name: 'help/how-to-create-a-group' }">
+            How to create a group?
+          </router-link>
+        </li>
+        <li>Work in progress...</li>
+      </ul>
+
+      <Gap style="height: 160px" />
+    </ResponsiveContainer>
+  </q-page>
+</template>
+
+<script setup lang="ts">
+useMeta(() => ({
+  title: 'Help - DeepNotes',
+}));
+</script>
+
+<style scoped lang="scss">
+.question-list {
+  padding-left: 48px;
+
+  font-size: 17px;
+  font-weight: bold;
+
+  > li::marker {
+    font-size: 24px;
+  }
+}
+</style>
diff --git a/apps/client/src/pages/home/Help/HelpLayout.vue b/apps/client/src/pages/home/Help/HelpLayout.vue
@@ -0,0 +1,36 @@
+<template>
+  <q-page>
+    <ResponsiveContainer>
+      <Gap style="height: 150px" />
+
+      <router-link
+        style="font-size: 14.5px"
+        :to="{ name: 'help' }"
+      >
+        <span
+          style="
+            position: relative;
+            top: 1px;
+            font-weight: bold;
+            font-size: 1.3em;
+          "
+        >
+          ←
+        </span>
+        <span style="font-weight: bold">Back to help page</span>
+      </router-link>
+
+      <Gap style="height: 64px" />
+
+      <router-view />
+
+      <Gap style="height: 170px" />
+    </ResponsiveContainer>
+  </q-page>
+</template>
+
+<script setup lang="ts">
+useMeta(() => ({
+  title: 'How to create a group? - Help - DeepNotes',
+}));
+</script>
diff --git a/apps/client/src/pages/home/Help/HowToCreateAGroup.vue b/apps/client/src/pages/home/Help/HowToCreateAGroup.vue
@@ -0,0 +1,88 @@
+<template>
+  <div style="font-size: 28px; font-weight: bold">How to create a group?</div>
+
+  <Gap style="height: 36px" />
+
+  You can create private and public groups if you're
+  <b>subscribed to the pro plan</b>.<br />
+
+  <br />
+
+  In order to create a group you have to:
+
+  <ol>
+    <li>
+      <b>Open the New page dialog</b> by clicking on <b>Create new page</b> or
+      <b>Create with options</b> on the expanded right sidebar.<br />
+
+      <br />
+
+      <div>
+        <img
+          style="
+            vertical-align: top;
+            border: 1px solid rgba(255, 255, 255, 0.3);
+          "
+          src="/help/how-to-create-a-group/create-new-page.png"
+        />
+
+        <InlineGap style="width: 24px" />
+
+        <img
+          style="
+            vertical-align: top;
+            border: 1px solid rgba(255, 255, 255, 0.3);
+          "
+          src="/help/how-to-create-a-group/create-with-options.png"
+        />
+      </div>
+
+      <br />
+    </li>
+
+    <li>
+      Select <b>(New group)</b> as the target group of the new page.<br />
+
+      <br />
+
+      <div>
+        <img
+          style="
+            vertical-align: top;
+            border: 1px solid rgba(255, 255, 255, 0.3);
+          "
+          src="/help/how-to-create-a-group/new-page-dialog.png"
+        />
+
+        <InlineGap style="width: 24px" />
+
+        <img
+          style="
+            vertical-align: top;
+            border: 1px solid rgba(255, 255, 255, 0.3);
+          "
+          src="/help/how-to-create-a-group/new-page-dialog-group.png"
+        />
+      </div>
+
+      <br />
+    </li>
+
+    <li>
+      Fill the group creation fields and click Ok.<br />
+
+      <br />
+
+      <img
+        style="vertical-align: top; border: 1px solid rgba(255, 255, 255, 0.3)"
+        src="/help/how-to-create-a-group/new-group.png"
+      />
+    </li>
+  </ol>
+</template>
+
+<script setup lang="ts">
+useMeta(() => ({
+  title: 'How to create a group? - Help - DeepNotes',
+}));
+</script>
diff --git a/apps/client/src/router/routes.ts b/apps/client/src/router/routes.ts
@@ -83,6 +83,30 @@ const routes: RouteRecordRaw[] = [
     ],
   },
 
+  {
+    path: '/help',
+    component: () => import('src/layouts/HomeLayout/HomeLayout.vue'),
+    children: [
+      {
+        path: '',
+        name: 'help',
+        component: () => import('src/pages/home/Help/Help.vue'),
+      },
+      {
+        path: 'how-to-create-a-group',
+        component: () => import('src/pages/home/Help/HelpLayout.vue'),
+        children: [
+          {
+            path: '',
+            name: 'help/how-to-create-a-group',
+            component: () =>
+              import('src/pages/home/Help/HowToCreateAGroup.vue'),
+          },
+        ],
+      },
+    ],
+  },
+
   ...(isIncluded(process.env.MODE, ['ssr', 'spa'])
     ? [
         {
