feat: add group size info (#3411)

wireapp · May 22, 2018 · 93a07f0 · 93a07f0
1 parent cb4d2d4
commit 93a07f0
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 0 deletions.
diff --git a/app/page/template/modal/group-creation.htm b/app/page/template/modal/group-creation.htm
@@ -36,6 +36,7 @@
                data-uie-name="enter-group-name">
         <div class="group-creation-error" data-bind="text: nameError, visible: nameError().length" data-uie-name="error-group-name"></div>
         <!-- ko if: isTeam -->
+          <div class="group-size-info" data-bind="l10n_text: z.string.groupSizeInfo"></div>
           <guest-mode-toggle params="isChecked: isGuestRoom, onToggle: clickOnToggleGuestMode, extendedInfo: true"></guest-mode-toggle>
         <!-- /ko -->
       <!-- /ko -->

diff --git a/app/page/template/panel/conversation-details.htm b/app/page/template/panel/conversation-details.htm
@@ -50,6 +50,9 @@
                 </span>
               <!-- /ko -->
             </div>
+            <!-- ko if: isTeam() -->
+              <div class="conversation-details__group-size-info" data-bind="l10n_text: z.string.groupSizeInfo"></div>
+            <!-- /ko -->
           <!-- /ko -->
           <!-- ko if: isSingleUserMode() && userName() -->
             <div class="conversation-details__user-name" data-bind="text: userName()" data-uie-name="status-username"></div>

diff --git a/app/script/localization/webapp.js b/app/script/localization/webapp.js
@@ -372,6 +372,7 @@ z.string.groupCreationParticipantsActionSkip = 'Skip';
 z.string.groupCreationParticipantsHeader = 'Add people';
 z.string.groupCreationParticipantsHeaderWithCounter = 'Add people ({{number}})';
 z.string.groupCreationParticipantsPlaceholder = 'Search by name';
+z.string.groupSizeInfo = 'Up to 128 people can join a group conversation. Video calls work in groups of 4 or less.';
 
 // Guest room
 z.string.guestRoomConversationName = 'Guest room';

diff --git a/app/style/modal/group-creation.less b/app/style/modal/group-creation.less
@@ -85,6 +85,13 @@
     margin: 8px;
   }
 
+  .group-size-info {
+    margin: 16px 16px 0;
+    color: @graphite;
+    font-size: @font-size-xs;
+    line-height: @line-height-sm;
+  }
+
   .group-creation-list-wrapper {
     position: absolute;
     right: -16px;

diff --git a/app/style/panel/conversation-details.less b/app/style/panel/conversation-details.less
@@ -177,4 +177,10 @@
     font-weight: @font-weight-bold;
     text-transform: uppercase;
   }
+  &__group-size-info {
+    margin: 8px 0 0;
+    color: @graphite;
+    font-size: @font-size-xs;
+    line-height: @line-height-sm;
+  }
 }