feat(ui) [WIP] User profile page

front/src/components/auth/Settings.vue

@@ -261,10 +261,6 @@ const changeEmail = async () => {
   isChangingEmail.value = false
 }
 
-onMounted(() => {
-  $('select.dropdown').dropdown()
-})
-
 fetchApps()
 fetchOwnedApps()
 </script>

front/src/components/common/ContentForm.vue

@@ -6,6 +6,9 @@ import { useI18n } from 'vue-i18n'
 
 import useLogger from '~/composables/useLogger'
 
+import Textarea from '~/components/ui/Textarea.vue'
+import Button from '~/components/ui/Button.vue'
+
 interface Events {
   (e: 'update:modelValue', value: string): void
 }
@@ -83,22 +86,20 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div class="content-form ui segments">
+        <Button
-    <div class="ui segment">
-      <div class="ui tiny secondary pointing menu">
-        <button
-          :class="[{active: !isPreviewing}, 'item']"
           @click.prevent="isPreviewing = false"
+          :class="[{active: !isPreviewing}, 'item']"
+          title="write"
         >
           {{ t('components.common.ContentForm.button.write') }}
-        </button>
+        </Button>
-        <button
+        <Button
-          :class="[{active: isPreviewing}, 'item']"
           @click.prevent="isPreviewing = true"
+          :class="[{active: isPreviewing}, 'item']"
+          title="preview"
         >
           {{ t('components.common.ContentForm.button.preview') }}
-        </button>
+        </Button>
-      </div>
       <template v-if="isPreviewing">
         <div
           v-if="isLoadingPreview"
