Improve picasso & avatars

common/helpers/interpolation.js

@@ -0,0 +1,39 @@
+/**
+ * Curve fitting
+ * @param x
+ * @param y
+ * @param a
+ * @returns {number}
+ */
+export const lerp = (x, y, a) => x * (1 - a) + y * a
+
+/**
+ * Clamps value between min and max
+ * @param a
+ * @param min
+ * @param max
+ * @returns {number}
+ */
+export const clamp = (a, min = 0, max = 1) => Math.min(max, Math.max(min, a))
+
+/**
+ * Inverse curve fitting function
+ * @param x
+ * @param y
+ * @param a
+ * @returns {number}
+ */
+export const invlerp = (x, y, a) => clamp((a - x) / (y - x))
+
+/**
+ * Maps input to output range
+ * @param inputStart
+ * @param inputEnd
+ * @param outputStart
+ * @param outputEnd
+ * @param input
+ * @returns number
+ */
+export function range(inputStart, inputEnd, outputStart, outputEnd, input) {
+  return lerp(outputStart, outputEnd, invlerp(inputStart, inputEnd, input))
+}

frontend/src/components/activity/ActivityResponsibles.vue

@@ -14,16 +14,31 @@
     small-chips
     v-bind="$attrs"
     @input="onInput"
-  />
+  >
+    <template #selection="{ item }">
+      <v-chip :key="item.value" small class="mx-0">
+        <UserAvatar
+          :user="item.info.user && item.info.user()"
+          :camp-collaboration="item.info.campCollaboration"
+          left
+          size="20"
+          class="ml-n3"
+        />
+        <span>{{ item.text }}</span>
+      </v-chip>
+    </template>
+  </e-select>
 </template>
 
 <script>
 import { serverErrorToString } from '@/helpers/serverError.js'
 import campCollaborationDisplayName from '@/common/helpers/campCollaborationDisplayName.js'
 import { isEqual, sortBy } from 'lodash'
