Merge pull request #617 from wireapp/dev

staging bump 2017-01-11

.gitignore

@@ -11,6 +11,7 @@
 /aws/static
 /aws/templates/**/*.html
 /aws/templates/auth
+/aws/templates/sw.js
 /aws/version
 /bower_components
 /deploy

app/page/template/_dist/app.htm

@@ -136,6 +136,7 @@
 <script src="/script/conversation/ConversationUnreadType.js"></script>
 <script src="/script/conversation/ConversationUpdateType.js"></script>
 <script src="/script/conversation/ConversationService.js"></script>
+<script src="/script/conversation/ConversationServiceNoCompound.js"></script>
 <script src="/script/conversation/EventMapper.js"></script>
 <script src="/script/conversation/ConversationMapper.js"></script>
 <script src="/script/conversation/ConversationRepository.js"></script>
@@ -193,6 +194,8 @@
 <script src="/script/view_model/GiphyViewModel.js"></script>
 <script src="/script/view_model/ImageDetailViewViewModel.js"></script>
 <script src="/script/view_model/VideoCallingViewModel.js"></script>
+<script src="/script/view_model/content/CollectionViewModel.js"></script>
+<script src="/script/view_model/content/CollectionDetailsViewModel.js"></script>
 <script src="/script/view_model/content/ConnectRequestsViewModel.js"></script>
 <script src="/script/view_model/content/ContentState.js"></script>
 <script src="/script/view_model/content/ContentViewModel.js"></script>
@@ -232,10 +235,12 @@
 <script src="/script/components/userProfile.js"></script>
 <script src="/script/components/userInput.js"></script>
 <script src="/script/components/userList.js"></script>
+<script src="/script/components/asset/assetHeader.js"></script>
 <script src="/script/components/asset/videoAsset.js"></script>
 <script src="/script/components/asset/audioAsset.js"></script>
 <script src="/script/components/asset/fileAsset.js"></script>
 <script src="/script/components/asset/linkPreviewAsset.js"></script>
+<script src="/script/components/asset/linkPreviewCompactAsset.js"></script>
 <script src="/script/components/asset/locationAsset.js"></script>
 <script src="/script/components/asset/controls/audioSeekBar.js"></script>
 <script src="/script/components/asset/controls/seekBar.js"></script>
@@ -244,6 +249,8 @@
 <script src="/script/components/calling/deviceToggleButton.js"></script>
 <!-- Entities -->
 <script src="/script/message/CallMessageType.js"></script>
+<script src="/script/message/MessageCategory.js"></script>
+<script src="/script/message/MessageCategorization.js"></script>
 <script src="/script/message/EphemeralStatusType.js"></script>
 <script src="/script/message/StatusType.js"></script>
 <script src="/script/message/PingMessageType.js"></script>

app/page/template/content/collection-details.htm

@@ -0,0 +1,59 @@
+<div id="collection-details"
+     class="collection content-wrapper"
+     data-bind="with: $root.collection_details, removed_from_view: $root.collection_details.removed_from_view">
+
+  <!-- ko if: conversation_et() -->
+
+    <div class="content-titlebar">
+
+      <div class="content-titlebar-items-left">
+        <span class="content-titlebar-icon icon-back" data-bind="click: click_on_back_button"></span>
+      </div>
+
+      <span class="content-titlebar-items-center">
+        <span><span class="label-bold-xs">Pictures</span> <span class="text-graphite">in</span> <span class="text-graphite" data-bind="text: conversation_et().display_name()"></span></span>
+      </span>
+
+    </div>
+
+    <div class="content-list">
+
+      <div class="collection-images">
+
+        <!-- ko if: template() === 'images' -->
+          <!-- ko foreach: {data: items(), as: 'message_et'} -->
+            <image-component class="collection-image" params="asset: message_et.get_first_asset().resource"></image-component>
+          <!-- /ko -->
+        <!-- /ko -->
+
+        <!-- ko if: template() === 'links' -->
+          <!-- ko foreach: {data: items(), as: 'message_et'} -->
+            <link-preview-compact-asset params="message: message_et, header: true"></link-preview-compact-asset>
+          <!-- /ko -->
+        <!-- /ko -->
+
+        <!-- ko if: template() === 'files' -->
+          <!-- ko foreach: {data: items(), as: 'message_et'} -->
+            <file-asset class="collection-file" params="message: message_et, header: true"></file-asset>
+          <!-- /ko -->
+        <!-- /ko -->
+
+        <!-- ko if: template() === 'audio' -->
+          <!-- ko foreach: {data: items(), as: 'message_et'} -->
+            <audio-asset class="collection-file" params="message: message_et, header: true"></audio-asset>
+          <!-- /ko -->
+        <!-- /ko -->
+
+        <!-- ko if: template() === 'video' -->
+          <!-- ko foreach: {data: items(), as: 'message_et'} -->
+            <video-asset class="collection-file" params="message: message_et"></video-asset>
+          <!-- /ko -->
+        <!-- /ko -->
+
+      </div>
+
+    </div>
+
+  <!-- /ko -->
+
+</div>