@@ -121,17 +122,14 @@ onMounted(async () => {
       </template>
       <template v-else>
         <div class="ui transparent input">
-          <textarea
+          <Textarea
             ref="textarea"
             v-model="value"
             :required="required"
             :placeholder="labels.placeholder"
           />
         </div>
-        <div class="ui very small hidden divider" />
       </template>
-    </div>
-    <div class="ui bottom attached segment">
       <span
         v-if="charLimit"
         :class="['right', 'floated', {'ui danger text': remainingChars < 0}]"
@@ -141,6 +139,4 @@ onMounted(async () => {
       <p>
         {{ t('components.common.ContentForm.help.markdown') }}
       </p>
-    </div>
-  </div>
 </template>

front/src/components/common/RenderedDescription.vue

@@ -8,6 +8,9 @@ import { useI18n } from 'vue-i18n'
 import axios from 'axios'
 import clip from 'text-clipper'
 
+import Button from '~/components/ui/Button.vue'
+import Alert from '~/components/ui/Alert.vue'
+
 interface Events {
   (e: 'updated', data: unknown): void
 }
@@ -88,9 +91,10 @@ const submit = async () => {
     <template v-if="content && !isUpdating">
       <sanitized-html :html="html" />
       <template v-if="isTruncated">
-        <div class="ui small hidden divider" />
         <a
           v-if="showMore === false"
+          class="more"
+          style="float: right; margin-top: -32px; color: var(--fw-primary);"
           href=""
           @click.stop.prevent="showMore = true"
         >
@@ -98,6 +102,8 @@ const submit = async () => {
         </a>
         <a
           v-else
+          class="more"
+          style="float: right; margin-top: -32px; color: var(--fw-primary);"
           href=""
           @click.stop.prevent="showMore = false"
         >
@@ -109,28 +115,23 @@ const submit = async () => {
       {{ t('components.common.RenderedDescription.empty.noDescription') }}
     </p>
     <template v-if="!isUpdating && canUpdate && updateUrl">
-      <div class="ui hidden divider" />
+      <Button
-      <span
         role="button"
+        icon="bi-pencil"
         @click="isUpdating = true"
       >
-        <i class="pencil icon" />
         {{ t('components.common.RenderedDescription.button.edit') }}
-      </span>
+      </Button>
     </template>
     <form
       v-if="isUpdating"
-      class="ui form"
       @submit.prevent="submit()"
     >
-      <div
+      <Alert red
         v-if="errors.length > 0"
+        title="{{ t('components.common.RenderedDescription.header.failure') }}"
         role="alert"
-        class="ui negative message"
       >
-        <h4 class="header">
-          {{ t('components.common.RenderedDescription.header.failure') }}
-        </h4>
         <ul class="list">
           <li
             v-for="(error, key) in errors"
@@ -139,25 +140,28 @@ const submit = async () => {
             {{ error }}
           </li>
         </ul>
-      </div>
+      </Alert>
       <content-form
         v-model="text"
         :autofocus="true"
       />
-      <a
+      <Button
         class="left floated"
         @click.prevent="isUpdating = false"
+        solid
+        secondary
       >
         {{ t('components.common.RenderedDescription.button.cancel') }}
-      </a>
+      </Button>
-      <button
+      <Button
         :class="['ui', {'loading': isLoading}, 'right', 'floated', 'button']"
         type="submit"
         :disabled="isLoading"
+        solid
+        primary
       >
         {{ t('components.common.RenderedDescription.button.update') }}
-      </button>
+      </Button>
-      <div class="ui clearing hidden divider" />
     </form>
   </div>
 </template>

front/src/components/ui/Link.vue

@@ -64,6 +64,11 @@ onMounted(() => {
 </template>
 
 <style module lang="scss">
+
+  .force-underline {
+    text-decoration: underline;
+  }
+
   .link {
 
     // Layout

front/src/views/auth/ProfileBase.vue

@@ -12,7 +12,11 @@ import useErrorHandler from '~/composables/useErrorHandler'
 import useReport from '~/composables/moderation/useReport'
 
 import Layout from '~/components/ui/Layout.vue'
+import Section from '~/components/ui/layout/Section.vue'
+import Spacer from '~/components/ui/layout/Spacer.vue'
 import Link from '~/components/ui/Link.vue'
+import Tabs from '~/components/ui/Tabs.vue'
+import Tab from '~/components/ui/Tab.vue'
 
 interface Events {
   (e: 'updated', value: Actor): void
@@ -76,18 +80,13 @@ watch(props, fetchData, { immediate: true })
     v-title="labels.usernameProfile"
     class="page-profile"
   >
-    <div
+    <Layout flex>
-      v-if="isLoading"
+      <img
-      class="ui vertical segment"
+        src="https://images.unsplash.com/photo-1524650359799-842906ca1c06?ixlib=rb-1.2.1&dl=te-nguyen-Wt7XT1R6sjU-unsplash.jpg&w=640&q=80&fm=jpg&crop=entropy&cs=tinysrgb"
-    >
+        alt="{{ displayName }}"
-      <div class="ui centered active inline loader" />
+        class="avatar"
-    </div>
+      />
-    <div class="ui head vertical stripe segment container">
+      <!-- <div class="ui five wide column">
-      <div
-        v-if="object"
-        class="ui stackable grid"
-      >
-        <div class="ui five wide column">
         <button
           ref="dropdown"
           v-dropdown="{direction: 'downward'}"
@@ -194,8 +193,50 @@ watch(props, fetchData, { immediate: true })
             />
           </div>
         </div>
-        </div>
+      </div> -->
-      </div>
+    </Layout>
-    </div>
+      <Layout stack noGap style="flex-grow: 2;">
+        <Layout flex style="justify-content: space-between;">
+        <!-- <Section h1="{{ displayName }}" :action="{ text: 'Edit profile', to:'/settings' }" /> -->
+        <h1>{{ displayName }}</h1>
+          <Link ghost alignSelf="center" minContent forceUnderline primary style="color: var(--fw-primary);" to="/settings">Edit profile</Link>
+        </Layout>
+        <span>{{ object?.full_username }}<i class="bi bi-copy" style="margin-left: 8px;"/></span>
+        <rendered-description
+          :content="object?.summary"
+          :field-name="'info'"
+          :update-url="`users/${store.state.auth.username}/`"
+          :can-update="store.state.auth.authenticated && object?.full_username === store.state.auth.fullUsername"
+          @updated="emit('updated', $event)"
+        />
+      </Layout>
+    </Layout>
+    <Tabs>
+      <Tab title="Overview">{{ t('views.auth.ProfileBase.link.overview') }}</Tab>
+      <Tab title="Collections">{{ t('views.auth.ProfileBase.link.collections') }}</Tab>
+      <Tab title="Channels">{{ t('views.auth.ProfileBase.link.channels') }}</Tab>
+      <Tab title="Activity">{{ t('views.auth.ProfileBase.link.activity') }}</Tab>
+    </Tabs>
   </Layout>
 </template>
+
+<style scoped lang="scss">
+  img.avatar {
+    width: 176px;
+    height: 176px;
+    border-radius: 50%;
+  }
+
+  h1 {
+    font-size: 48px;
+    margin-bottom: 8px;
+  }
+
+  a.edit span {
+    color: var(--fw-primary);
+
+    &:hover {
+      color: var(--color);
+    }
+  }
+</style>