Merge pull request nextcloud#7754 from pierlon/master

Add icons to devices/sessions

Author: MorrisJobke

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

@@ -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 {

core/img/clients/phone.svg

@@ -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) {

core/img/clients/tablet.svg

@@ -37,6 +37,7 @@
 	<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>