mirror of https://github.com/moparisthebest/mail
[WO-629] List folders in navigation, switch back and forth
This commit is contained in:
Tankred Hase
parent
0bf68a0385
commit
a65435a771
113
src/tpl/nav.html
113
src/tpl/nav.html
|
|
@ -3,83 +3,69 @@
|
|||
<div class="nav__write">
|
||||
<button class="btn" wo-touch="state.writer.write(); $event.stopPropagation()">Write</button>
|
||||
</div>
|
||||
|
||||
<ul class="nav__folders">
|
||||
<li class="nav__folder nav__folder--open">
|
||||
<a href="javascript:;">
|
||||
<svg role="presentation"><use xlink:href="#icon-inbox" /></svg> Inbox
|
||||
<span class="nav__counter">99+</span>
|
||||
<li ng-repeat="folder in account.folders" ng-if="folder.wellknown" class="nav__folder" ng-class="{'nav__folder--open': state.nav.currentFolder === folder}">
|
||||
<a href="javascript:;" wo-touch="openFolder(folder)">
|
||||
<svg role="presentation">
|
||||
<use ng-if="folder.type === 'Inbox'" xlink:href="#icon-inbox" />
|
||||
<use ng-if="folder.type === 'Sent'" xlink:href="#icon-sent" />
|
||||
<use ng-if="folder.type === 'Outbox'" xlink:href="#icon-inbox" />
|
||||
<use ng-if="folder.type === 'Drafts'" xlink:href="#icon-draft" />
|
||||
<use ng-if="folder.type === 'Trash'" xlink:href="#icon-trash" />
|
||||
<use ng-if="folder.type === 'Flagged'" xlink:href="#icon-star" />
|
||||
</svg>
|
||||
{{folder.type}}
|
||||
<span ng-show="folder.count > 0" class="nav__counter">{{folder.count}}</span>
|
||||
</a>
|
||||
<button class="btn-icon-very-light">
|
||||
<!--<button class="btn-icon-very-light">
|
||||
<svg><use xlink:href="#icon-dropdown" /><title>More</title></svg>
|
||||
</button>
|
||||
</button>-->
|
||||
</li>
|
||||
<li class="nav__folder">
|
||||
<a href="javascript:;">
|
||||
<svg role="presentation"><use xlink:href="#icon-sent" /></svg> Sent
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav__folder">
|
||||
<a href="javascript:;">
|
||||
<svg role="presentation"><use xlink:href="#icon-draft" /></svg> Drafts
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav__folder">
|
||||
<a href="javascript:;">
|
||||
<svg role="presentation"><use xlink:href="#icon-trash" /></svg> Trash
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav__folder">
|
||||
<a href="javascript:;">
|
||||
<svg role="presentation"><use xlink:href="#icon-star" /></svg> Markiert
|
||||
<span class="nav__counter">1</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</ul><!--/nav__folders-->
|
||||
|
||||
<ul class="nav__folders">
|
||||
<li class="nav__folder">
|
||||
<a href="javascript:;">
|
||||
<svg role="presentation"><use xlink:href="#icon-folder" /></svg> Extra long folder name
|
||||
<li ng-repeat="folder in account.folders" ng-if="!folder.wellknown" class="nav__folder" ng-class="{'nav__folder--open': state.nav.currentFolder === folder}">
|
||||
<a href="javascript:;" wo-touch="openFolder(folder)">
|
||||
<svg role="presentation"><use xlink:href="#icon-folder" /></svg>
|
||||
{{folder.name}}
|
||||
<span ng-show="folder.count > 0" class="nav__counter">{{folder.count}}</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav__folder">
|
||||
<a href="javascript:;">
|
||||
<svg role="presentation"><use xlink:href="#icon-folder" /></svg> Travel
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav__folder">
|
||||
<a href="javascript:;">
|
||||
<svg role="presentation"><use xlink:href="#icon-folder" /></svg> Bank
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</ul><!--/nav__folders-->
|
||||
|
||||
<ul class="nav__secondary">
|
||||
<li>
|
||||
<a href="javascript:;" wo-touch="state.account.toggle(true); $event.preventDefault()">
|
||||
<a href="javascript:;" wo-touch="state.account.toggle(true)">
|
||||
<svg role="presentation"><use xlink:href="#icon-account" /></svg> Account
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="javascript:;" wo-touch="state.contacts.toggle(true); $event.preventDefault()">
|
||||
<a href="javascript:;" wo-touch="state.contacts.toggle(true)">
|
||||
<svg role="presentation"><use xlink:href="#icon-contact" /></svg> Contacts
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="javascript:;" wo-touch="state.privateKeyUpload.toggle(true); $event.preventDefault()">
|
||||
<a href="javascript:;" wo-touch="state.privateKeyUpload.toggle(true)">
|
||||
<svg role="presentation"><use xlink:href="#icon-key" /></svg> Key sync (experimental)
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="javascript:;" wo-touch="state.writer.reportBug(); $event.preventDefault()">
|
||||
<a href="javascript:;" wo-touch="state.writer.reportBug()">
|
||||
<svg role="presentation"><use xlink:href="#icon-bug" /></svg> Report a bug
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="javascript:;" wo-touch="state.about.toggle(true); $event.preventDefault()">
|
||||
<a href="javascript:;" wo-touch="state.about.toggle(true)">
|
||||
<svg role="presentation"><use xlink:href="#icon-about" /></svg> About
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<li>
|
||||
<a href="javascript:;" wo-touch="logout()">
|
||||
<svg role="presentation"><use xlink:href="#icon-account" /></svg> Logout
|
||||
</a>
|
||||
</li>
|
||||
</ul><!--/nav__secondary-->
|
||||
|
||||
<footer ng-class="{syncing: account.loggingIn || account.busy || searching}">
|
||||
<span class="spinner"></span>
|
||||
|
|
@ -90,33 +76,4 @@
|
|||
{{lastUpdateLbl}} {{lastUpdate | date:'shortTime'}}
|
||||
</span>
|
||||
</footer>
|
||||
</nav>
|
||||
|
||||
<!--<div class="nav">
|
||||
<header>
|
||||
<h1>WHITEOUT<span>.IO</span></h1>
|
||||
</header>
|
||||
|
||||
<ul class="nav-primary">
|
||||
<li ng-repeat="folder in account.folders" ng-switch="folder.count !== undefined && folder.count > 0">
|
||||
<a href="#" wo-touch="openFolder(folder); $event.preventDefault()">
|
||||
{{folder.type}}
|
||||
<span class="label-wrapper" ng-switch-when="true">
|
||||
<span class="label label-light">{{folder.count}}</span>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="nav-secondary">
|
||||
<li><a href="#" wo-touch="state.account.toggle(true); $event.preventDefault()">Account</a></li>
|
||||
<li><a href="#" wo-touch="state.contacts.toggle(true); $event.preventDefault()">Contacts</a></li>
|
||||
<li><a href="#" wo-touch="state.privateKeyUpload.toggle(true); $event.preventDefault()">Key sync (experimental)</a></li>
|
||||
<li><a href="#" wo-touch="state.writer.reportBug(); $event.preventDefault()">Report a bug</a></li>
|
||||
<li><a href="#" wo-touch="state.about.toggle(true); $event.preventDefault()">About</a></li>
|
||||
</ul>
|
||||
|
||||
<footer>
|
||||
{{lastUpdateLbl}} {{lastUpdate | date:'shortTime'}}
|
||||
</footer>
|
||||
</div>-->
|
||||
</nav>
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
<div class="content">
|
||||
<header>
|
||||
<h1>WHITEOUT<span>.IO</span></h1>
|
||||
</header>
|
||||
|
||||
<ul class="nav-primary">
|
||||
<li ng-repeat="folder in account.folders" ng-switch="folder.count !== undefined && folder.count > 0">
|
||||
<a href="#" wo-touch="openFolder(folder); $event.preventDefault()">
|
||||
{{folder.wellknown? folder.type : folder.name}}
|
||||
<span class="label-wrapper" ng-switch-when="true">
|
||||
<span class="label label-light">{{folder.count}}</span>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="nav-secondary">
|
||||
<li><a href="#" wo-touch="state.account.toggle(true); $event.preventDefault()">Account</a></li>
|
||||
<li><a href="#" wo-touch="state.contacts.toggle(true); $event.preventDefault()">Contacts</a></li>
|
||||
<li><a href="#" wo-touch="state.privateKeyUpload.toggle(true); $event.preventDefault()">Key sync (experimental)</a></li>
|
||||
<li><a href="#" wo-touch="state.writer.reportBug(); $event.preventDefault()">Report a bug</a></li>
|
||||
<li><a href="#" wo-touch="state.about.toggle(true); $event.preventDefault()">About</a></li>
|
||||
<li><a href="#" wo-touch="logout(); $event.preventDefault()">Logout</a></li>
|
||||
</ul>
|
||||
|
||||
<footer>
|
||||
{{lastUpdateLbl}} {{lastUpdate | date:'shortTime'}}
|
||||
</footer>
|
||||
</div>
|
||||
Loading…
Reference in New Issue