input tag design/js for list inputs

pull/168/head^2
Hunter Long 2019-04-19 21:43:07 -07:00
parent 6744ca3003
commit babe0c791c
7 changed files with 89 additions and 2 deletions

View File

@ -125,6 +125,43 @@ HTML, BODY {
height: 300px;
width: 100%; }
.inputTags-field {
border: 0;
background-color: transparent;
padding-top: .13rem; }
input.inputTags-field:focus {
outline-width: 0; }
.inputTags-list {
display: block;
width: 100%;
min-height: calc(2.25rem + 2px);
padding: .2rem .35rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: .25rem;
transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; }
.inputTags-item {
background-color: #3aba39;
margin-right: 5px;
padding: 5px 8px;
font-size: 10pt;
color: white;
border-radius: 4px; }
.inputTags-item .close-item {
margin-left: 6px;
font-size: 13pt;
font-weight: bold;
cursor: pointer; }
.btn-primary {
background-color: #3e9bff;
border-color: #006fe6;

1
source/js/inputTags.min.js vendored Executable file

File diff suppressed because one or more lines are too long

View File

@ -151,6 +151,48 @@ HTML,BODY {
width: 100%;
}
.inputTags-field {
border: 0;
background-color: transparent;
padding-top: .13rem;
}
input.inputTags-field:focus {
outline-width: 0;
}
.inputTags-list {
display: block;
width: 100%;
min-height: calc(2.25rem + 2px);
padding: .2rem .35rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: .25rem;
transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.inputTags-item {
background-color: #3aba39;
margin-right: 5px;
padding: 5px 8px;
font-size: 10pt;
color: white;
border-radius: 4px;
}
.inputTags-item .close-item {
margin-left: 6px;
font-size: 13pt;
font-weight: bold;
cursor: pointer;
}
@mixin dynamic-color-hov($color) {
&.dyn-dark {
background-color: darken($color, 12%) !important;

View File

@ -56,7 +56,7 @@
<div class="form-group row{{if (eq .Type "tcp") or (eq .Type "udp")}} d-none{{end}}">
<label for="headers" class="col-sm-4 col-form-label">HTTP Headers</label>
<div class="col-sm-8">
<input name="headers" class="form-control" id="headers" autocapitalize="none" spellcheck="false" placeholder='Authorization=1010101,Content-Type=application/json' value="{{.Headers.String}}">
<input name="headers" class="input-tags form-control" id="headers" autocapitalize="none" spellcheck="false" placeholder='Authorization=1010101,Content-Type=application/json' value="{{.Headers.String}}">
<small class="form-text text-muted">Comma delimited list of HTTP Headers (KEY=VALUE,KEY=VALUE)</small>
</div>
</div>

View File

@ -205,8 +205,11 @@
{{$s := .Service}}
<script src="/js/flatpickr.js"></script>
<script src="/js/rangePlugin.js"></script>
<script src="/js/inputTags.min.js"></script>
<script>
$(".input-tags").inputTags();
let options = {
chart: {
height: "100%",
@ -310,6 +313,7 @@ async function RenderChartLatency() {
}
$(document).ready(async function() {
let startDate = $("#service_start").flatpickr({
enableTime: false,
static: true,

View File

@ -81,7 +81,10 @@
{{ else }}
<script src="/js/sortable.min.js"></script>
{{end}}
<script src="/js/inputTags.min.js"></script>
<script>
$(".input-tags").inputTags();
sortable('.sortable', {
forcePlaceholderSize: true,
hoverClass: 'sortable_drag',

View File

@ -1,6 +1,6 @@
// Code generated by go generate; DO NOT EDIT.
// This file was generated by robots at
// 2019-04-19 11:45:38.037927 -0700 PDT m=+0.539240775
// 2019-04-19 21:42:16.46651 -0700 PDT m=+0.559109073
//
// This contains the most recently Markdown source for the Statping Wiki.
package source