app/page/template/content/collection.htm

@@ -0,0 +1,121 @@
+<div id="collection"
+     class="collection content-wrapper"
+     data-bind="with: $root.collection, removed_from_view: $root.collection.removed_from_view">
+
+  <!-- ko if: conversation_et() -->
+
+    <div class="content-titlebar">
+
+      <span class="content-titlebar-items-center" data-bind="text: conversation_et().display_name()"></span>
+
+      <div class="content-titlebar-items-right">
+        <span class="content-titlebar-icon icon-close" data-bind="click: click_on_back_button"></span>
+      </div>
+
+    </div>
+
+    <div class="content-list collection-list">
+
+      <!-- ko ifnot: no_items_found() -->
+
+        <!-- ko if: images().length -->
+          <section class="collection-section" data-uie-name="collection-section-image">
+            <header>
+              <span class="collection-header-icon icon-library"></span>
+              <span class="label-bold-xs">Pictures</span>
+              <!-- ko if: images().length > 10 -->
+                <span class="collection-header-all text-theme" data-bind="click: function() { click_on_section('images', images()) }"><span data-bind="l10n_html: {'id': z.string.collection_show_all, 'replace': {'placeholder': '%no', 'content': images().length}}" data-uie-name="collection-size"></span> <span class="icon-forward font-size-xxs"></span></span>
+              <!-- /ko -->
+            </header>
+            <div class="collection-images">
+              <!-- ko foreach: {data: images.slice(0,10), as: 'message_et'} -->
+                <image-component class="collection-image" data-bind="click: $parent.click_on_image" params="asset: message_et.get_first_asset().resource"></image-component>
+              <!-- /ko -->
+            </div>
+          </section>
+        <!-- /ko -->
+
+        <!-- ko if: links().length -->
+          <section class="collection-section" data-uie-name="collection-section-link">
+            <header>
+              <span class="collection-header-icon icon-link"></span>
+              <span class="label-bold-xs">Links</span>
+              <!-- ko if: links().length > 4 -->
+                <span class="collection-header-all text-theme" data-bind="click: function() { click_on_section('links', links()) }"><span data-bind="l10n_html: {'id': z.string.collection_show_all, 'replace': {'placeholder': '%no', 'content': links().length}}" data-uie-name="collection-size"></span> <span class="icon-forward font-size-xxs"></span></span>
+              <!-- /ko -->
+            </header>
+            <div class="collection-images">
+              <!-- ko foreach: {data: links.slice(0,4), as: 'message_et'} -->
+                <link-preview-compact-asset params="message: message_et, header: true"></link-preview-compact-asset>
+              <!-- /ko -->
+            </div>
+          </section>
+        <!-- /ko -->
+
+        <!-- ko if: video().length -->
+          <section class="collection-section" data-uie-name="collection-section-video">
+            <header>
+              <span class="collection-header-icon icon-video"></span>
+              <span class="label-bold-xs">Videos</span>
+              <!-- ko if: video().length > 4 -->
+                <span class="collection-header-all text-theme" data-bind="click: function() { click_on_section('video', video()) }"><span data-bind="l10n_html: {'id': z.string.collection_show_all, 'replace': {'placeholder': '%no', 'content': video().length}}" data-uie-name="collection-size"></span> <span class="icon-forward font-size-xxs"></span></span>
+              <!-- /ko -->
+            </header>
+            <div class="collection-images">
+              <!-- ko foreach: {data: video.slice(0,4), as: 'message_et'} -->
+                <video-asset class="collection-video" params="message: message_et"></video-asset>
+              <!-- /ko -->
+            </div>
+          </section>
+        <!-- /ko -->
+
+        <!-- ko if: audio().length -->
+          <section class="collection-section" data-uie-name="collection-section-audio">
+            <header>
+              <span class="collection-header-icon icon-microphone"></span>
+              <span class="label-bold-xs">Audio messages</span>
+              <!-- ko if: audio().length > 4 -->
+                <span class="collection-header-all text-theme" data-bind="click: function() { click_on_section('audio', audio()) }"><span data-bind="l10n_html: {'id': z.string.collection_show_all, 'replace': {'placeholder': '%no', 'content': audio().length}}" data-uie-name="collection-size"></span> <span class="icon-forward font-size-xxs"></span></span>
+              <!-- /ko -->
+            </header>
+            <div class="collection-images">
+              <!-- ko foreach: {data: audio.slice(0,4), as: 'message_et'} -->
+                <audio-asset class="collection-file" params="message: message_et, header: true"></audio-asset>
+              <!-- /ko -->
+            </div>
+          </section>
+        <!-- /ko -->
+
+        <!-- ko if: files().length -->
+          <section class="collection-section" data-uie-name="collection-section-file">
+            <header>
+              <span class="collection-header-icon icon-file"></span>
+              <span class="label-bold-xs">files</span>
+              <!-- ko if: files().length > 4 -->
+                <span class="collection-header-all text-theme" data-bind="click: function() { click_on_section('files', files()) }"><span data-bind="l10n_html: {'id': z.string.collection_show_all, 'replace': {'placeholder': '%no', 'content': files().length}}" data-uie-name="collection-size"></span> <span class="icon-forward font-size-xxs"></span></span>
+              <!-- /ko -->
+            </header>
+            <div class="collection-images">
+              <!-- ko foreach: {data: files.slice(0,4), as: 'message_et'} -->
+                <file-asset class="collection-file" params="message: message_et, header: true"></file-asset>
+              <!-- /ko -->
+            </div>
+          </section>
+        <!-- /ko -->
+
+      <!-- /ko -->
+
+      <!-- ko if: no_items_found() -->
+
+        <div class="absolute-center" data-uie-name="collection-no-items">
+          <div class="collection-no-items-icon icon-collection"></div>
+          <div class="label-bold-xs text-graphite text-center">No items</div>
+        </div>
+
+      <!-- /ko -->
+
+    </div>
+
+  <!-- /ko -->
+
+</div>

app/page/template/content/conversation.htm

@@ -13,7 +13,6 @@
       #include('content/conversation/message-list.htm')
       #include('content/conversation/conversation-input.htm')
       #include('content/conversation/participants.htm')
-      #include('content/conversation/detail-view.htm')
       #include('content/conversation/giphy.htm')
     <!-- /ko -->
 

app/page/template/content/conversation/conversation-titlebar.htm

@@ -1,6 +1,12 @@
 <div id="conversation-titlebar" class="conversation-titlebar" data-bind="with: $root.conversation_titlebar">
   <!-- ko if: conversation_et() -->
 
+    <div class="conversation-titlebar-library">
+      <span class="conversation-titlebar-icon button-icon-large icon-collection"
+            data-bind="click: click_on_collection_button"
+            data-uie-name="do-collections"></span>
+    </div>
+
     <!-- ko if: conversation_et().is_verified() -->
       <svg class="conversation-verified-icon" width="16" height="16">
         <use xlink:href="#icon-verified"></use>
@@ -35,7 +41,7 @@
     <!-- ko if: has_ongoing_call() -->
       <div class="conversation-titlebar-icons">
         <!-- ko if: show_maximize_control() -->
-          <span class="conversation-titlebar-icon button-icon-large icon-fullscreen "
+          <span class="conversation-titlebar-icon button-icon-large icon-fullscreen"
                 data-bind="click: click_on_maximize"
                 data-uie-name="do-maximize-call">
           </span>

app/page/template/detail-view.htm

@@ -0,0 +1,6 @@
+<div id="detail-view" class="modal detail-view">
+  <img class="detail-view-image modal-content-anim-close" data-bind="attr: {src: image_src()}, css: {'modal-content-anim-open': image_visible()}" data-uie-name="status-picture"/>
+  <div class="detail-view-close-button">
+    <span class="icon-close icon-button" data-bind="click: hide_detail_view" data-uie-name="do-close-detail-view"></span>
+  </div>
+</div>

app/page/template/partials/template-message.htm

@@ -92,17 +92,17 @@
           <div class="text" data-bind="html: asset.render(), css: {'text-graphite': $parent.is_editing, 'text-large': z.util.emoji.includes_only_emojies(asset.text), 'text-graphite': message.status() === z.message.StatusType.SENDING, 'ephemeral-message-obfuscated': message.is_expired()}" dir="auto"></div>
         <!-- /ko -->
         <!-- ko foreach: asset.previews() -->
-          <link-preview-asset params="expired: message.is_expired(), preview: $data, viewport_changed: $parents[2].viewport_changed"></link-preview-asset>
+          <link-preview-compact-asset data-bind="css: {'ephemeral-asset-expired': message.is_expired()}" params="message: message"></link-preview-compact-asset>
         <!-- /ko -->
       <!-- /ko -->
       <!-- ko if: asset.is_video() -->
-        <video-asset data-bind="css: {'bg-color-ephemeral icon-movie text-white flex-center': message.is_expired()}" params="asset: asset, expired: message.is_expired()"></video-asset>
+        <video-asset class="message-asset" data-bind="css: {'ephemeral-asset-expired icon-movie': message.is_expired()}" params="message: message"></video-asset>
       <!-- /ko -->
       <!-- ko if: asset.is_audio() -->
-        <audio-asset data-bind="css: {'bg-color-ephemeral icon-microphone text-white flex-center': message.is_expired()}" params="asset: asset, expired: message.is_expired()"></audio-asset>
+        <audio-asset class="message-asset" data-bind="css: {'ephemeral-asset-expired icon-microphone': message.is_expired()}" params="message: message"></audio-asset>
       <!-- /ko -->
       <!-- ko if: asset.is_file() -->
-        <file-asset params="asset: asset, expired: message.is_expired()"></file-asset>
+        <file-asset class="message-asset" data-bind="css: {'ephemeral-asset-expired icon-file': message.is_expired()}" params="message: message"></file-asset>
       <!-- /ko -->
       <!-- ko if: asset.is_location() -->
         <location-asset params="asset: asset"></location-asset>

app/page/template/wire-main.htm

@@ -24,8 +24,14 @@
         <!-- ko if: content_state() === z.ViewModel.content.CONTENT_STATE.CONVERSATION -->
           #include('content/conversation.htm')
         <!-- /ko -->
+        <!-- ko if: content_state() === z.ViewModel.content.CONTENT_STATE.COLLECTION -->
+          #include('content/collection.htm')
+        <!-- /ko -->
+        <!-- ko if: content_state() === z.ViewModel.content.CONTENT_STATE.COLLECTION_DETAILS -->
+          #include('content/collection-details.htm')
+        <!-- /ko -->
         <!-- ko if: content_state() === z.ViewModel.content.CONTENT_STATE.PREFERENCES_ABOUT -->
-         #include('content/preferences-about.htm')
+          #include('content/preferences-about.htm')
         <!-- /ko -->
         <!-- ko if: content_state() === z.ViewModel.content.CONTENT_STATE.PREFERENCES_ACCOUNT -->
           #include('content/preferences-account.htm')
@@ -47,6 +53,7 @@
         <!-- /ko -->
       </div>
     </div>
+    #include('detail-view.htm')
     #include('video-calling.htm')
     #include('warning.htm')
     #include('modals.htm')

app/script/components/asset/assetHeader.coffee

@@ -0,0 +1,33 @@
+#
+# Wire
+# Copyright (C) 2016 Wire Swiss GmbH
+#
+# This program is free software: you can redistribute it and/or modify
+# it under the terms of the GNU General Public License as published by
+# the Free Software Foundation, either version 3 of the License, or
+# (at your option) any later version.
+#
+# This program is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+# GNU General Public License for more details.
+#
+# You should have received a copy of the GNU General Public License
+# along with this program. If not, see http://www.gnu.org/licenses/.
+#
+
+window.z ?= {}
+z.components ?= {}
+
+class z.components.AssetHeader
+
+  constructor: (params) ->
+    @message_et = params.message
+
+
+ko.components.register 'asset-header',
+  viewModel: z.components.AssetHeader
+  template: """
+            <span data-bind="text: message_et.sender_name(), css: message_et.accent_color" class="asset-header-name"></span>
+            <span data-bind="text: moment(message_et.timestamp).format('D.M H:mm')" class="asset-header-time"></span>
+            """