Migrate 'components' to es6 (#1207)

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

@@ -6,7 +6,7 @@
                   'conversation-input-editing': $root.conversation_input.is_editing()
                 }">
 
-  <!-- ko if: conversation_et() && conversation_et().connection().status() !== z.user.ConnectionStatus.SENT -->
+  <!-- ko if: conversation_et() && conversation_et().connection().is_outgoing_request() -->
     <div class="controls-left">
       <!-- ko if: input().length > 0 -->
         <user-avatar class="user-avatar-xs cursor-default" params="user: self()"></user-avatar>

app/page/template/partials/template-user-profile.htm

@@ -16,7 +16,7 @@
         <!-- /ko -->
       </div>
 
-      <!-- ko if: user().connected() -->
+      <!-- ko if: user().is_connected() -->
         <div class="user-profile-tabs" data-bind="attr: {'data-tab-index': tab_index}">
           <span data-uie-name="go-profile-details" class="user-profile-tab" data-bind="click: function() { click_on_tab(0) }, l10n_text: z.string.people_tabs_details"></span>
           <span data-uie-name="go-profile-devices" class="user-profile-tab" data-bind="click: function() { click_on_tab(1) }, l10n_text: z.string.people_tabs_devices"></span>

app/script/components/accentColorPicker.js

@@ -0,0 +1,56 @@
+/*
+ * Wire
+ * Copyright (C) 2017 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/.
+ *
+ */
+
+'use strict';
+
+window.z = window.z || {};
+window.z.components = z.components || {};
+
+z.components.AccentColorPicker = class AccentColorPicker {
+  /**
+   * Construct a audio seek bar that renders audio levels.
+   *
+   * @param {Object} params - Component parameters
+   * @param {z.entity.User} params.user - User entity
+   * @param {z.entity.File} params.asset - Asset file
+   * @param {ko.observable} params.selected - Selected accent collor
+   */
+  constructor(params) {
+    this.user = ko.unwrap(params.user);
+
+    this.accent_color_ids = [1, 2, 4, 5, 6, 7];
+
+    this.on_select = function(id) {
+      params.selected(id);
+      return true;
+    };
+  }
+};
+
+// Knockout registration of the accent color picker component.
+ko.components.register('accent-color-picker', {
+  template: `
+    <!-- ko foreach: accent_color_ids -->
+      <input type="radio" name="accent"
+             data-bind="attr: {'id': 'accent' + $data, 'checked': $parent.user.accent_id() === $data}, click: $parent.on_select">
+      <label data-bind="attr: {'for': 'accent' + $data},css: 'accent-color-' + $data"></label>
+    <!-- /ko -->
+  `,
+  viewModel: z.components.AccentColorPicker,
+});

app/script/components/asset/assetHeader.js

@@ -0,0 +1,42 @@
+/*
+ * Wire
+ * Copyright (C) 2017 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/.
+ *
+ */
+
+'use strict';
+
+window.z = window.z || {};
+window.z.components = z.components || {};
+
+z.components.AssetHeader = class AssetHeader {
+  /**
+   * Construct a new asset header.
+   * @param {Object} params - Component parameters
+   * @param {z.entity.Message} params.message - Message entity
+   */
+  constructor(params) {
+    this.message_et = params.message;
+  }
+};
+
+ko.components.register('asset-header', {
+  template: `
+    <span class="asset-header-name" data-bind="text: message_et.user().first_name(), css: message_et.accent_color"></span>
+    <span class="asset-header-time" data-bind="text: moment(message_et.timestamp()).format('D.M H:mm')"></span>
+  `,
+  viewModel: z.components.AssetHeader,
+});