Extract toggle-button component

dist/package.sh

@@ -33,7 +33,7 @@ VERSION=$(grep "\"version\"" package.json  | sed 's/[[:blank:]]*\"version\": \"\
 DIR="release/threema-web-$VERSION"
 
 echo "+ Create release directory..."
-mkdir -p $DIR/{dist,partials,directives,node_modules,partials/messenger.receiver,troubleshoot}
+mkdir -p $DIR/{dist,partials,directives,components,node_modules,partials/messenger.receiver,troubleshoot}
 
 echo "+ Copy code..."
 cp -R index.html $DIR/
@@ -43,6 +43,7 @@ cp -R troubleshoot/* $DIR/troubleshoot/
 cp -R src/partials/*.html $DIR/partials/
 cp -R src/partials/messenger.receiver/*.html $DIR/partials/messenger.receiver/
 cp -R src/directives/*.html $DIR/directives/
+cp -R src/components/*.html $DIR/components/
 
 echo "+ Copy dependencies..."
 targets=(

src/app.ts

@@ -19,6 +19,7 @@
 
 import {AsyncEvent} from 'ts-events';
 
+import './components';
 import config from './config';
 import './controllers';
 import './directives';
@@ -50,6 +51,7 @@ angular.module('3ema', [
 
     // Own
     '3ema.filters',
+    '3ema.components',
     '3ema.directives',
     '3ema.container',
     '3ema.services',
@@ -125,6 +127,7 @@ angular.module('3ema', [
             request: (conf) => {
                 if (conf.url.indexOf('partials/') !== -1 ||
                     conf.url.indexOf('directives/') !== -1 ||
+                    conf.url.indexOf('components/') !== -1 ||
                     conf.url.indexOf('i18n/') !== -1) {
                     const separator = conf.url.indexOf('?') === -1 ? '?' : '&';
                     conf.url = conf.url + separator + CACHE_BUST;

src/components.ts

@@ -0,0 +1,22 @@
+/**
+ * This file is part of Threema Web.
+ *
+ * Threema Web is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU Affero 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 Affero
+ * General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with Threema Web. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+angular.module('3ema.components', []);
+
+import toggleButton from './components/toggle_button';
+
+angular.module('3ema.components').component('toggleButton', toggleButton);

src/components/toggle_button.ts

@@ -0,0 +1,51 @@
+/**
+ * This file is part of Threema Web.
+ *
+ * Threema Web is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU Affero 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 Affero
+ * General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with Threema Web. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+/**
+ * A generic toggle button.
+ *
+ * The toggle button has a boolean flag, which sets it to enabled/disabled. The
+ * caller needs to provide labels and icons for both states, as well as
+ * transition functions (onEnable and onDisable).
+ */
+export default {
+    bindings: {
+        flag: '<',
+        onEnable: '&',
+        onDisable: '&',
+        labelEnabled: '@',
+        labelDisabled: '@',
+        iconEnabled: '@',
+        iconDisabled: '@',
+    },
+    template: `
+        <md-button
+            class="md-icon-button"
+            translate-attr="{'aria-label': $ctrl.labelEnabled, 'title': $ctrl.labelEnabled}"
+            ng-if="$ctrl.flag"
+            ng-click="$ctrl.onDisable()">
+            <md-icon><img ng-src="{{ $ctrl.iconEnabled }}"></md-icon>
+        </md-button>
+        <md-button
+            class="md-icon-button"
+            translate-attr="{'aria-label': $ctrl.labelDisabled, 'title': $ctrl.labelDisabled}"
+            ng-if="!$ctrl.flag"
+            ng-click="$ctrl.onEnable()">
+            <md-icon><img ng-src="{{ $ctrl.iconDisabled }}"></md-icon>
+        </md-button>
+    `,
+};

src/partials/messenger.conversation.html

@@ -27,22 +27,14 @@
 
         <!-- Menu -->
         <div class="header-buttons">
-            <md-button
-                class="md-icon-button"
-                aria-label="Conversation is pinned"
-                translate-attr="{'aria-label': 'messenger.PINNED_CONVERSATION', 'title': 'messenger.PINNED_CONVERSATION'}"
-                ng-if="ctrl.conversation.isStarred"
-                ng-click="ctrl.unpinConversation()">
-                <md-icon><img src="img/ic_pin.svg"></md-icon>
-            </md-button>
-            <md-button
-                class="md-icon-button"
-                aria-label="Conversation is not pinned"
-                translate-attr="{'aria-label': 'messenger.UNPINNED_CONVERSATION', 'title': 'messenger.UNPINNED_CONVERSATION'}"
-                ng-if="!ctrl.conversation.isStarred"
-                ng-click="ctrl.pinConversation()">
-                <md-icon><img src="img/ic_unpin.svg"></md-icon>
-            </md-button>
+            <toggle-button
+                flag="ctrl.conversation.isStarred"
+                on-enable="ctrl.pinConversation()"
+                on-disable="ctrl.unpinConversation()"
+                label-enabled="messenger.PINNED_CONVERSATION"
+                label-disabled="messenger.UNPINNED_CONVERSATION"
+                icon-enabled="img/ic_pin.svg"
+                icon-disabled="img/ic_unpin.svg">
         </div>
     </div>
 
@@ -63,7 +55,7 @@
         <ul class="chat">
             <li in-view="$inview && !ctrl.locked && ctrl.topOfChat()" class="load-more">
                 <div ng-if="ctrl.hasMoreMessages()" class="loading">
-                    <img ng-src="img/spinner.gif" alt="..." translate translate-attr-aria-label="messenger.LOADING_MESSAGES">
+                    <img src="img/spinner.gif" alt="..." translate translate-attr-aria-label="messenger.LOADING_MESSAGES">
                 </div>
             </li>
             <li ng-repeat="message in ctrl.messages" id="message-{{message.id}}">