recipientList WIP
This commit is contained in:
Felix Niklas
parent
0797cf00de
commit
e07f703667
2 changed files with 207 additions and 4 deletions
|
|
@ -25,6 +25,134 @@
|
||||||
|
|
||||||
<form role="form" class="ticket-create">
|
<form role="form" class="ticket-create">
|
||||||
<input type="hidden" name="formSenderType"/>
|
<input type="hidden" name="formSenderType"/>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="customer_id">Customer</label>
|
||||||
|
<div class="recipientList dropdown">
|
||||||
|
<div class="dropdown-toggle u-positionOrigin" data-toggle="dropdown">
|
||||||
|
<input id="customer_id" name="customer_id_autocompletion" class="ui-autocomplete-input form-control" autocapitalize="off" placeholder="Enter Person or Organisation/Company" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
|
||||||
|
<span class="caret"></span>
|
||||||
|
</div>
|
||||||
|
<div class="dropdown-menu" aria-labelledby="customer_id">
|
||||||
|
<ul role="menu">
|
||||||
|
<li class="recipientList-entry u-clickable horizontal center">
|
||||||
|
<label class="checkbox-replacement centered">
|
||||||
|
<input type="checkbox" value="" name="select"/>
|
||||||
|
<span class="checkbox icon"></span>
|
||||||
|
</label>
|
||||||
|
<div class="recipientList-icon centered">
|
||||||
|
<div class="white organisation icon"></div>
|
||||||
|
</div>
|
||||||
|
<div class="recipientList-name flex u-textTruncat">
|
||||||
|
Albrecht & Bertschler GmbH
|
||||||
|
<span class="recipientList-detail">- 4 Personen</span>
|
||||||
|
</div>
|
||||||
|
<li class="recipientList-entry u-clickable horizontal center">
|
||||||
|
<label class="checkbox-replacement centered">
|
||||||
|
<input type="checkbox" value="" name="select"/>
|
||||||
|
<span class="checkbox icon"></span>
|
||||||
|
</label>
|
||||||
|
<div class="recipientList-icon centered">
|
||||||
|
<div class="white organisation icon"></div>
|
||||||
|
</div>
|
||||||
|
<div class="recipientList-name flex u-textTruncat">
|
||||||
|
BENCHMARK human resources
|
||||||
|
<span class="recipientList-detail">- 2 Personen</span>
|
||||||
|
</div>
|
||||||
|
<li class="recipientList-entry u-clickable horizontal center">
|
||||||
|
<label class="checkbox-replacement centered">
|
||||||
|
<input type="checkbox" value="" name="select"/>
|
||||||
|
<span class="checkbox icon"></span>
|
||||||
|
</label>
|
||||||
|
<div class="recipientList-icon centered">
|
||||||
|
<div class="white user icon"></div>
|
||||||
|
</div>
|
||||||
|
<div class="recipientList-name flex u-textTruncat">
|
||||||
|
Belinda Matt
|
||||||
|
<span class="recipientList-detail">- Albrecht & Bertschler GmbG</span>
|
||||||
|
</div>
|
||||||
|
<li class="recipientList-entry u-clickable horizontal center">
|
||||||
|
<label class="checkbox-replacement centered">
|
||||||
|
<input type="checkbox" value="" name="select"/>
|
||||||
|
<span class="checkbox icon"></span>
|
||||||
|
</label>
|
||||||
|
<div class="recipientList-icon centered">
|
||||||
|
<div class="white user icon"></div>
|
||||||
|
</div>
|
||||||
|
<div class="recipientList-name flex u-textTruncat">
|
||||||
|
Benjamin Wahlers
|
||||||
|
<span class="recipientList-detail">- Wahlers Würste GmbH</span>
|
||||||
|
</div>
|
||||||
|
<li class="recipientList-entry u-clickable horizontal center">
|
||||||
|
<label class="checkbox-replacement centered">
|
||||||
|
<input type="checkbox" value="" name="select"/>
|
||||||
|
<span class="checkbox icon"></span>
|
||||||
|
</label>
|
||||||
|
<div class="recipientList-icon centered">
|
||||||
|
<div class="white user icon"></div>
|
||||||
|
</div>
|
||||||
|
<div class="recipientList-name flex u-textTruncat ">
|
||||||
|
Benjamin Weiß
|
||||||
|
<span class="recipientList-detail">- Zeughaus Werbeagentur GmbH</span>
|
||||||
|
</div>
|
||||||
|
<li class="recipientList-entry u-clickable horizontal center">
|
||||||
|
<label class="checkbox-replacement centered">
|
||||||
|
<input type="checkbox" value="" name="select"/>
|
||||||
|
<span class="checkbox icon"></span>
|
||||||
|
</label>
|
||||||
|
<div class="recipientList-icon centered">
|
||||||
|
<div class="white organisation icon"></div>
|
||||||
|
</div>
|
||||||
|
<div class="recipientList-name flex u-textTruncat">
|
||||||
|
Benteler SGL Composite Technology GmbH
|
||||||
|
<span class="recipientList-detail"></span>
|
||||||
|
</div>
|
||||||
|
<li class="recipientList-entry u-clickable horizontal center">
|
||||||
|
<label class="checkbox-replacement centered">
|
||||||
|
<input type="checkbox" value="" name="select"/>
|
||||||
|
<span class="checkbox icon"></span>
|
||||||
|
</label>
|
||||||
|
<div class="recipientList-icon centered">
|
||||||
|
<div class="white team icon"></div>
|
||||||
|
</div>
|
||||||
|
<div class="recipientList-name flex u-textTruncat">
|
||||||
|
Support Team Berlin
|
||||||
|
<span class="recipientList-detail">- 5 Personen</span>
|
||||||
|
</div>
|
||||||
|
<li class="recipientList-entry u-clickable horizontal center">
|
||||||
|
<label class="checkbox-replacement centered">
|
||||||
|
<input type="checkbox" value="" name="select"/>
|
||||||
|
<span class="checkbox icon"></span>
|
||||||
|
</label>
|
||||||
|
<div class="recipientList-icon centered">
|
||||||
|
<div class="white organisation icon"></div>
|
||||||
|
</div>
|
||||||
|
<div class="recipientList-name flex u-textTruncat">
|
||||||
|
Bernecker + Rainer Industrie-Elektronik Ges.m.b.H.
|
||||||
|
<span class="recipientList-detail">- 3 Personen</span>
|
||||||
|
</div>
|
||||||
|
<li class="recipientList-entry u-clickable horizontal center">
|
||||||
|
<label class="checkbox-replacement centered">
|
||||||
|
<input type="checkbox" value="" name="select"/>
|
||||||
|
<span class="checkbox icon"></span>
|
||||||
|
</label>
|
||||||
|
<div class="recipientList-icon centered">
|
||||||
|
<div class="white organisation icon"></div>
|
||||||
|
</div>
|
||||||
|
<div class="recipientList-name flex u-textTruncat">
|
||||||
|
Bertsch Ecopower GmbH
|
||||||
|
<span class="recipientList-detail">- 1 Person</span>
|
||||||
|
</div>
|
||||||
|
<li class="recipientList-entry recipientList-new u-clickable horizontal center">
|
||||||
|
<div class="recipientList-icon centered">
|
||||||
|
<div class="white plus icon"></div>
|
||||||
|
</div>
|
||||||
|
<div class="recipientList-name flex u-textTruncat">
|
||||||
|
<%- @T('Create new Customer') %>
|
||||||
|
</div>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<div class="ticket-form-top"></div>
|
<div class="ticket-form-top"></div>
|
||||||
<div class="article-form-top"></div>
|
<div class="article-form-top"></div>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -248,17 +248,16 @@ table {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.table .checkbox-replacement {
|
.checkbox-replacement {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
height: 38px;
|
height: 38px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
-webkit-user-select: none;
|
-webkit-user-select: none;
|
||||||
-moz-user-select: none;
|
|
||||||
user-select: none;
|
user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.table .checkbox-replacement input[type=checkbox] {
|
.checkbox-replacement input[type=checkbox] {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -433,7 +432,7 @@ label {
|
||||||
.form-control:focus,
|
.form-control:focus,
|
||||||
.tokenfield.focus {
|
.tokenfield.focus {
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
border-color: #419ed7 !important;
|
border-color: hsl(0,0%,90%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.has-error .form-control,
|
.has-error .form-control,
|
||||||
|
|
@ -3122,6 +3121,82 @@ footer {
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.caret {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
margin-top: -3px;
|
||||||
|
right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recipientList .dropdown-menu {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
width: 100%;
|
||||||
|
color: white;
|
||||||
|
background: hsl(234,10%,19%);
|
||||||
|
border-radius: 0;
|
||||||
|
border: none;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
.recipientList .dropdown-menu ul {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recipientList-entry {
|
||||||
|
height: 40px;
|
||||||
|
padding-left: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recipientList-entry .checkbox-replacement {
|
||||||
|
width: 30px;
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recipientList-icon {
|
||||||
|
width: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recipientList-entry:not(.recipientList-new) .recipientList-icon {
|
||||||
|
opacity: 0.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recipientList-name {
|
||||||
|
margin-left: 5px;
|
||||||
|
margin-top: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recipientList-entry:not(:last-child):not(:first-child) {
|
||||||
|
box-shadow: 0 1px rgba(255,255,255,.13) inset;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recipientList-entry:hover {
|
||||||
|
background: hsl(205,90%,60%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.recipientList-entry:hover + :not(:last-child):not(:first-child) {
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recipientList-entry:hover .recipientList-icon {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recipientList-detail {
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recipientList-icon.plus {
|
||||||
|
margin-left: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recipientList-new {
|
||||||
|
background: hsl(145,51%,45%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.recipientList-new:hover {
|
||||||
|
background: hsl(147,52%,43%);
|
||||||
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
|
|
||||||
----------------
|
----------------
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue