From ab0749392c9dbb89cc7ed6c59f2fb27bd90a59bd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ren=C3=A9=20Herrmann?= <rene@herrmannplatz.de>
Date: Tue, 17 Jan 2017 11:49:22 +0100
Subject: [PATCH] design improvements (#635)

---
 app/page/template/content/collection-details.htm    |  4 ++--
 app/page/template/content/collection.htm            | 12 ++++++------
 app/page/template/partials/template-message.htm     |  8 ++++----
 app/script/components/asset/linkPreviewAsset.coffee |  4 ++--
 app/style/common/common.less                        |  2 +-
 app/style/components/asset/link-preview-asset.less  | 12 ++++++++----
 app/style/components/asset/location-asset.less      |  3 +--
 7 files changed, 24 insertions(+), 21 deletions(-)

diff --git a/app/page/template/content/collection-details.htm b/app/page/template/content/collection-details.htm
index 2215d9c70af..2a720b30e66 100644
--- a/app/page/template/content/collection-details.htm
+++ b/app/page/template/content/collection-details.htm
@@ -6,9 +6,9 @@
 
     <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>
+        <span class="content-titlebar-icon icon-back" data-uie-name="do-collection-details-close" data-bind="click: click_on_back_button"></span>
       </div>
-      <span class="content-titlebar-items-center" data-bind="text: conversation_et().display_name()"></span>
+      <span class="content-titlebar-items-center" data-uie-name="collection-details-conversation-name" data-bind="text: conversation_et().display_name()"></span>
     </div>
 
     <div class="content-list-wrapper">
diff --git a/app/page/template/content/collection.htm b/app/page/template/content/collection.htm
index 853a07e478f..59b433cb08e 100644
--- a/app/page/template/content/collection.htm
+++ b/app/page/template/content/collection.htm
@@ -16,12 +16,12 @@
 
         <!-- ko ifnot: no_items_found() -->
           <!-- ko if: images().length -->
-            <section class="collection-section" data-uie-name="collection-section-image">
+            <section class="collection-section" data-uie-name="collection-section-image" data-bind="attr: {'data-uie-collection-size': images().length}">
               <header>
                 <span class="collection-header-icon icon-library"></span>
                 <span class="label-bold-xs" data-bind="l10n_text: z.string.collection_section_images"></span>
                 <!-- ko if: images().length > 12 -->
-                  <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>
+                  <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-show-all"></span> <span class="icon-forward font-size-xxs"></span></span>
                 <!-- /ko -->
               </header>
               <div class="collection-images">
@@ -33,12 +33,12 @@
           <!-- /ko -->
 
           <!-- ko if: links().length -->
-            <section class="collection-section" data-uie-name="collection-section-link">
+            <section class="collection-section" data-uie-name="collection-section-link" data-bind="attr: {'data-uie-collection-size': links().length}">
               <header>
                 <span class="collection-header-icon icon-link"></span>
                 <span class="label-bold-xs" data-bind="l10n_text: z.string.collection_section_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>
+                  <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-show-all"></span> <span class="icon-forward font-size-xxs"></span></span>
                 <!-- /ko -->
               </header>
               <div class="collection-images">
@@ -50,12 +50,12 @@
           <!-- /ko -->
 
           <!-- ko if: files().length -->
-            <section class="collection-section" data-uie-name="collection-section-file">
+            <section class="collection-section" data-uie-name="collection-section-file" data-bind="attr: {'data-uie-collection-size': files().length}">
               <header>
                 <span class="collection-header-icon icon-file"></span>
                 <span class="label-bold-xs" data-bind="l10n_text: z.string.collection_section_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>
+                  <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-show-all"></span> <span class="icon-forward font-size-xxs"></span></span>
                 <!-- /ko -->
               </header>
               <div class="collection-images">
diff --git a/app/page/template/partials/template-message.htm b/app/page/template/partials/template-message.htm
index 29805d1b826..cd473a418e7 100644
--- a/app/page/template/partials/template-message.htm
+++ b/app/page/template/partials/template-message.htm
@@ -34,8 +34,8 @@
     <div class="message-header-icon">
       <user-avatar class="sender-avatar user-avatar-xs" data-bubble="#participants-bubble" data-placement="vertical" params="user: message.user(), click: $parent.on_message_user_click"></user-avatar>
     </div>
-    <div class="message-header-label label-bold">
-      <span data-bind='text: message.sender_name()'></span>
+    <div class="message-header-label">
+      <span class="label-bold" data-bind='text: message.sender_name()'></span>
       <span class="message-header-label-icon icon-trash" data-bind="attr: {title: message.display_deleted_timestamp()}"></span>
     </div>
     <div class="message-body-actions message-body-actions-large">
@@ -50,8 +50,8 @@
       <div class="message-header-icon">
         <user-avatar class="sender-avatar user-avatar-xs" data-bubble="#participants-bubble" data-placement="vertical" params="user: message.user(), click: $parent.on_message_user_click"></user-avatar>
       </div>
-      <div class="message-header-label label-bold">
-        <span data-bind='text: message.user().first_name()'></span>
+      <div class="message-header-label">
+        <span class="label-bold" data-bind='text: message.user().first_name()'></span>
         <!-- ko if: was_edited() -->
           <span class="message-header-label-icon icon-edit" data-bind="attr: {title: message.display_edited_timestamp()}"></span>
         <!-- /ko -->
diff --git a/app/script/components/asset/linkPreviewAsset.coffee b/app/script/components/asset/linkPreviewAsset.coffee
index 66b2cd28ff8..4add8fae7ee 100644
--- a/app/script/components/asset/linkPreviewAsset.coffee
+++ b/app/script/components/asset/linkPreviewAsset.coffee
@@ -62,7 +62,7 @@ ko.components.register 'link-preview-asset',
                 <!-- ko if: header -->
                   <asset-header class="link-preview-info-header" params="message: message_et"></asset-header>
                 <!-- /ko -->
-                <div class="link-preview-info-title" data-uie-name="link-preview-title" data-bind="text: preview.title, css: header ? 'link-preview-info-title-sigleline' : 'link-preview-info-title-multiline'"></div>
+                <div class="link-preview-info-title" data-uie-name="link-preview-title" data-bind="text: preview.title, css: header ? 'link-preview-info-title-singleline' : 'link-preview-info-title-multiline'"></div>
                 <a class="link-preview-info-link text-graphite ellipsis" data-uie-name="link-preview-url" target="_blank" rel="nofollow noopener noreferrer"
                    data-bind="text: z.util.naked_url(url), attr: {href: z.util.add_http(url), title: url}"></a>
               </div>
@@ -72,7 +72,7 @@ ko.components.register 'link-preview-asset',
                 <div class="link-preview-image-placeholder icon-link bg-color-ephemeral text-white"></div>
               </div>
               <div class="link-preview-info">
-                <div class="link-preview-info-title ephemeral-message-obfuscated" data-bind="text: z.util.StringUtil.obfuscate(preview.title), css: header ? 'link-preview-info-title-sigleline' : 'link-preview-info-title-multiline'"></div>
+                <div class="link-preview-info-title ephemeral-message-obfuscated" data-bind="text: z.util.StringUtil.obfuscate(preview.title), css: header ? 'link-preview-info-title-singleline' : 'link-preview-info-title-multiline'"></div>
                 <a class="link-preview-info-link ephemeral-message-obfuscated ellipsis" target="_blank" rel="nofollow noopener noreferrer"
                    data-bind="text: z.util.StringUtil.obfuscate(url)"></a>
               </div>
diff --git a/app/style/common/common.less b/app/style/common/common.less
index 7358b2ad05e..5127b5e1756 100644
--- a/app/style/common/common.less
+++ b/app/style/common/common.less
@@ -20,7 +20,7 @@
 // Set of common styles
 
 .popover-title {
-  font-weight: 500;
+  font-weight: @font-weight-bold;
   line-height: @line-height-md;
   margin-bottom: 4px;
 }
diff --git a/app/style/components/asset/link-preview-asset.less b/app/style/components/asset/link-preview-asset.less
index 2573531e20c..a5b049c323c 100644
--- a/app/style/components/asset/link-preview-asset.less
+++ b/app/style/components/asset/link-preview-asset.less
@@ -17,6 +17,9 @@
  *
  */
 
+// variables
+@link-preview-height: 88px;
+
 link-preview-asset {
   .asset-container-style;
   cursor: pointer;
@@ -24,7 +27,7 @@ link-preview-asset {
 }
 
 .link-preview-image-container {
-  .square(88px);
+  .square(@link-preview-height);
   background-color: fade(@graphite, 24%);
   flex: 0 0 auto;
 }
@@ -42,11 +45,12 @@ link-preview-asset {
 }
 
 .link-preview-info {
-  flex: 1 1 auto;
   display: flex;
+  flex: 1 1 auto;
   flex-direction: column;
-  padding: 12px;
+  height: @link-preview-height;
   justify-content: center;
+  padding: 12px;
   width: 0;
 }
 
@@ -55,7 +59,7 @@ link-preview-asset {
 }
 
 .link-preview-info-title {
-  font-weight: 500; // semi-bold
+  font-weight: @font-weight-bold;
   line-height: @line-height-lg;
   margin-bottom: 4px;
 }
diff --git a/app/style/components/asset/location-asset.less b/app/style/components/asset/location-asset.less
index 639acb58e29..031c218ab5c 100644
--- a/app/style/components/asset/location-asset.less
+++ b/app/style/components/asset/location-asset.less
@@ -31,6 +31,5 @@
 }
 
 .location-asset-title {
-  .label-bold;
-  font-size: @font-size-sm;
+  font-weight: @font-weight-bold;
 }