fix(notifications): text overflow for notifications

Satellite-im · Jun 29, 2022 · f169deb · f169deb
1 parent 28cee7f
commit f169deb
Show file tree

Hide file tree

Showing 7 changed files with 86 additions and 83 deletions.
diff --git a/components/views/navigation/toolbar/Toolbar.html b/components/views/navigation/toolbar/Toolbar.html
@@ -20,41 +20,27 @@
     />
   </div>
   <div class="controls">
-    <div
-      class="toggle-alerts"
-      data-cy="toolbar-alerts"
-      @click="toggleAlerts"
-      v-tooltip.bottom="$t('pages.chat.alerts')"
-    >
+    <div class="toggle-alerts" data-cy="toolbar-alerts">
       <UiCircle
         v-if="allUnseenNotifications.length"
         class="notification-alert"
         :size="15"
         color="red"
         type="icon"
         :data="allUnseenNotifications.length"
+        @click="toggleAlerts"
       >
         {{allUnseenNotifications.length}}
       </UiCircle>
       <bell-icon
         size="1x"
         :class="`control-icon ${showAlerts ? 'primary' : ''}`"
         color="primary"
+        @click="toggleAlerts"
+        v-tooltip.bottom="$t('pages.chat.alerts')"
       />
+      <ToolbarAlerts v-if="showAlerts" v-click-outside="toggleAlerts" />
     </div>
-
-    <UiFloatingContainer
-      v-if="showAlerts"
-      :offsets="showSidebar ? [4.2] : [4.2, 2.3]"
-      heading="Alerts"
-      :width="25"
-      :height="25"
-      :class="`alerts-floating-container ${showSidebar ? 'side-open' : ''}`"
-      :customStyles="$device.isMobile"
-      :toggleMethod="() => $data.showAlerts = false"
-    >
-      <ToolbarAlerts />
-    </UiFloatingContainer>
     <div
       :class="`control-button ${!enableRTC || webrtc.activeCall ? 'disabled' : ''}`"
       v-tooltip.bottom="callTooltipText"

diff --git a/components/views/navigation/toolbar/Toolbar.less b/components/views/navigation/toolbar/Toolbar.less
@@ -23,6 +23,7 @@
   .toggle-alerts {
     cursor: pointer;
     user-select: none;
+    position: relative;
   }
 
   .controls {
@@ -40,10 +41,6 @@
       cursor: pointer;
       font-size: @small-icon-size;
       &:extend(.filter-glow);
-
-      &:nth-child(2) {
-        margin-right: @normal-spacing;
-      }
     }
     .disabled {
       &:extend(.font-muted);

diff --git a/components/views/navigation/toolbar/alerts/Alerts.html b/components/views/navigation/toolbar/alerts/Alerts.html
@@ -1,4 +1,8 @@
 <div id="alerts">
+  <div class="header">
+    <flask-conical-icon size="0.85x" />
+    <TypographySubtitle :size="6" :text="$t('pages.chat.alerts')" />
+  </div>
   <template v-if="notifications.length">
     <InteractablesButton
       size="small"

diff --git a/components/views/navigation/toolbar/alerts/Alerts.less b/components/views/navigation/toolbar/alerts/Alerts.less
@@ -1,7 +1,32 @@
 #alerts {
-  transition: all @animation-speed ease;
-}
-.alerts-clear-button {
-  margin-bottom: 5px;
-  box-shadow: none !important;
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  gap: @light-spacing;
+
+  top: 45px;
+  left: -8px;
+  max-height: 50vh;
+  width: 27rem;
+  padding: @light-spacing @xlight-spacing;
+  cursor: default;
+  overflow-y: scroll;
+  &:extend(.background-semitransparent-light);
+  &:extend(.round-corners);
+  &:extend(.bordered);
+  &:extend(.blur);
+
+  .header {
+    .subtitle {
+      font-size: @micro-text-size !important;
+      font-family: @primary-font;
+    }
+    font-size: @micro-text-size !important;
+    font-family: @primary-font;
+  }
+
+  button {
+    flex-shrink: 0;
+    width: fit-content;
+  }
 }
