pk/atst
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add toggle to project items

Browse Source
This commit is contained in:
luis cielak 2018-08-23 15:27:14 -04:00 committed by luisgov
parent 965b5113fc
commit c9aaf69cc0
2 changed files with 78 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
styles/elements/_icon_link.scss
View File

@ -59,4 +59,8 @@
&.icon-link--danger { &.icon-link--danger {
@include icon-link-color($color-red, $color-red-lightest); @include icon-link-color($color-red, $color-red-lightest);
} }
&.icon-link--default {
@include icon-link-color($color-black-light, $color-gray-lightest);
}
} }

110
templates/member_edit.html
View File

@ -42,44 +42,82 @@
</div> </div>
</div> </div>
<div class='block-list project-list-item'> <div is="toggler" class='block-list project-list-item'>
<header class='block-list__header'> <template slot-scope='{ isVisible, toggle }'>
<h3 class='block-list__title'>{{ Icon('arrow-down') }}Code.mil</h3> <header class='block-list__header'>
<span><a href="#" class="icon-link icon-link--danger">revoke all access</a></span> <button v-on:click='toggle' class='icon-link icon-link--large icon-link--default spend-table__project__toggler'>
</header> <template v-if='isVisible'>{{ Icon('caret_down') }}</template>
<ul> <template v-else>{{ Icon('caret_right') }}</template>
<li class='block-list__item project-list-item__environment'> <h3 class="block-list__title">Code.mil</h3>
<span class='project-list-item__environment'> </button>
Development <span><a href="#" class="icon-link icon-link--danger">revoke all access</a></span>
</span> </header>
<div class='project-list-item__environment__actions'> <ul v-show='isVisible'>
<span class="label">no access </span><a href="#" class="icon-link">set role</a> <li class='block-list__item project-list-item__environment'>
</div> <span class='project-list-item__environment'>
</li> Development
<li class='block-list__item project-list-item__environment'> </span>
<span class='project-list-item__environment'> <div class='project-list-item__environment__actions'>
Sandbox <span class="label">no access </span><a href="#" class="icon-link">set role</a>
</span> </div>
<div class='project-list-item__environment__actions'> </li>
<span class="label">no access</span><a href="#" class="icon-link">set role</a> <li class='block-list__item project-list-item__environment'>
</div> <span class='project-list-item__environment'>
</li> Sandbox
<li class='block-list__item project-list-item__environment'> </span>
<span class='project-list-item__environment'> <div class='project-list-item__environment__actions'>
Production <span class="label">no access</span><a href="#" class="icon-link">set role</a>
</span> </div>
<div class='project-list-item__environment__actions'> </li>
<span class="label label--success">Billing</span><a href="#" class="icon-link">set role</a> <li class='block-list__item project-list-item__environment'>
</div> <span class='project-list-item__environment'>
</li> Production
</ul> </span>
<div class='project-list-item__environment__actions'>
<span class="label label--success">Billing</span><a href="#" class="icon-link">set role</a>
</div>
</li>
</ul>
</template>
</div> </div>
<div class='block-list project-list-item'> <div is="toggler" class='block-list project-list-item'>
<header class='block-list__header'> <template slot-scope='{ isVisible, toggle }'>
<h3 class='block-list__title'>{{ Icon('arrow-right') }} Digital Dojo</h3> <header class='block-list__header'>
<span class="label">no access</span> <button v-on:click='toggle' class='icon-link icon-link--large icon-link--default spend-table__project__toggler'>
</header> <template v-if='isVisible'>{{ Icon('caret_down') }}</template>
<template v-else>{{ Icon('caret_right') }}</template>
<h3 class="block-list__title">Digital Dojo</h3>
</button>
<span class="label">no access</span>
</header>
<ul v-show='isVisible'>
<li class='block-list__item project-list-item__environment'>
<span class='project-list-item__environment'>
Development
</span>
<div class='project-list-item__environment__actions'>
<span class="label">no access </span><a href="#" class="icon-link">set role</a>
</div>
</li>
<li class='block-list__item project-list-item__environment'>
<span class='project-list-item__environment'>
Sandbox
</span>
<div class='project-list-item__environment__actions'>
<span class="label">no access</span><a href="#" class="icon-link">set role</a>
</div>
</li>
<li class='block-list__item project-list-item__environment'>
<span class='project-list-item__environment'>
Production
</span>
<div class='project-list-item__environment__actions'>
<span class="label">no access</span><a href="#" class="icon-link">set role</a>
</div>
</li>
</ul>
</template>
</div> </div>
<div class='action-group'> <div class='action-group'>