taiga
/
taiga-front
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Merge pull request #1033 from taigaio/issue/4178/webhooks-table 

Fix admin webhooks table
stable
David Barragán Merino 2016-06-02 14:14:09 +02:00
parent ce2fa41d7d c609825077
commit e868557f8a
3 changed files with 91 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

131
app/partials/admin/admin-third-parties-webhooks.jade
View File

@ -1,7 +1,9 @@
doctype html doctype html
div.wrapper.roles(ng-controller="WebhooksController as ctrl", div.wrapper.roles(
ng-init="section='admin'") ng-controller="WebhooksController as ctrl",
ng-init="section='admin'"
)
tg-project-menu tg-project-menu
sidebar.menu-secondary.sidebar.settings-nav(tg-admin-navigation="third-parties") sidebar.menu-secondary.sidebar.settings-nav(tg-admin-navigation="third-parties")
@ -10,25 +12,27 @@ div.wrapper.roles(ng-controller="WebhooksController as ctrl",
include ../includes/modules/admin-submenu-third-parties include ../includes/modules/admin-submenu-third-parties
section.main.admin-common.admin-webhooks(tg-new-webhook) section.main.admin-common.admin-webhooks(tg-new-webhook)
include ../includes/components/mainTitle header.header-with-actions
include ../includes/components/mainTitle
p.admin-subtitle(translate="ADMIN.WEBHOOKS.SUBTITLE") .action-buttons
div.webhooks-options a.button-green.hidden.add-webhook(
a.button-green.hidden.add-webhook( href=""
href="" title="{{'ADMIN.WEBHOOKS.ADD_NEW' | translate}}"
title="{{'ADMIN.WEBHOOKS.ADD_NEW' | translate}}" translate="ADMIN.WEBHOOKS.ADD_NEW"
translate="ADMIN.WEBHOOKS.ADD_NEW" )
)
section.webhooks-table.basic-table section.webhooks-table.basic-table
div.table-header .table-header
div.row .row
div.webhook-service(translate="COMMON.FIELDS.NAME") .webhook-service(translate="COMMON.FIELDS.NAME")
div.webhook-url(translate="COMMON.FIELDS.URL") .webhook-url(translate="COMMON.FIELDS.URL")
div.webhook-options .webhook-options
div.table-body .table-body
div.single-webhook-wrapper(tg-webhook="webhook", ng-repeat="webhook in webhooks") .single-webhook-wrapper(
div.edition-mode.hidden tg-webhook="webhook"
ng-repeat="webhook in webhooks"
)
.edition-mode.hidden
form.row form.row
fieldset.webhook-service fieldset.webhook-service
input( input(
@ -37,9 +41,9 @@ div.wrapper.roles(ng-controller="WebhooksController as ctrl",
data-required="true" data-required="true"
ng-model="webhook.name" ng-model="webhook.name"
placeholder="{{'ADMIN.WEBHOOKS.TYPE_NAME' | translate}}" placeholder="{{'ADMIN.WEBHOOKS.TYPE_NAME' | translate}}"
) )
div.webhook-url .webhook-url
div.webhook-url-inputs .webhook-url-inputs
fieldset fieldset
input( input(
type="text" type="text"
@ -57,7 +61,7 @@ div.wrapper.roles(ng-controller="WebhooksController as ctrl",
data-required="true" data-required="true"
ng-model="webhook.key" ng-model="webhook.key"
) )
div.webhook-options .webhook-options
a.edit-existing( a.edit-existing(
href="" href=""
title="{{'ADMIN.WEBHOOKS.SAVE' | translate}}" title="{{'ADMIN.WEBHOOKS.SAVE' | translate}}"
@ -69,11 +73,10 @@ div.wrapper.roles(ng-controller="WebhooksController as ctrl",
) )
tg-svg(svg-icon="icon-close") tg-svg(svg-icon="icon-close")
div.visualization-mode .visualization-mode
div.row .row
div.webhook-service .webhook-service(ng-bind="webhook.name")
span(ng-bind="webhook.name") .webhook-url
div.webhook-url
span(ng-bind="webhook.url") span(ng-bind="webhook.url")
a.show-history.toggle-history( a.show-history.toggle-history(
href="" href=""
@ -82,18 +85,27 @@ div.wrapper.roles(ng-controller="WebhooksController as ctrl",
translate="ADMIN.WEBHOOKS.SHOW_HISTORY" translate="ADMIN.WEBHOOKS.SHOW_HISTORY"
) )
div.webhook-options .webhook-options
div.webhook-options-wrapper .webhook-options-wrapper
a.test-webhook(href="", title="{{'ADMIN.WEBHOOKS.TEST' | translate}}") a.test-webhook(
href=""
title="{{'ADMIN.WEBHOOKS.TEST' | translate}}"
)
tg-svg(svg-icon="icon-check-empty") tg-svg(svg-icon="icon-check-empty")
a.edit-webhook(href="", title="{{'ADMIN.WEBHOOKS.EDIT' | translate}}") a.edit-webhook(
href=""
title="{{'ADMIN.WEBHOOKS.EDIT' | translate}}"
)
tg-svg(svg-icon="icon-edit") tg-svg(svg-icon="icon-edit")
a.delete-webhook(href="", title="{{'ADMIN.WEBHOOKS.DELETE' | translate}}") a.delete-webhook(
href=""
title="{{'ADMIN.WEBHOOKS.DELETE' | translate}}"
)
tg-svg(svg-icon="icon-trash") tg-svg(svg-icon="icon-trash")
div.webhooks-history .webhooks-history
div.history-single-wrapper(ng-repeat="log in webhook.logs") .history-single-wrapper(ng-repeat="log in webhook.logs")
div.history-single .history-single
div div
span.history-response-icon( span.history-response-icon(
ng-class="log.validStatus ? 'history-success' : 'history-error'" ng-class="log.validStatus ? 'history-success' : 'history-error'"
@ -103,8 +115,8 @@ div.wrapper.roles(ng-controller="WebhooksController as ctrl",
a.toggle-log(href="") a.toggle-log(href="")
tg-svg(svg-icon="icon-arrow-down") tg-svg(svg-icon="icon-arrow-down")
div.history-single-response .history-single-response
div.history-single-request-header .history-single-request-header
span(translate="ADMIN.WEBHOOKS.REQUEST") span(translate="ADMIN.WEBHOOKS.REQUEST")
a.resend-request( a.resend-request(
href="" href=""
@ -113,20 +125,29 @@ div.wrapper.roles(ng-controller="WebhooksController as ctrl",
) )
tg-svg(svg-icon="icon-reload") tg-svg(svg-icon="icon-reload")
span(translate="ADMIN.WEBHOOKS.RESEND_REQUEST") span(translate="ADMIN.WEBHOOKS.RESEND_REQUEST")
div.history-single-request-body .history-single-request-body
div.response-container .response-container
span.response-title(translate="ADMIN.WEBHOOKS.HEADERS") span.response-title(translate="ADMIN.WEBHOOKS.HEADERS")
textarea(name="headers", ng-bind="log.prettySentHeaders") textarea(
name="headers"
ng-bind="log.prettySentHeaders"
)
div.response-container .response-container
span.response-title(translate="ADMIN.WEBHOOKS.PAYLOAD") span.response-title(translate="ADMIN.WEBHOOKS.PAYLOAD")
textarea(name="payload", ng-bind="log.prettySentData") textarea(
name="payload"
ng-bind="log.prettySentData"
)
div.history-single-response-header .history-single-response-header
span(translate="ADMIN.WEBHOOKS.RESPONSE") span(translate="ADMIN.WEBHOOKS.RESPONSE")
div.history-single-response-body .history-single-response-body
div.response-container .response-container
textarea(name="response-data", ng-bind="log.response_data") textarea(
name="response-data"
ng-bind="log.response_data"
)
form.new-webhook-form.row.hidden form.new-webhook-form.row.hidden
fieldset.webhook-service fieldset.webhook-service
@ -137,8 +158,8 @@ div.wrapper.roles(ng-controller="WebhooksController as ctrl",
ng-model="newValue.name" ng-model="newValue.name"
placeholder="{{'ADMIN.WEBHOOKS.TYPE_NAME' | translate}}" placeholder="{{'ADMIN.WEBHOOKS.TYPE_NAME' | translate}}"
) )
div.webhook-url .webhook-url
div.webhook-url-inputs .webhook-url-inputs
fieldset fieldset
input( input(
type="text" type="text"
@ -156,10 +177,16 @@ div.wrapper.roles(ng-controller="WebhooksController as ctrl",
data-required="true" data-required="true"
ng-model="newValue.key" ng-model="newValue.key"
) )
div.webhook-options .webhook-options
a.add-new(href="", title="{{'ADMIN.WEBHOOKS.SAVE' | translate}}") a.add-new(
href=""
title="{{'ADMIN.WEBHOOKS.SAVE' | translate}}"
)
tg-svg(svg-icon="icon-save") tg-svg(svg-icon="icon-save")
a.cancel-new(href="", title="{{'ADMIN.WEBHOOKS.CANCEL' | translate}}") a.cancel-new(
href=""
title="{{'ADMIN.WEBHOOKS.CANCEL' | translate}}"
)
tg-svg(svg-icon="icon-close") tg-svg(svg-icon="icon-close")
a.help-button( a.help-button(

2
app/styles/components/editor-help.scss
View File

@ -16,6 +16,7 @@
.help-markdown, .help-markdown,
.help-button { .help-button {
@include font-size(xsmall);
&:hover { &:hover {
span { span {
transition: color .2s linear; transition: color .2s linear;
@ -29,6 +30,7 @@
vertical-align: text-top; vertical-align: text-top;
} }
.icon { .icon {
@include svg-size(.9rem);
fill: $gray-light; fill: $gray-light;
margin-right: .2rem; margin-right: .2rem;
} }

14
app/styles/modules/admin/admin-third-parties-webhooks.scss
View File

@ -31,20 +31,24 @@
} }
.webhook-service { .webhook-service {
flex-basis: 20%; flex-basis: 20%;
flex-grow: 0; flex-shrink: 0;
} }
.webhook-url { .webhook-url {
flex-basis: 400px; flex-basis: 60%;
flex-grow: 8; flex-grow: 0;
flex-shrink: 0;
overflow: hidden;
span { span {
@include ellipsis($width: 65%); @include ellipsis(85%);
color: $gray-light; color: $gray-light;
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
} }
a { a {
color: $primary; color: $primary;
cursor: pointer;
margin-left: .5rem; margin-left: .5rem;
white-space: nowrap;
&:hover { &:hover {
color: $primary-light; color: $primary-light;
} }
@ -54,7 +58,9 @@
flex-basis: 100px; flex-basis: 100px;
flex-grow: 0; flex-grow: 0;
flex-shrink: 0; flex-shrink: 0;
margin-left: auto;
a { a {
cursor: pointer;
display: inline-block; display: inline-block;
margin-right: .5rem; margin-right: .5rem;
} }