Voice notes drafts

2026-05-08 08:58:38 +01:00 · 2023-03-02 13:55:40 -07:00
parent 356fb301e1
commit 99015d7b96
48 changed files with 2113 additions and 909 deletions
@@ -0,0 +1,84 @@
+// Copyright 2023 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+.PlaybackButton {
+  @include button-reset;
+
+  flex-shrink: 0;
+  margin-right: $audio-attachment-button-margin-big;
+
+  outline: none;
+  border-radius: 18px;
+
+  &::before {
+    display: block;
+    height: 100%;
+    content: '';
+  }
+
+  @mixin audio-icon($name, $icon, $color) {
+    &.PlaybackButton--#{$name}::before {
+      @include color-svg('../images/icons/v2/#{$icon}.svg', $color, false);
+    }
+  }
+
+  @mixin all-audio-icons($color) {
+    @include audio-icon(play, play-solid-20, $color);
+    @include audio-icon(pause, pause-solid-20, $color);
+    @include audio-icon(download, arrow-down-20, $color);
+    @include audio-icon(pending, audio-spinner-arc-22, $color);
+  }
+
+  &--variant-message {
+    width: $audio-attachment-button-size;
+    height: $audio-attachment-button-size;
+  }
+
+  &--variant-mini {
+    &::before {
+      -webkit-mask-size: 100% !important;
+    }
+    width: 14px;
+    height: 14px;
+  }
+  &--variant-draft {
+    &::before {
+      -webkit-mask-size: 100% !important;
+    }
+    width: 18px;
+    height: 18px;
+  }
+
+  &--pending {
+    cursor: auto;
+  }
+
+  &--pending::before {
+    animation: rotate 1000ms linear infinite;
+  }
+
+  @include light-theme {
+    &--context-incoming {
+      &.PlaybackButton--variant-message {
+        background: $color-white;
+      }
+    }
+    @include all-audio-icons($color-gray-60);
+  }
+
+  @include dark-theme {
+    &--context-incoming {
+      &.PlaybackButton--variant-message {
+        background: $color-gray-60;
+      }
+    }
+    @include all-audio-icons($color-gray-15);
+  }
+
+  &--context-outgoing {
+    &.PlaybackButton--variant-message {
+      background: $color-white-alpha-20;
+    }
+    @include all-audio-icons($color-white);
+  }
+}