Add icons to devices/sessionstags/v14.0.0beta1
background-image: url('../img/places/picture.svg?v=1'); | 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 ------------------------------------------------------------------- */ | /* APP CATEGORIES ------------------------------------------------------------------- */ | ||||
.icon-category-installed { | .icon-category-installed { | ||||
background-image: url('../img/actions/user.svg?v=1'); | background-image: url('../img/actions/user.svg?v=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> |
<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> |
<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> |
} | } | ||||
} | } | ||||
.token-list td { | .token-list td { | ||||
&.more { | |||||
&%icon { | |||||
overflow: visible; | overflow: visible; | ||||
position: relative; | position: relative; | ||||
width: 16px; | width: 16px; | ||||
} | } | ||||
&.more { | |||||
@extend %icon; | |||||
} | |||||
&.client { | |||||
@extend %icon; | |||||
div { | |||||
opacity: 0.57; | |||||
width: inherit; | |||||
padding-top: 5px; | |||||
} | |||||
} | |||||
border-top: 1px solid #DDD; | border-top: 1px solid #DDD; | ||||
text-overflow: ellipsis; | text-overflow: ellipsis; | ||||
max-width: 200px; | max-width: 200px; | ||||
vertical-align: top; | vertical-align: top; | ||||
position: relative; | position: relative; | ||||
} | } | ||||
tr > *:nth-child(2) { | |||||
tr > *:nth-child(3) { | |||||
text-align: right; | text-align: right; | ||||
} | } | ||||
.token-list { | .token-list { |
var TEMPLATE_TOKEN = | var TEMPLATE_TOKEN = | ||||
'<tr data-id="{{id}}">' | '<tr data-id="{{id}}">' | ||||
+ '<td class="client">' | |||||
+ '<div class="{{icon}}" />' | |||||
+ '</td>' | |||||
+ '<td class="has-tooltip" title="{{title}}">' | + '<td class="has-tooltip" title="{{title}}">' | ||||
+ '<span class="token-name">{{name}}</span>' | + '<span class="token-name">{{name}}</span>' | ||||
+ '</td>' | + '</td>' | ||||
sailfishBrowser: 'SailfishBrowser' | 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) { | if (matches) { | ||||
viewData.name = t('settings', 'Sync client - {os}', { | viewData.name = t('settings', 'Sync client - {os}', { | ||||
os: matches[1], | os: matches[1], | ||||
} else { | } else { | ||||
viewData.name = nameMap[client]; | viewData.name = nameMap[client]; | ||||
} | } | ||||
// update title - for easier view | |||||
viewData.title = viewData.name; | |||||
viewData.icon = iconMap[client]; | |||||
} | } | ||||
} | } | ||||
if (viewData.current) { | if (viewData.current) { |
<table class="icon-loading"> | <table class="icon-loading"> | ||||
<thead class="token-list-header"> | <thead class="token-list-header"> | ||||
<tr> | <tr> | ||||
<th></th> | |||||
<th><?php p($l->t('Device'));?></th> | <th><?php p($l->t('Device'));?></th> | ||||
<th><?php p($l->t('Last activity'));?></th> | <th><?php p($l->t('Last activity'));?></th> | ||||
<th></th> | <th></th> |