diff --git a/components/views/navigation/toolbar/alerts/Alerts.vue b/components/views/navigation/toolbar/alerts/Alerts.vue
@@ -3,10 +3,13 @@
 <script lang="ts">
 import Vue from 'vue'
 import { mapGetters, mapState } from 'vuex'
+import { FlaskConicalIcon } from 'satellite-lucide-icons'
 import { AlertState } from '~/libraries/ui/Alerts'
 import { RootState } from '~/types/store/store'
-
 export default Vue.extend({
+  components: {
+    FlaskConicalIcon,
+  },
   computed: {
     ...mapState({
       notifications: (state) => (state as RootState).ui.notifications,

diff --git a/components/views/navigation/toolbar/alerts/alert/Alert.html b/components/views/navigation/toolbar/alerts/alert/Alert.html
@@ -1,17 +1,19 @@
 <div class="alert">
-  <div>
-    <!--Optional alert image -->
-    <img v-if="alert.content.image" :src="alertImage" />
-    <UiCircle v-else type="random" data-cy="circle-without-picture" />
-  </div>
-  <div class="info-holder">
-    <div class="a-heading">
+  <UiCircle
+    :type="alertImage ? 'image' : 'random'"
+    :source="alertImage"
+    :data-cy="alertImage ? 'satellite-circle-profile' : 'circle-without-picture'"
+  />
+  <div class="info-container">
+    <div class="head">
       <TypographySubtitle :size="6" :text="alert.content.title" />
       <TypographyText :text="$dayjs(alert.at).fromNow()" class="timestamp" />
     </div>
-    <div class="description">
-      <TypographyText :text="setTranslateText" />
-    </div>
+    <TypographyText
+      :text="setTranslateText"
+      :title="setTranslateText"
+      class="description"
+    />
   </div>
   <InteractablesClose :action="removeNotification" />
 </div>
diff --git a/components/views/navigation/toolbar/alerts/alert/Alert.less b/components/views/navigation/toolbar/alerts/alert/Alert.less
@@ -1,60 +1,46 @@
 .alert {
-  transition: all @animation-speed ease;
   opacity: 1;
-  width: 95%;
-  display: inline-flex;
-  flex-direction: row;
+  display: flex;
+  gap: @light-spacing;
   &:extend(.blur);
   &:extend(.bordered);
   &:extend(.round-corners);
-  overflow: hidden;
-  padding: @light-spacing (@normal-spacing + @light-spacing) @light-spacing
-    @light-spacing;
-  justify-content: center;
-  align-content: flex-start;
-  margin-bottom: @light-spacing;
+  padding: @light-spacing @large-spacing @light-spacing @light-spacing;
+  align-items: center;
   position: relative;
+  transition: all @animation-speed ease;
 
-  .close-button {
-    top: 0;
-    right: 0;
-    background: transparent;
-  }
-
-  img {
-    max-width: 64px;
-    max-height: 64px;
-    &:extend(.round-corners);
-    margin: 0 @light-spacing 0 0;
-    vertical-align: top;
-  }
-
-  .info-holder {
-    width: 100%;
-    padding-left: 10px;
+  .circle {
+    flex-shrink: 0;
   }
 
-  .a-heading {
-    display: flex;
-    &:extend(.full-width);
+  .info-container {
+    flex-grow: 1;
+    &:extend(.ellipsis);
 
-    .subtitle {
-      margin-bottom: unset;
-      &:extend(.full-width);
-      font-size: @text-size;
+    .head {
+      display: flex;
+      justify-content: space-between;
+      .subtitle {
+        font-size: @text-size;
+        margin: 0;
+      }
+      .timestamp {
+        &:extend(.font-muted);
+        font-size: @micro-text-size;
+      }
     }
 
-    .timestamp {
-      &:extend(.full-width);
-      text-align: right;
-      font-size: @micro-text-size;
-      &:extend(.font-muted);
-      align-self: flex-end;
+    .description {
+      font-size: @mini-text-size !important;
+      margin-top: @light-spacing;
+      &:extend(.ellipsis);
     }
   }
-  .description > p {
-    font-size: @mini-text-size !important;
-    margin-top: @light-spacing;
-    margin-bottom: 0;
+
+  .close-button {
+    top: 0;
+    right: 0;
+    background: transparent;
   }
 }