+import UserAvatar from '@/components/user/UserAvatar.vue'
 
 export default {
   name: 'ActivityResponsibles',
+  components: { UserAvatar },
   props: {
     activity: {
       type: Object,
@@ -57,6 +72,7 @@ export default {
           // following structure is defined by vuetify v-select items property
           return {
             value: value._meta.self,
+            info: value,
             text: campCollaborationDisplayName(value, this.$tc.bind(this)),
           }
         })
@@ -159,3 +175,14 @@ export default {
   },
 }
 </script>
+
+<style scoped lang="scss">
+::v-deep(.v-select__selections) {
+  gap: 4px;
+  padding-top: 8px !important;
+
+  & input {
+    padding: 0;
+  }
+}
+</style>

frontend/src/components/dashboard/ActivityRow.vue

@@ -17,14 +17,14 @@
     <td style="width: 100%" class="contentrow">
       <router-link
         :to="routerLink"
-        class="text-decoration-none text-decoration-hover-underline black--text"
+        class="text-decoration-none text-decoration-hover-underline black--text font-weight-medium d-block"
       >
         {{ title }}<br />
       </router-link>
       <span class="e-subtitle">{{ location }}</span>
     </td>
     <td class="contentrow avatarrow overflow-visible">
-      <AvatarRow :camp-collaborations="collaborators" size="28" class="ml-auto" />
+      <AvatarRow :camp-collaborations="collaborators" max-size="28" class="ml-auto" />
     </td>
   </tr>
 </template>

frontend/src/components/dashboard/AvatarRow.vue

@@ -1,11 +1,11 @@
 <template>
-  <div class="avatarrow" :style="avatarrow">
+  <div ref="row" class="avatarrow" :style="avatarrow">
     <div
       v-for="campCollaboration in campCollaborations"
       :key="campCollaboration && campCollaboration._meta.self"
       class="avataritem"
     >
-      <UserAvatar :size="Number(size)" :camp-collaboration="campCollaboration" />
+      <UserAvatar :size="size" :camp-collaboration="campCollaboration" />
     </div>
   </div>
 </template>
@@ -18,14 +18,17 @@ export default {
   components: { UserAvatar },
   props: {
     campCollaborations: { type: Array, default: () => [] },
-    size: { type: [Number, String], default: 20 },
+    maxSize: { type: [Number, String], default: 20 },
   },
+  data: () => ({
+    maxHeight: 1000,
+  }),
   computed: {
+    size() {
+      return Number(this.maxSize) < this.maxHeight ? Number(this.maxSize) : this.maxHeight
+    },
     maxWidth() {
-      return (
-        (this.campCollaborations?.length - 1) * (Number(this.size) * 0.25) +
-        Number(this.size)
-      )
+      return this.campCollaborations?.length * (this.size * 0.5) + this.size
     },
     avatarrow() {
       return {
@@ -34,6 +37,9 @@ export default {
       }
     },
   },
+  mounted() {
+    this.maxHeight = this.$el.clientHeight
+  },
 }
 </script>
 

frontend/src/components/generic/LockIcon.vue

@@ -4,7 +4,14 @@
       <v-icon v-if="value" small v-on="{ dblclick: iconDblClick, ...on }">
         mdi-lock-open-variant
       </v-icon>
-      <v-icon v-else small color="grey" v-on="{ dblclick: iconDblClick, ...on }">
+      <v-icon
+        v-else
+        small
+        color="grey"
+        :title="$tc('components.generic.lockIcon.doubleClickToUnlock')"
+        :class="{ 'e-shake-lock': shake }"
+        v-on="{ dblclick: iconDblClick, ...on }"
+      >
         mdi-lock
       </v-icon>
     </template>
@@ -30,6 +37,10 @@ export default {
       required: false,
       default: false,
     },
+    shake: {
+      type: Boolean,
+      default: false,
+    },
   },
   methods: {
     iconDblClick() {
@@ -43,4 +54,32 @@ export default {
 .v-icon {
   cursor: pointer;
 }
+
+.e-shake-lock {
+  animation: horizontal-shaking 0.5s linear 1;
+}
+
+@keyframes horizontal-shaking {
+  0% {
+    transform: translateX(0);
+  }
+  10% {
+    transform: translateX(5px);
+  }
+  25% {
+    transform: translateX(-5px);
+  }
+  45% {
+    transform: translateX(4px);
+  }
+  65% {
+    transform: translateX(-4px);
+  }
+  80% {
+    transform: translateX(3px);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
 </style>

frontend/src/components/program/picasso/DayResponsibles.vue

@@ -21,7 +21,7 @@
     persistent-placeholder
     v-bind="$attrs"
     :readonly="readonly"
-    :class="{ 'ec-day-responsible--readonly': readonly }"
+    :class="{ 'e-day-responsible--readonly': readonly }"
     @input="onInput"
   >
     <template #prepend-item>
@@ -81,10 +81,13 @@ export default {
         })
     },
     currentCampCollaborationIRIs() {
-      return this.dayResponsibles.items.map((item) => item.campCollaboration()._meta.self)
+      return (
+        this.dayResponsibles?.items.map((item) => item.campCollaboration()._meta.self) ??
+        []
+      )
     },
     dayResponsibles() {
-      return this.day.dayResponsibles()
+      return this.day?.dayResponsibles()
     },
     campCollaborations() {
       return this.period.camp().campCollaborations()
@@ -170,7 +173,17 @@ export default {
   padding-top: 0;
 }
 
-.ec-day-responsible--readonly:deep(.v-input__append-inner) {
+.e-day-responsible--readonly {
+  &:deep(.v-input__append-inner) {
+    display: none;
+  }
+
+  &:deep(.v-select__selections) {
+    justify-content: center;
+  }
+}
+
+:deep(.v-select__selections) input {
   display: none;
 }
 </style>