Lets users send stories to groups

signalapp · Aug 10, 2022 · ccc8954 · ccc8954
1 parent d4b74db
commit ccc8954
Show file tree

Hide file tree

Showing 21 changed files with 1,168 additions and 391 deletions.
diff --git a/_locales/en/messages.json b/_locales/en/messages.json
@@ -7381,6 +7381,30 @@
     "message": "Send story",
     "description": "aria-label for the send story button"
   },
+  "SendStoryModal__new": {
+    "message": "New story",
+    "description": "button to create a new distribution list to send story to"
+  },
+  "SendStoryModal__new-private--title": {
+    "message": "New private story",
+    "description": "Create a new distribution list"
+  },
+  "SendStoryModal__new-private--description": {
+    "message": "Visible only to specific people",
+    "description": "Description of what a distribution list would do"
+  },
+  "SendStoryModal__new-group--title": {
+    "message": "New group story",
+    "description": "Select a group to send a story to"
+  },
+  "SendStoryModal__new-group--description": {
+    "message": "Share to an existing group",
+    "description": "Description of what selecting a group would do"
+  },
+  "SendStoryModal__choose-groups": {
+    "message": "Choose groups",
+    "description": "Modal title when choosing groups"
+  },
   "Stories__settings-toggle--title": {
     "message": "Share & View Stories",
     "description": "Select box title for the stories on/off toggle"

diff --git a/stylesheets/components/ContextMenu.scss b/stylesheets/components/ContextMenu.scss
@@ -11,7 +11,7 @@
   &__popper {
     @extend %module-composition-popper;
     margin: 0;
-    padding: 6px 0;
+    padding: 6px 2px;
     width: auto;
 
     &--single-item {
@@ -40,8 +40,8 @@
     display: flex;
     justify-content: space-between;
     padding: 6px;
-    margin: 0 2px;
     min-width: 150px;
+    width: 100%;
 
     &--container {
       display: flex;

diff --git a/stylesheets/components/Modal.scss b/stylesheets/components/Modal.scss
@@ -132,6 +132,7 @@
   }
 
   &__body {
+    @include scrollbar;
     @include font-body-1;
     margin: 0;
   }

diff --git a/stylesheets/components/SendStoryModal.scss b/stylesheets/components/SendStoryModal.scss
@@ -2,6 +2,52 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 .SendStoryModal {
+  &__top-bar {
+    align-items: center;
+    display: flex;
+    min-height: 40px;
+    justify-content: space-between;
+    user-select: none;
+  }
+
+  &__new-story {
+    &__container {
+      &::before {
+        @include color-svg('../images/icons/v2/plus-20.svg', $color-white);
+        content: '';
+        height: 16px;
+        margin-right: 8px;
+        width: 16px;
+      }
+    }
+
+    &__option--description {
+      color: $color-gray-25;
+    }
+  }
+
+  &__icon {
+    &--lock {
+      @include color-svg(
+        '../images/icons/v2/lock-outline-24.svg',
+        $color-white
+      );
+      height: 14px;
+      margin-top: 4px;
+      width: 11px;
+    }
+
+    &--group {
+      @include color-svg(
+        '../images/icons/v2/group-outline-24.svg',
+        $color-white
+      );
+      height: 14px;
+      margin-top: 2px;
+      width: 14px;
+    }
+  }
+
   &__distribution-list {
     &__container {
       justify-content: space-between;
@@ -29,29 +75,98 @@
       @include font-body-2;
       color: $color-gray-60;
     }
-  }
 
-  &__button-footer {
-    align-items: center;
-    justify-content: space-between;
+    &__checkbox {
+      margin-right: 0;
+      position: relative;
+    }
+
+    &__checkbox input[type='checkbox'] {
+      cursor: pointer;
+      height: 0;
+      position: absolute;
+      width: 0;
+
+      @include keyboard-mode {
+        &:focus {
+          &::before {
+            border-color: $color-ultramarine;
+          }
+          outline: none;
+        }
+      }
+
+      &::before {
+        @include rounded-corners;
+        background: inherit;
+        border: 1.5px solid $color-gray-60;
+        content: '';
+        display: block;
+        height: 20px;
+        position: absolute;
+        width: 20px;
+      }
+
+      &:checked {
+        &::before {
+          background: $color-ultramarine;
+          border: 1.5px solid $color-ultramarine;
+        }
+
+        &::after {
+          border: solid $color-white;
+          border-width: 0 2px 2px 0;
+          content: '';
+          display: block;
+          height: 11px;
+          left: 7px;
+          position: absolute;
+          top: 3px;
+          transform: rotate(45deg);
+          width: 6px;
+        }
+      }
+    }
   }
 
   &__selected-lists {
     @include font-body-2;
-    color: $color-gray-60;
+    color: $color-gray-15;
     max-width: 280px;
     user-select: none;
   }
 
+  &__ok {
+    @include button-reset;
+    @include rounded-corners;
+    align-items: center;
+    background: $color-ultramarine;
+    display: flex;
+    height: 32px;
+    justify-content: center;
+    width: 32px;
+
+    &::disabled {
+      background: $color-gray-60;
+    }
+
+    &::after {
+      @include color-svg('../images/icons/v2/check-24.svg', $color-white);
+      content: '';
+      height: 18px;
+      width: 18px;
+    }
+  }
+
   &__send {
     @include button-reset;
     @include rounded-corners;
     align-items: center;
     background: $color-ultramarine;
     display: flex;
-    height: 40px;
+    height: 32px;
     justify-content: center;
-    width: 40px;
+    width: 32px;
 
     &::disabled {
       background: $color-gray-60;
@@ -60,8 +175,16 @@
     &::after {
       @include color-svg('../images/icons/v2/send-24.svg', $color-white);
       content: '';
-      height: 24px;
-      width: 24px;
+      height: 18px;
+      width: 18px;
     }
   }
 }
+
+.module-Modal--sticky-buttons .SendStoryModal__button-footer {
+  align-items: center;
+  justify-content: space-between;
+  padding-top: 0;
+  padding-left: 16px;
+  padding-right: 16px;
+}
diff --git a/stylesheets/components/StoriesSettingsModal.scss b/stylesheets/components/StoriesSettingsModal.scss
@@ -2,13 +2,71 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 .StoriesSettingsModal {
-  &__modal {
-    .module-conversation-list {
-      padding: 0;
+  &__conversation-list {
+    .module-conversation-list,
+    .module-conversation-list__item--contact-or-conversation {
+      padding-left: 0;
+      padding-right: 0;
     }
 
-    .module-conversation-list__item--contact-or-conversation {
-      padding: 0;
+    .module-conversation-list__item--contact-or-conversation__checkbox--container {
+      height: 20px;
+      margin-right: 8px;
+      position: relative;
+      width: 20px;
+    }
+
+    input[type='checkbox'] {
+      background: transparent;
+      border: none;
+      cursor: pointer;
+      display: block;
+      height: 0;
+      margin: 0;
+      min-width: 0;
+      position: absolute;
+      width: 0;
+
+      @include keyboard-mode {
+        &:focus {
+          &::before {
+            border-color: $color-ultramarine;
+          }
+          outline: none;
+        }
+      }
+
+      &::before {
+        @include rounded-corners;
+        background: inherit;
+        border: 1.5px solid $color-gray-60;
+        content: '';
+        display: block;
+        height: 20px;
+        position: absolute;
+        width: 20px;
+      }
+
+      &:checked {
+        &::before {
+          -webkit-mask: none;
+          background: $color-ultramarine;
+          border: 1.5px solid $color-ultramarine;
+        }
+
+        &::after {
+          border: solid $color-white;
+          border-width: 0 2px 2px 0;
+          content: '';
+          display: block;
+          height: 11px;
+          left: 7px;
+          position: absolute;
+          top: 3px;
+          transform: rotate(45deg);
+          width: 6px;
+        }
+      }
     }
   }
 
@@ -57,11 +115,21 @@
       }
 
       &--private {
-        @include avatar('../images/icons/v2/group-solid-24.svg');
+        @include avatar('../images/icons/v2/lock-outline-24.svg');
+
+        &::after {
+          height: 16px;
+          width: 12px;
+        }
 
         &--large {
           height: 64px;
           width: 64px;
+
+          &::after {
+            height: 24px;
+            width: 18px;
+          }
         }
       }
     }

diff --git a/ts/components/MediaEditor.tsx b/ts/components/MediaEditor.tsx
@@ -35,6 +35,7 @@ import {
 } from '../mediaEditor/util/getTextStyleAttributes';
 
 export type PropsType = {
+  doneButtonLabel?: string;
   i18n: LocalizerType;
   imageSrc: string;
   onClose: () => unknown;
@@ -84,6 +85,7 @@ function isCmdOrCtrl(ev: KeyboardEvent): boolean {
 }
 
 export const MediaEditor = ({
+  doneButtonLabel,
   i18n,
   imageSrc,
   onClose,
@@ -1065,7 +1067,7 @@ export const MediaEditor = ({
             theme={Theme.Dark}
             variant={ButtonVariant.Primary}
           >
-            {i18n('save')}
+            {doneButtonLabel || i18n('save')}
           </Button>
         </div>
       </div>