banananetwork
/
roundcubemail
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Don't use <i> elements, use font-icons in css with :before

Browse Source
pull/5742/merge
Aleksander Machniak 8 years ago
parent b4e311ceb1
commit 774765b67b
12 changed files with 48 additions and 32 deletions
Show Stats Download Patch File Download Diff File

10
skins/elastic/includes/menu.html
Unescape Escape View File

@ -1,13 +1,13 @@
<div id="menu" class="menu">
<h2 id="aria-label-tasknav" class="voice"><roundcube:label name="arialabeltasknav" /></h2>
<div id="taskmenu" role="navigation" aria-labelledby="aria-label-tasknav">
<roundcube:button command="mail" label="mail" type="link" class="button-mail" classSel="button-mail button-selected" innerClass="button-inner" />
<roundcube:button command="addressbook" label="contacts" type="link" class="button-addressbook" classSel="button-addressbook button-selected" innerClass="button-inner" />
<roundcube:button command="mail" label="mail" type="link" class="button-mail" classSel="button-mail button-selected" innerClass="inner" />
<roundcube:button command="addressbook" label="contacts" type="link" class="button-addressbook" classSel="button-addressbook button-selected" innerClass="inner" />
<roundcube:container name="taskbar" id="taskmenu" />
<roundcube:button command="settings" label="settings" type="link" class="button-settings" classSel="button-settings button-selected" innerClass="button-inner" />
<roundcube:button command="settings" label="settings" type="link" class="button-settings" classSel="button-settings button-selected" innerClass="inner" />
<span class="special-buttons">
<roundcube:button name="about" label="about" type="link" class="button-about button-inner" classSel="button-about button-inner" innerClass="button-about button-inner" onclick="UI.about_dialog(this)" />
<roundcube:button command="logout" label="logout" type="link" class="button-logout" classSel="button-logout" innerClass="button-inner" />
<roundcube:button name="about" label="about" type="link" class="button-about" classSel="button-about" innerClass="inner" onclick="UI.about_dialog(this)" />
<roundcube:button command="logout" label="logout" type="link" class="button-logout" classSel="button-logout" innerClass="inner" />
<span>
</div>
</div>

2
skins/elastic/includes/settings-menu.html
Unescape Escape View File

@ -1,6 +1,6 @@
<div id="sidebar" class="sidebar listbox" role="navigation" aria-labelledby="aria-label-settingstabs">
<div class="header" id="aria-label-settingstabs">
<a class="button menu-button" href="#menu"><i class="content icon"></i></a>
<a class="button icon menu-button" href="#menu"><span class="inner"><roundcube:label name="menu" /></span></a>
<roundcube:label name="settings" />
</div>
<div id="settings-menu" class="scroller">

17
skins/elastic/styles/icons.less
Unescape Escape View File

@ -1,6 +1,7 @@
/* font-icons */
button.ui.button.icon:before,
a.button.icon:before,
.toolbar a.button:before,
.toolbarmenu li a:before,
.folderlist li a:before,
@ -278,3 +279,19 @@ button.icon.qrcode:before {
button.icon.search:before {
content: @fa-var-search;
}
a.button.icon.toolbar-menu-button:before {
content: @fa-var-ellipsis-v;
}
a.button.icon.menu-button:before {
content: @fa-var-bars;
}
a.button.icon.back-sidebar-button:before {
content: @fa-var-chevron-left;
}
a.button.icon.back-list-button:before {
content: @fa-var-arrow-left;
}
a.button.icon > span.inner {
display: none;
}

4
skins/elastic/styles/layout.less
Unescape Escape View File

@ -150,7 +150,7 @@ body > #layout > div > .header > a.menu-button {
min-width: 260px;
}
body > #layout > div:not(.selected),
body > #layout > div.menu span.button-inner {
body > #layout > div.menu span.inner {
display: none;
}
body > #layout > div > .header > a.back-sidebar-button {
@ -200,7 +200,7 @@ body > #layout > div > .header > a.menu-button {
body > #layout > div > .header > a.menu-button {
display: inline;
}
body > #layout > div.menu span.button-inner {
body > #layout > div.menu span.inner {
display: block;
}
body > #layout > div.menu {

8
skins/elastic/templates/addressbook.html
Unescape Escape View File

