*: add tabs icons

This commit is contained in:
Simone Gotti 2019-05-06 13:43:15 +02:00
parent 1d6472811d
commit 62c7881f2f
4 changed files with 75 additions and 15 deletions

View File

@ -13,7 +13,12 @@
<div class="tabs"> <div class="tabs">
<ul> <ul>
<li :class="[{ 'is-active': $route.name === 'org projects' || $route.name === 'org' }]"> <li :class="[{ 'is-active': $route.name === 'org projects' || $route.name === 'org' }]">
<router-link :to="ownerProjectsLink('org', orgname)">Projects</router-link> <router-link :to="ownerProjectsLink('org', orgname)">
<span class="icon is-small">
<i class="mdi mdi-home"/>
</span>
<span>Projects</span>
</router-link>
</li> </li>
</ul> </ul>
</div> </div>

View File

@ -3,19 +3,48 @@
<projbreadcrumbs :ownertype="ownertype" :ownername="ownername" :projectref="projectref"/> <projbreadcrumbs :ownertype="ownertype" :ownername="ownername" :projectref="projectref"/>
<div class="tabs"> <div class="tabs">
<ul> <ul>
<li>
<span class="icon is-small">
<i class="mdi mdi-run-fast"/>
</span>
<span>Runs</span>
</li>
<li>
<tabarrow/>
</li>
<li <li
:class="[{ 'is-active': $route.name.match('project runs') || $route.name.endsWith('project') }]" :class="[{ 'is-active': $route.name.match('project runs') || $route.name.endsWith('project') }]"
> >
<router-link :to="projectRunsLink(ownertype, ownername, projectref)">Runs History</router-link> <router-link :to="projectRunsLink(ownertype, ownername, projectref)">
<span class="icon is-small">
<i class="mdi mdi-asterisk"/>
</span>
<span>All</span>
</router-link>
</li> </li>
<li :class="[{ 'is-active': $route.name.match('project branches runs') }]"> <li :class="[{ 'is-active': $route.name.match('project branches runs') }]">
<router-link :to="projectBranchesRunsLink(ownertype, ownername, projectref)">Branches</router-link> <router-link :to="projectBranchesRunsLink(ownertype, ownername, projectref)">
<span class="icon is-small">
<i class="mdi mdi-source-branch"/>
</span>
<span>Branches</span>
</router-link>
</li> </li>
<li :class="[{ 'is-active': $route.name.match('project tags runs') }]"> <li :class="[{ 'is-active': $route.name.match('project tags runs') }]">
<router-link :to="projectTagsRunsLink(ownertype, ownername, projectref)">Tags</router-link> <router-link :to="projectTagsRunsLink(ownertype, ownername, projectref)">
<span class="icon is-small">
<i class="mdi mdi-tag"/>
</span>
<span>Tags</span>
</router-link>
</li> </li>
<li :class="[{ 'is-active': $route.name.match('project pull requests runs') }]"> <li :class="[{ 'is-active': $route.name.match('project pull requests runs') }]">
<router-link :to="projectPRsRunsLink(ownertype, ownername, projectref)">Pull Requests</router-link> <router-link :to="projectPRsRunsLink(ownertype, ownername, projectref)">
<span class="icon is-small">
<i class="mdi mdi-source-pull"/>
</span>
<span>Pull Requests</span>
</router-link>
</li> </li>
<li <li
v-if="$route.name.endsWith('project run') || $route.name.endsWith('project run task')" v-if="$route.name.endsWith('project run') || $route.name.endsWith('project run task')"
@ -53,7 +82,12 @@
</ul> </ul>
<ul class="is-right"> <ul class="is-right">
<li :class="[{ 'is-active': $route.name.endsWith('project settings') }]"> <li :class="[{ 'is-active': $route.name.endsWith('project settings') }]">
<router-link :to="projectSettingsLink(ownertype, ownername, projectref)">Project Settings</router-link> <router-link :to="projectSettingsLink(ownertype, ownername, projectref)">
<span class="icon is-small">
<i class="mdi mdi-settings"/>
</span>
<span>Project Settings</span>
</router-link>
</li> </li>
</ul> </ul>
</div> </div>

View File

@ -11,16 +11,22 @@
<li <li
:class="[{ 'is-active': $route.name.match('project group project') || $route.name.endsWith('project group') }]" :class="[{ 'is-active': $route.name.match('project group project') || $route.name.endsWith('project group') }]"
> >
<router-link <router-link :to="projectGroupProjectsLink(ownertype, ownername, projectgroupref)">
:to="projectGroupProjectsLink(ownertype, ownername, projectgroupref)" <span class="icon is-small">
>Projects</router-link> <i class="mdi mdi-home"/>
</span>
<span>Projects</span>
</router-link>
</li> </li>
</ul> </ul>
<ul class="is-right"> <ul class="is-right">
<li :class="[{ 'is-active': $route.name.endsWith('project group settings') }]"> <li :class="[{ 'is-active': $route.name.endsWith('project group settings') }]">
<router-link <router-link :to="projectGroupSettingsLink(ownertype, ownername, projectgroupref)">
:to="projectGroupSettingsLink(ownertype, ownername, projectgroupref)" <span class="icon is-small">
>Project Group Settings</router-link> <i class="mdi mdi-settings"/>
</span>
<span>Project Group Settings</span>
</router-link>
</li> </li>
</ul> </ul>
</div> </div>

View File

@ -13,10 +13,20 @@
<div class="tabs"> <div class="tabs">
<ul> <ul>
<li :class="[{ 'is-active': $route.name === 'user projects' || $route.name === 'user' }]"> <li :class="[{ 'is-active': $route.name === 'user projects' || $route.name === 'user' }]">
<router-link :to="ownerProjectsLink('user', username)">Projects</router-link> <router-link :to="ownerProjectsLink('user', username)">
<span class="icon is-small">
<i class="mdi mdi-home"/>
</span>
<span>Projects</span>
</router-link>
</li> </li>
<li :class="[{ 'is-active': $route.name === 'user local runs' }]"> <li :class="[{ 'is-active': $route.name === 'user local runs' }]">
<router-link :to="userLocalRunsLink(username)">Local Runs</router-link> <router-link :to="userLocalRunsLink(username)">
<span class="icon is-small">
<i class="mdi mdi-run-fast"/>
</span>
<span>Local Runs</span>
</router-link>
</li> </li>
<li <li
v-if="$route.name === 'user local run' || $route.name == 'user local run task'" v-if="$route.name === 'user local run' || $route.name == 'user local run task'"
@ -54,7 +64,12 @@
</ul> </ul>
<ul class="is-right"> <ul class="is-right">
<li :class="[{ 'is-active': $route.name.endsWith('user settings') }]"> <li :class="[{ 'is-active': $route.name.endsWith('user settings') }]">
<router-link :to="userSettingsLink(username)">User Settings</router-link> <router-link :to="userSettingsLink(username)">
<span class="icon is-small">
<i class="mdi mdi-settings"/>
</span>
<span>User Settings</span>
</router-link>
</li> </li>
</ul> </ul>
</div> </div>