Redesign settings pages

front/src/components/Admin/Registration.vue

@@ -1,11 +1,12 @@
 <template>
-  <div class="row q-gutter-md">
-    <div class="col">
-      <q-card bordered class="q-mb-md">
+  <div class="row q-col-gutter-md">
+    <div class="col-md-6 col-xs-12">
+      <q-card class="q-mb-md">
         <q-card-section>
           <div class="text-h6">Registration</div>
         </q-card-section>
-        <q-card-section>
+
+        <q-card-section class="q-pt-none">
           <div>
             <q-toggle
               v-model="registrationAllowed"
@@ -15,70 +16,48 @@
           </div>
         </q-card-section>
       </q-card>
-      <q-card bordered>
-        <q-card-section>
-          <div class="text-h6">Calendar Password</div>
-        </q-card-section>
-        <q-card-section>
-          <div>
-            <q-toggle
-              v-model="icalPasswordRequired"
-              left-label
-              label="Require password to access iCalendar"
-            />
-            <password-input
-              v-model="icalPassword"
-              :disable="!icalPasswordRequired"
-            >
-              <template #after>
-                <q-btn
-                  icon="save"
-                  round
-                  :color="
-                    icalPassword == adminSettings.icalPassword
-                      ? 'grey-5'
-                      : 'positive'
-                  "
-                  :disabled="icalPassword == adminSettings.icalPassword"
-                  @click="updateIcalPassword"
-                />
-              </template>
-            </password-input>
-          </div>
-        </q-card-section>
-      </q-card>
-    </div>
-    <div class="col">
-      <q-card bordered>
+
+      <q-card>
         <q-card-section>
           <div class="text-h6">Registration with password</div>
         </q-card-section>
-        <q-card-section class="q-gutter-sm">
+
+        <q-card-section class="q-pt-none q-gutter-sm">
           <q-toggle
             v-model="registrationPasswordAllowed"
             left-label
             label="Allow registration with password on CTFNote"
           />
+
           <select-role
+            v-if="registrationPasswordAllowed"
             v-model="registrationDefaultRole"
+            filled
+            dense
+            options-dense
             :disable="!registrationPasswordAllowed"
             label="Default role"
-          />
+          >
+            <template #prepend>
+              <q-icon name="people_alt" />
+            </template>
+          </select-role>
+
           <password-input
+            v-if="registrationPasswordAllowed"
             v-model="registrationPassword"
+            dense
             :disable="!registrationPasswordAllowed"
-            :filled="false"
             label="Registration password"
           >
+            <template #prepend>
+              <q-icon name="key" />
+            </template>
             <template #after>
               <q-btn
                 icon="save"
-                round
-                :color="
-                  registrationPassword == adminSettings.registrationPassword
-                    ? 'grey-5'
-                    : 'positive'
-                "
+                class="ctfnote-input-button"
+                color="positive"
                 :disabled="
                   registrationPassword == adminSettings.registrationPassword
                 "
@@ -89,6 +68,42 @@
         </q-card-section>
       </q-card>
     </div>
+
+    <div class="col-md-6 col-xs-12">
+      <q-card>
+        <q-card-section>
+          <div class="text-h6">Calendar password</div>
+        </q-card-section>
+
+        <q-card-section class="q-pt-none q-gutter-sm">
+          <q-toggle
+            v-model="icalPasswordRequired"
+            left-label
+            label="Require password to access iCalendar"
+          />
+
+          <password-input
+            v-if="icalPasswordRequired"
+            v-model="icalPassword"
+            dense
+            :disable="!icalPasswordRequired"
+          >
+            <template #prepend>
+              <q-icon name="key" />
+            </template>
+            <template #after>
+              <q-btn
+                icon="save"
+                class="ctfnote-input-button"
+                color="positive"
+                :disabled="icalPassword == adminSettings.icalPassword"
+                @click="updateIcalPassword"
+              />
+            </template>
+          </password-input>
+        </q-card-section>
+      </q-card>
+    </div>
   </div>
 </template>
 

front/src/components/Admin/Theme.vue

@@ -1,29 +1,29 @@
 <template>
   <div class="row q-gutter-md">
     <div class="col">
-      <q-card bordered>
+      <q-card>
         <q-card-section class="text-h6"> Colors </q-card-section>
-        <q-card-section>
-          <div class="row q-gutter-md">
-            <div
-              v-for="(color, label) in colors"
-              :key="label"
-              class="col col-auto"
-            >
-              <color-picker
-                :model-value="color"
-                :label="label"
-                @update:model-value="(c) => updateStyle(label, c)"
-              />
-            </div>
+
+        <q-card-section class="row q-pt-none q-gutter-md">
+          <div
+            v-for="(color, label) in colors"
+            :key="label"
+            class="col col-auto"
+          >
+            <color-picker
+              :model-value="color"
+              :label="label"
+              @update:model-value="(c) => updateStyle(label, c)"
+            />
           </div>
         </q-card-section>
-        <q-card-actions align="right">
+
+        <q-card-actions align="right" class="q-px-md q-pb-md q-pt-none">
           <q-btn label="reset" color="warning" flat @click="reset" />
           <q-btn
             label="save"
             :disable="!needSave"
-            :color="needSave ? 'positive' : 'grey-5'"
+            color="positive"
             @click="saveStyle"
           />
         </q-card-actions>

front/src/components/Admin/Users.vue