@ -6,7 +6,7 @@
<!-- sources/groups list -->
<div id="sidebar" class="sidebar listbox" role="navigation" aria-labelledby="directorylist-header">
<div class="header">
<a class="button menu-button" href="#menu"><i class="content icon"></i></a>
<a class="button icon menu-button" href="#menu"><span class="inner"><roundcube:label name="menu" /></span></a>
<roundcube:label name="groups" />
</div>
<div class="scroller">
@ -24,8 +24,8 @@
<div id="list" class="list listbox selected" aria-labelledby="aria-label-contactslist">
<roundcube:object name="addresslisttitle" label="contacts" tag="h2" class="voice" id="aria-label-contactslist" />
<div class="header">
<a class="button menu-button" href="#menu"><i class="content icon"></i></a>
<a class="button back-sidebar-button" href="#sidebar"><i class="chevron left icon"></i></a>
<a class="button icon menu-button" href="#menu"><span class="inner"><roundcube:label name="menu" /></span></a>
<a class="button icon back-sidebar-button" href="#sidebar"><span class="inner"><roundcube:label name="groups" /></span></a>
<roundcube:object name="addresslisttitle" label="contacts" tag="span" />
<roundcube:object name="searchform" id="searchform" wrapper="searchbar toolbar"
label="contactsearchform" buttontitle="findcontacts" options="search-menu" ariatag="h2" />
@ -61,7 +61,7 @@
<!-- contact details frame -->
<div id="content" class="content" role="main">
<div class="header">
<a class="button back-list-button" href="#back"><i class="chevron left icon"></i><roundcube:label name="back" /></a>
<a class="button icon back-list-button" href="#back"><span class="inner"><roundcube:label name="back" /></span></a>
<!-- toolbar -->
<h2 id="aria-label-toolbar" class="voice"><roundcube:label name="arialabeltoolbar" /></h2>
<div id="addressbooktoolbar" class="toolbar" role="toolbar" aria-labelledby="aria-label-toolbar">

6
skins/elastic/templates/folders.html
Unescape Escape View File

@ -7,8 +7,8 @@
<!-- folders list -->
<div id="list" class="list listbox selected" aria-labelledby="aria-label-prefsection">
<div class="header">
<a class="button menu-button" href="#menu"><i class="content icon"></i></a>
<a class="button back-sidebar-button" href="#sidebar"><i class="chevron left icon"></i></a>
<a class="button icon menu-button" href="#menu"><span class="inner"><roundcube:label name="menu" /></span></a>
<a class="button icon back-sidebar-button" href="#sidebar"><span class="inner"><roundcube:label name="settings" /></span></a>
<roundcube:label name="folders" />
<roundcube:object name="searchform" id="foldersearch" wrapper="searchbar toolbar"
label="foldersearchform" buttontitle="findfolders" options="search-filter" ariatag="h2" />
@ -33,7 +33,7 @@
<!-- folder info frame -->
<div id="content" class="content" role="main">
<div class="header">
<a class="button back-list-button" href="#back"><i class="chevron left icon"></i><roundcube:label name="back" /></a>
<a class="button icon back-list-button" href="#back"><span class="inner"><roundcube:label name="back" /></span></a>
</div>
<roundcube:object name="folderframe" id="preferences-frame" src="/watermark.html" />
</div>

6
skins/elastic/templates/identities.html
Unescape Escape View File

@ -7,8 +7,8 @@
<!-- responses list -->
<div id="list" class="list listbox selected" aria-labelledby="aria-label-identitieslist">
<div id="aria-label-identitieslist" class="header">
<a class="button menu-button" href="#menu"><i class="content icon"></i></a>
<a class="button back-sidebar-button" href="#sidebar"><i class="chevron left icon"></i></a>
<a class="button icon menu-button" href="#menu"><span class="inner"><roundcube:label name="menu" /></span></a>
<a class="button icon back-sidebar-button" href="#sidebar"><span class="inner"><roundcube:label name="settings" /></span></a>
<roundcube:label name="identities" />
</div>
<div class="scroller">
@ -29,7 +29,7 @@
<!-- response details frame -->
<div id="content" class="content" role="main">
<div class="header">
<a class="button back-list-button" href="#back"><i class="chevron left icon"></i><roundcube:label name="back" /></a>
<a class="button icon back-list-button" href="#back"><span class="inner"><roundcube:label name="back" /></span></a>
</div>
<roundcube:object name="identityframe" id="preferences-frame" src="/watermark.html" title="arialabelidentityeditfrom" />
</div>

8
skins/elastic/templates/mail.html
Unescape Escape View File

@ -6,7 +6,7 @@
<!-- folders list -->
<div id="sidebar" class="sidebar listbox" role="navigation" aria-labelledby="aria-label-folderlist">
<div class="header">
<a class="button menu-button" href="#menu"><i class="content icon"></i></a>
<a class="button icon menu-button" href="#menu"><span class="inner"><roundcube:label name="menu" /></span></a>
<span class="username"><roundcube:object name="username" /></span>
</div>
<h2 id="aria-label-folderlist" class="voice"><roundcube:label name="arialabelfolderlist" /></h2>
@ -25,8 +25,8 @@
<!-- messages list -->
<div id="list" class="list listbox selected">
<div id="messagelist-header" class="header">
<a class="button menu-button" href="#menu"><i class="content icon"></i></a>
<a class="button back-sidebar-button" href="#sidebar"><i class="chevron left icon"></i></a>
<a class="button icon menu-button" href="#menu"><span class="inner"><roundcube:label name="menu" /></span></a>
<a class="button icon back-sidebar-button" href="#sidebar"><span class="inner"><roundcube:label name="mailboxlist" /></span></a>
<span id="folder-name"></span>
<div class="toolbar">
<roundcube:object name="listmenulink" class="button settings" innerclass="inner" />
@ -86,7 +86,7 @@
<!-- message preview -->
<div id="content" class="content">
<div class="header">
<a class="button back-list-button" href="#back"><i class="chevron left icon"></i><roundcube:label name="back" /></a>
<a class="button icon back-list-button" href="#back"><span class="inner"><roundcube:label name="back" /></span></a>
<roundcube:include file="/includes/mail-menu.html" />
</div>
<h2 id="aria-label-mailpreviewframe" class="voice"><roundcube:label name="arialabelmailpreviewframe" /></h2>

