Merge pull request #7754 from pierlon/master

Add icons to devices/sessions

core/css/icons.scss

@@ -516,6 +516,20 @@ img, object, video, button, textarea, input, select, div[contenteditable=true] {
 	background-image: url('../img/places/picture.svg?v=1');
 }
 
+/* CLIENTS ------------------------------------------------------------------- */
+
+.icon-desktop {
+	background-image: url('../img/clients/desktop.svg?v=1');
+}
+
+.icon-phone {
+	background-image: url('../img/clients/phone.svg?v=1');
+}
+
+.icon-tablet {
+	background-image: url('../img/clients/tablet.svg?v=1');
+}
+
 /* APP CATEGORIES ------------------------------------------------------------------- */
 .icon-category-installed {
 	background-image: url('../img/actions/user.svg?v=1');

core/img/clients/desktop.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 4.233 4.233"><path d="M1.597 3.082v.47l-.085.043-.395.202h2l-.403-.206-.079-.04v-.469zM.267.436C.175.436.04.512.04.606v2.307c0 .094.075.17.167.17h3.82a.168.168 0 0 0 .168-.17V.606a.169.169 0 0 0-.167-.17zm-.035.16L3.967.57c.052 0 .09.042.09.095v2.141c0 .053-.04.095-.09.095h-3.7a.092.092 0 0 1-.093-.094V.675A.14.14 0 0 1 .232.597z" stroke="#000" stroke-width=".079" stroke-linejoin="round"/></svg>

core/img/clients/phone.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 4.233 4.233"><path d="M1.19 0a.399.399 0 0 0-.396.396v3.441a.4.4 0 0 0 .396.397h1.72a.4.4 0 0 0 .397-.397V.396a.399.399 0 0 0-.396-.397zm.135.398h1.453a.13.13 0 0 1 .134.133v2.974a.13.13 0 0 1-.133.133H1.325a.13.13 0 0 1-.134-.133V.531a.13.13 0 0 1 .134-.133z"/></svg>

core/img/clients/tablet.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 4.233 4.233"><path d="M.971 0A.452.452 0 0 0 .53.455v3.323c0 .249.2.455.442.455h2.29a.452.452 0 0 0 .443-.455V.455c0-.249-.2-.455-.442-.455zm0 .426h2.29c.02 0 .03.008.03.029v3.323c0 .02-.01.03-.03.03H.972c-.02 0-.027-.01-.027-.03V.455c0-.02.008-.029.027-.029z"/></svg>

settings/css/settings.scss

@@ -329,11 +329,23 @@ table.nostyle {
 		}
 	}
 	.token-list td {
-		&.more {
+		&%icon {
 			overflow: visible;
 			position: relative;
 			width: 16px;
 		}
+		&.more {
+			@extend %icon;
+		}
+		&.client {
+			@extend %icon;
+
+			div {
+				opacity: 0.57;
+				width: inherit;
+				padding-top: 5px;
+			}
+		}
 		border-top: 1px solid #DDD;
 		text-overflow: ellipsis;
 		max-width: 200px;
@@ -342,7 +354,7 @@ table.nostyle {
 		vertical-align: top;
 		position: relative;
 	}
-	tr > *:nth-child(2) {
+	tr > *:nth-child(3) {
 		text-align: right;
 	}
 	.token-list {

settings/js/authtoken_view.js

@@ -27,6 +27,9 @@
 
 	var TEMPLATE_TOKEN =
 		'<tr data-id="{{id}}">'
+		+ '<td class="client">'
+		+ '<div class="{{icon}}" />'
+		+ '</td>'
 		+ '<td class="has-tooltip" title="{{title}}">'
 		+ '<span class="token-name">{{name}}</span>'
 		+ '</td>'
@@ -146,6 +149,22 @@
 				sailfishBrowser: 'SailfishBrowser'
 			};
 
+			var iconMap = {
+				ie: 'icon-desktop',
+				edge: 'icon-desktop',
+				firefox: 'icon-desktop',
+				chrome: 'icon-desktop',
+				safari: 'icon-desktop',
+				androidChrome: 'icon-phone',
+				iphone: 'icon-phone',
+				ipad: 'icon-tablet',
+				iosClient: 'icon-phone',
+				androidClient: 'icon-phone',
+				davDroid: 'icon-phone',
+				webPirate: 'icon-link',
+				sailfishBrowser: 'icon-link'
+			};
+
 			if (matches) {
 				viewData.name = t('settings', 'Sync client - {os}', {
 					os: matches[1],
@@ -161,6 +180,11 @@
 					} else {
 						viewData.name = nameMap[client];
 					}
+
+					// update title - for easier view
+					viewData.title = viewData.name;
+
+					viewData.icon = iconMap[client];
 				}
 			}
 			if (viewData.current) {

settings/templates/settings/personal/security.php

@@ -37,6 +37,7 @@ script('settings', [
 	<table class="icon-loading">
 		<thead class="token-list-header">
 			<tr>
+				<th></th>
 				<th><?php p($l->t('Device'));?></th>
 				<th><?php p($l->t('Last activity'));?></th>
 				<th></th>