Add icons to devices/sessionstags/v14.0.0beta1
@@ -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'); |
@@ -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> |
@@ -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> |
@@ -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> |
@@ -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 { |
@@ -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) { |
@@ -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> |