Merge pull request codex-team#290 from codex-team/implement/layout-page-block-component

feat(ui): integrate layout page block component

Author: Dobrunia

codex-ui/dev/pages/layout/Navbar.vue

@@ -15,17 +15,15 @@ import { Navbar } from '../../../src/vue';
 
 <style scoped>
 .navbar-wrapper {
-  width: 600px;
-  min-height: 400px;
+  height: 800px;
   position: relative;
   background-color: var(--base--bg-secondary);
   border-radius: var(--radius-m);
   border: 1px solid var(--base--border);
 
   .navbar {
-      z-index: 1;
-      top: var(--layout-navbar-height);
-      border-radius: var(--radius-m) var(--radius-m) 0 0;
+    top: var(--layout-navbar-height);
+    border-radius: var(--radius-m) var(--radius-m) 0 0;
   }
 }
 </style>

codex-ui/src/vue/components/tabbar/Tab.vue

@@ -73,9 +73,8 @@ withDefaults(
   display: inline-block;
   min-width: var(--min-width);
   text-decoration: none;
-
   max-width: max-content;
-
+  user-select: none;
   flex: 1;
   flex-shrink: 1;
 

codex-ui/src/vue/layout/page-block/PageBlock.vue

@@ -57,6 +57,8 @@ defineProps({
 
   &__content {
     max-width: var(--layout-content-width);
+    flex-grow: 1;
+    min-width: 0;
     padding: var(--spacing-xxl) var(--spacing-ml);
     box-sizing: border-box;
 

src/application/services/useLayout.ts

@@ -1,5 +1,5 @@
 <template>
-  <ThreeColsLayout data-dimensions="large">
+  <PageBlock data-dimensions="large">
     <div :class="$style['history']">
       <div :class="$style['history__page-header']">
         <Heading
@@ -47,12 +47,11 @@
         </Container>
       </div>
     </div>
-  </ThreeColsLayout>
+  </PageBlock>
 </template>
 
 <script setup lang="ts">
-import { Heading, Container, Row, Avatar, Button } from 'codex-ui/vue';
-import ThreeColsLayout from '../layouts/ThreeColsLayout.vue';
+import { Heading, Container, Row, Avatar, Button, PageBlock } from 'codex-ui/vue';
 import useNoteHistory from '@/application/services/useNoteHistory';
 import useNavbar from '@/application/services/useNavbar';
 import useNote from '@/application/services/useNote';

src/presentation/layouts/Fullpage.vue

@@ -34,17 +34,19 @@
         </Button>
       </template>
     </NoteHeader>
-    <Editor
-      v-if="isEditorReady"
-      ref="editor"
-      v-bind="editorConfig"
-    />
+    <PageBlock>
+      <Editor
+        v-if="isEditorReady"
+        ref="editor"
+        v-bind="editorConfig"
+      />
+    </PageBlock>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { ref, toRef, watch } from 'vue';
-import { Editor, Button, Avatar } from 'codex-ui/vue';
+import { Editor, Button, Avatar, PageBlock } from 'codex-ui/vue';
 import NoteHeader from '@/presentation/components/note-header/NoteHeader.vue';
 import useHistory from '@/application/services/useNoteHistory';
 import { useNoteEditor } from '@/application/services/useNoteEditor';

src/presentation/layouts/Layout.vue

@@ -1,5 +1,5 @@
 <template>
-  <ThreeColsLayout data-dimensions="large">
+  <PageBlock data-dimensions="large">
     <router-link
       v-if="user"
       to="/new"
@@ -49,17 +49,15 @@
     <NoteList
       v-else-if="user !== undefined"
     />
-  </ThreeColsLayout>
+  </PageBlock>
 </template>
 
 <script setup lang="ts">
 import { useHead } from 'unhead';
 import { useI18n } from 'vue-i18n';
 import { useAppState } from '@/application/services/useAppState';
-import { Container, Row, Button, Heading } from 'codex-ui/vue';
+import { Container, Row, Button, Heading, PageBlock } from 'codex-ui/vue';
 import Hammer from '../components/pictures/Hammer.vue';
-
-import ThreeColsLayout from '@/presentation/layouts/ThreeColsLayout.vue';
 import NoteList from '@/presentation/components/note-list/NoteList.vue';
 import useAuth from '@/application/services/useAuth';