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

Allow collapsing/expanding list of environments

Browse Source
This commit is contained in:
Patrick Smith 2019-02-07 18:45:25 -05:00
parent 9afa449bdf
commit 8c79eb3925
3 changed files with 48 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
static/icons/minus.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 196 B

7
styles/components/_portfolio_layout.scss
View File

@ -113,6 +113,13 @@
} }
.application-list { .application-list {
.toggle-link {
background-color: $color-blue-light;
.icon {
margin: $gap / 2;
}
}
.application-list-item { .application-list-item {
border-radius: 5px; border-radius: 5px;
box-shadow: 0 4px 8px 1px rgba(230,230,230,0.5), -4px 4px 8px 1px rgba(230,230,230,0.5); box-shadow: 0 4px 8px 1px rgba(230,230,230,0.5), -4px 4px 8px 1px rgba(230,230,230,0.5);

71
templates/portfolios/applications/index.html
View File

@ -34,42 +34,51 @@
<div class='application-list'> <div class='application-list'>
{% for application in portfolio.applications %} {% for application in portfolio.applications %}
<div v-cloak class='accordian application-list-item'> <div is='toggler' default-visible v-cloak class='accordian application-list-item'>
<header class='accordian__header row'> <template slot-scope='props'>
<div class='col col-grow'> <header class='accordian__header row'>
<h3 class='accordian__title'>{{ application.name }}</h3> <div class='col col-grow'>
<span class='accordian__description'>{{ application.description }}</span> <h3 class='accordian__title'>{{ application.name }}</h3>
<div class='accordian__actions'> <span class='accordian__description'>{{ application.description }}</span>
{% if user_can(permissions.RENAME_APPLICATION_IN_PORTFOLIO) %} <div class='accordian__actions'>
<a class='icon-link' href='{{ url_for("portfolios.edit_application", portfolio_id=portfolio.id, application_id=application.id) }}'> {% if user_can(permissions.RENAME_APPLICATION_IN_PORTFOLIO) %}
<span>App Settings</span> <a class='icon-link' href='{{ url_for("portfolios.edit_application", portfolio_id=portfolio.id, application_id=application.id) }}'>
<span>App Settings</span>
</a>
<div class='separator'></div>
{% endif %}
<a class='icon-link' href='{{ url_for("portfolios.portfolio_members", portfolio_id=portfolio.id) }}'>
<span>Team</span>
<span class='counter'>{{ application.num_users }}</span>
</a> </a>
<div class='separator'></div> </div>
{% endif %} </div>
<a class='icon-link' href='{{ url_for("portfolios.portfolio_members", portfolio_id=portfolio.id) }}'> <div class='col'>
<span>Team</span> <a v-on:click="props.toggle" href='#' class='icon-link toggle-link'>
<span class='counter'>{{ application.num_users }}</span> <template v-if="props.isVisible">
{{ Icon('minus') }}
</template>
<template v-else>
{{ Icon('plus') }}
</template>
</a> </a>
</div> </div>
</div> </header>
<div class='col'> <ul v-if="props.isVisible">
<a href='#' class='icon-link'>{{ Icon('plus') }}</a> {% for environment in application.environments %}
</div> <li class='accordian__item application-list-item__environment'>
</header> <div class='application-list-item__environment__name'>
<ul> <span>{{ environment.name }}</span>
{% for environment in application.environments %} </div>
<li class='accordian__item application-list-item__environment'>
<div class='application-list-item__environment__name'>
<span>{{ environment.name }}</span>
</div>
<a href='{{ url_for("portfolios.access_environment", portfolio_id=portfolio.id, environment_id=environment.id)}}' target='_blank' rel='noopener noreferrer' class='application-list-item__environment__csp_link icon-link'> <a href='{{ url_for("portfolios.access_environment", portfolio_id=portfolio.id, environment_id=environment.id)}}' target='_blank' rel='noopener noreferrer' class='application-list-item__environment__csp_link icon-link'>
<span>CSP Console</span> <span>CSP Console</span>
</a> </a>
</li> </li>
{% endfor %} {% endfor %}
</ul> </ul>
</template>
</div> </div>
{% endfor %} {% endfor %}
</div> </div>