2
skins/elastic/templates/plugin.html
Unescape Escape View File

@ -6,7 +6,7 @@
<div id="content" class="content selected" role="main">
<div class="header">
<a class="button back-list-button" href="#back"><i class="chevron left icon"></i><roundcube:label name="back" /></a>
<a class="button icon back-list-button" href="#back"><span class="inner"><roundcube:label name="back" /></span></a>
</div>
<roundcube:object name="plugin.body" />
</div>

6
skins/elastic/templates/responses.html
Unescape Escape View File

@ -7,8 +7,8 @@
<!-- responses list -->
<div id="list" class="list listbox selected" aria-labelledby="aria-label-responseslist">
<div id="aria-label-responseslist" class="header">
<a class="button menu-button" href="#menu"><i class="content icon"></i></a>
<a class="button back-sidebar-button" href="#sidebar"><i class="chevron left icon"></i></a>
<a class="button icon menu-button" href="#menu"><span class="inner"><roundcube:label name="menu" /></span></a>
<a class="button icon back-sidebar-button" href="#sidebar"><span class="inner"><roundcube:label name="settings" /></span></a>
<roundcube:label name="responses" />
</div>
<div class="scroller">
@ -29,7 +29,7 @@
<!-- response details frame -->
<div id="content" class="content" role="main">
<div class="header">
<a class="button back-list-button" href="#back"><i class="chevron left icon"></i><roundcube:label name="back" /></a>
<a class="button icon back-list-button" href="#back"><span class="inner"><roundcube:label name="back" /></span></a>
</div>
<roundcube:object name="responseframe" id="preferences-frame" src="/watermark.html" title="arialabelresonseeditfrom" />
</div>

6
skins/elastic/templates/settings.html
Unescape Escape View File

@ -6,8 +6,8 @@
<div id="list" class="list listbox selected" aria-labelledby="aria-label-prefsection">
<div id="aria-label-prefsection" class="header">
<a class="button menu-button" href="#menu"><i class="content icon"></i></a>
<a class="button back-sidebar-button" href="#sidebar"><i class="chevron left icon"></i></a>
<a class="button icon menu-button" href="#menu"><span class="inner"><roundcube:label name="menu" /></span></a>
<a class="button icon back-sidebar-button" href="#sidebar"><span class="inner"><roundcube:label name="settings" /></span></a>
<roundcube:label name="preferences" />
</div>
<div class="scroller">
@ -17,7 +17,7 @@
<div id="content" class="content" role="main">
<div class="header">
<a class="button back-list-button" href="#back"><i class="chevron left icon"></i><roundcube:label name="back" /></a>
<a class="button icon back-list-button" href="#back"><span class="inner"><roundcube:label name="back" /></span></a>
</div>
<roundcube:object name="prefsframe" id="preferences-frame" src="/watermark.html" title="arialabelpreferencesform" />
</div>

5
skins/elastic/ui.js
Unescape Escape View File

@ -100,7 +100,7 @@ function rcube_elastic_ui()
$(this).addClass('ui styled fluid accordion');
fieldsets.each(function(i, fieldset) {
var title = $('<div>').attr('class', 'title' + (i ? '' : ' active'))
.html('<i class="dropdown icon"></i>')
.html('<i class="dropdown icon"></i>') // TODO: replace <i> with css
.append($('<span>').text($('legend', fieldset).text()));
var content = $('<div>').attr('class', 'content' + (i ? '' : ' active'))
.append($(fieldset).children().not('legend'));
@ -507,8 +507,7 @@ function rcube_elastic_ui()
// append the new toolbar and menu button
if (items.length) {
var menu_button = $('<a class="button toolbar-menu-button" href="#menu">')
.html('<i class="icon ellipsis vertical"></i>')
var menu_button = $('<a class="button icon toolbar-menu-button" href="#menu">')
.attr({'data-popup': 'toolbar-menu', 'data-popup-pos': 'bottom right'});
layout.content.children('.header')

Write Preview
Loading…
Cancel
Save