@@ -1,5 +1,5 @@
 <template>
-  <q-card bordered>
+  <q-card>
     <q-card-section>
       <div class="row q-gutter-md">
         <div class="text-h6">Registered users</div>
@@ -16,43 +16,46 @@
         </div>
       </div>
     </q-card-section>
-    <q-card-section>
+
+    <q-card-section class="q-pa-none">
       <q-table
         flat
-        bordered
+        dense
         :rows-per-page-options="[0]"
         :loading="loading"
         :columns="columns"
         :rows="users"
         hide-pagination
       >
         <template #body-cell-id="{ value }">
-          <q-td auto-width class="text-right">
+          <q-td auto-width>
             {{ value }}
           </q-td>
         </template>
-        <template #body-cell-login="{ value }">
-          <q-td class="text-right">
-            {{ value }}
+        <template #body-cell-role="{ row, value }">
+          <q-td style="width: 132px; max-width: 132px">
+            <select-role
+              filled
+              dense
+              options-dense
+              :model-value="value"
+              @update:model-value="(v) => updateRole(row, v)"
+            />
           </q-td>
         </template>
-        <template #body-cell-lastactive="{ value }">
-          <q-td class="text-right">
+        <template #body-cell-username="{ value }">
+          <q-td>
             {{ value }}
           </q-td>
         </template>
-        <template #body-cell-username="{ value }">
-          <q-td class="text-right">
+        <template #body-cell-displayname="{ value }">
+          <q-td>
             {{ value }}
           </q-td>
         </template>
-        <template #body-cell-role="{ row, value }">
-          <q-td>
-            <select-role
-              dense
-              :model-value="value"
-              @update:model-value="(v) => updateRole(row, v)"
-            />
+        <template #body-cell-lastactive="{ value }">
+          <q-td style="width: 150px; max-width: 150px">
+            {{ value }}
           </q-td>
         </template>
         <template #body-cell-btns="{ row }">
@@ -105,28 +108,45 @@ const columns = [
     label: 'ID',
     field: (u: User) => u.profile.id,
     sortable: true,
+    align: 'left',
   },
-  { name: 'login', label: 'Login', field: 'login', sortable: true },
   {
-    name: 'lastactive',
-    label: 'Last active',
-    field: (u: User) => {
-      return date.formatDate(u.profile.lastactive, 'YYYY-MM-DD HH:mm:ss');
-    },
+    name: 'role',
+    label: 'Role',
+    field: 'role',
     sortable: true,
+    align: 'left',
   },
   {
     name: 'username',
     label: 'Username',
+    field: 'login',
+    sortable: true,
+    align: 'left',
+  },
+  {
+    name: 'displayname',
+    label: 'Display name',
     field: (u: User) => u.profile.username,
     sortable: true,
+    align: 'left',
+  },
+  {
+    name: 'lastactive',
+    label: 'Last active',
+    field: (u: User) => {
+      return date.formatDate(u.profile.lastactive, 'YYYY-MM-DD HH:mm:ss');
+    },
+    sortable: true,
+    align: 'left',
   },
-  { name: 'role', label: 'Role', field: 'role', sortable: true },
   {
     name: 'discordId',
+    style: 'width: 160px; max-width: 160px; font-family: monospace;',
     label: 'Discord ID',
     field: (u: User) => u.profile.discordId,
     sortable: true,
+    align: 'left',
   },
   { name: 'btns' },
 ];
@@ -227,5 +247,3 @@ export default defineComponent({
   },
 });
 </script>
-
-<style scoped></style>

front/src/components/Utils/ColorPicker.vue

@@ -1,11 +1,16 @@
 <template>
   <div class="row items-center q-gutter-sm" style="min-width: 180px">
-    <div class="bg col col-auto cursor-pointer">
-      <div class="btn-pick-color shadow-2" :style="style">
+    <div class="bg col col-auto">
+      <q-btn
+        :icon="icon"
+        class="btn-pick-color q-pa-none"
+        :class="{ icon: icon, 'no-icon': !icon }"
+        :style="style"
+      >
         <q-popup-proxy transition-show="scale" transition-hide="scale">
           <q-color v-model="color" no-header format-model="hex" />
         </q-popup-proxy>
-      </div>
+      </q-btn>
     </div>
     <div class="col" style="text-transform: capitalize">
       {{ label }}
@@ -20,6 +25,7 @@ export default defineComponent({
   props: {
     label: { type: String, default: '' },
     modelValue: { type: String, default: '#ffffff' },
+    icon: { type: String, default: undefined },
   },
   emits: ['update:model-value'],
   computed: {
@@ -43,13 +49,30 @@ export default defineComponent({
 <style scoped>
 .bg {
   display: inline-block;
-  border-radius: 3px;
+  border-radius: 4px;
   background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAH0lEQVQoU2NkYGAwZkAFZ5G5jPRRgOYEVDeB3EBjBQBOZwTVugIGyAAAAABJRU5ErkJggg==);
 }
+
 .btn-pick-color {
   position: relative;
-  border-radius: 3px;
+  border-radius: 4px;
   height: 32px;
   width: 32px;
+  color: white;
+}
+
+.no-icon {
+  font-size: 0px;
+}
+
+.btn-pick-color.icon {
+  height: 40px !important;
+  width: 40px !important;
+}
+</style>
+
+<style>
+.btn-pick-color .q-focus-helper {
+  display: none;
 }
 </style>