Skip to content

Commit 609bb60

Browse files
SimrayzSimrayz
committed
Fix multiselect usages and add updated styling sheet
1 parent 6fccf83 commit 609bb60

File tree

5 files changed

+161
-99
lines changed

5 files changed

+161
-99
lines changed

‎python/nav/web/sass/nav/multi-select.scss‎

Lines changed: 155 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -1,95 +1,156 @@
1-
@import "settings";
2-
3-
.ms-container{
4-
background: transparent url('#{$assets-url}/images/multiselect/switch.png') no-repeat 50% 50%;
5-
width: 100%;
6-
}
7-
8-
.ms-container:after{
9-
content: ".";
10-
display: block;
11-
height: 0;
12-
line-height: 0;
13-
font-size: 0;
14-
clear: both;
15-
min-height: 0;
16-
visibility: hidden;
17-
}
18-
19-
.ms-container .ms-selectable, .ms-container .ms-selection{
20-
background: #fff;
21-
color: #555555;
22-
float: left;
23-
width: 45%;
24-
}
25-
.ms-container .ms-selection{
26-
float: right;
27-
}
28-
29-
.ms-container .ms-list{
30-
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
31-
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
32-
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
33-
-webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
34-
-moz-transition: border linear 0.2s, box-shadow linear 0.2s;
35-
-ms-transition: border linear 0.2s, box-shadow linear 0.2s;
36-
-o-transition: border linear 0.2s, box-shadow linear 0.2s;
37-
transition: border linear 0.2s, box-shadow linear 0.2s;
38-
border: 1px solid #ccc;
39-
-webkit-border-radius: 3px;
40-
-moz-border-radius: 3px;
41-
border-radius: 3px;
42-
position: relative;
43-
height: 200px;
44-
padding: 0;
45-
overflow-y: auto;
46-
}
47-
48-
.ms-container .ms-list.ms-focus{
49-
border-color: rgba(82, 168, 236, 0.8);
50-
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
51-
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
52-
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
53-
outline: 0;
54-
outline: thin dotted \9;
55-
}
56-
57-
.ms-container ul{
58-
margin: 0;
59-
list-style-type: none;
60-
padding: 0;
61-
}
62-
63-
.ms-container .ms-optgroup-container{
64-
width: 100%;
65-
}
66-
67-
.ms-container .ms-optgroup-label{
68-
margin: 0;
69-
padding: 5px 0px 0px 5px;
70-
cursor: pointer;
71-
color: #999;
72-
}
73-
74-
.ms-container .ms-selectable li.ms-elem-selectable,
75-
.ms-container .ms-selection li.ms-elem-selection{
76-
border-bottom: 1px #eee solid;
77-
padding: 2px 10px;
78-
color: #555;
79-
font-size: 14px;
80-
}
81-
82-
.ms-container .ms-selectable li.ms-hover,
83-
.ms-container .ms-selection li.ms-hover{
84-
cursor: pointer;
85-
color: #fff;
86-
text-decoration: none;
87-
background-color: #08c;
88-
}
89-
90-
.ms-container .ms-selectable li.disabled,
91-
.ms-container .ms-selection li.disabled{
92-
background-color: #eee;
93-
color: #aaa;
94-
cursor: text;
1+
.ms-options-wrap {
2+
position: relative;
3+
}
4+
5+
.ms-options-wrap,
6+
.ms-options-wrap * {
7+
box-sizing: border-box;
8+
}
9+
10+
.ms-options-wrap > button:focus,
11+
.ms-options-wrap > button {
12+
position: relative;
13+
width: 100%;
14+
text-align: left;
15+
border: 1px solid #aaa;
16+
background-color: #fff;
17+
padding: 5px 20px 5px 5px;
18+
margin-top: 1px;
19+
font-size: 13px;
20+
color: #aaa;
21+
outline-offset: -2px;
22+
white-space: nowrap;
23+
overflow: hidden;
24+
text-overflow: ellipsis;
25+
margin-bottom: 0;
26+
}
27+
28+
.ms-options-wrap > button[disabled] {
29+
background-color: #e5e9ed;
30+
color: #808080;
31+
opacity: 0.6;
32+
}
33+
34+
.ms-options-wrap > button:after {
35+
content: ' ';
36+
height: 0;
37+
position: absolute;
38+
top: 50%;
39+
right: 5px;
40+
width: 0;
41+
border: 6px solid rgba(0, 0, 0, 0);
42+
border-top-color: #999;
43+
margin-top: -3px;
44+
}
45+
46+
.ms-options-wrap.ms-has-selections > button {
47+
color: #333;
48+
}
49+
50+
.ms-options-wrap > .ms-options {
51+
position: absolute;
52+
left: 0;
53+
width: 100%;
54+
margin-top: 1px;
55+
margin-bottom: 20px;
56+
background: white;
57+
z-index: 2000;
58+
border: 1px solid #aaa;
59+
overflow: auto;
60+
visibility: hidden;
61+
}
62+
63+
.ms-options-wrap.ms-active > .ms-options {
64+
visibility: visible
65+
}
66+
67+
.ms-options-wrap > .ms-options > .ms-search input {
68+
width: 100%;
69+
padding: 4px 5px;
70+
border: none;
71+
border-bottom: 1px groove;
72+
outline: none;
73+
}
74+
75+
.ms-options-wrap > .ms-options > .no-result-message {
76+
padding: 4px 5px;
77+
display: none;
78+
}
79+
80+
.ms-options-wrap > .ms-options .ms-selectall {
81+
display: inline-block;
82+
font-size: .9em;
83+
text-transform: lowercase;
84+
text-decoration: none;
85+
}
86+
.ms-options-wrap > .ms-options .ms-selectall:hover {
87+
text-decoration: underline;
88+
}
89+
90+
.ms-options-wrap > .ms-options > .ms-selectall.global {
91+
margin: 4px 5px;
92+
}
93+
94+
.ms-options-wrap > .ms-options > ul,
95+
.ms-options-wrap > .ms-options > ul > li.optgroup ul {
96+
list-style-type: none;
97+
padding: 0;
98+
margin: 0;
99+
}
100+
101+
.ms-options-wrap > .ms-options > ul li.ms-hidden {
102+
display: none;
103+
}
104+
105+
.ms-options-wrap > .ms-options > ul > li.optgroup {
106+
padding: 5px;
107+
}
108+
.ms-options-wrap > .ms-options > ul > li.optgroup + li.optgroup {
109+
border-top: 1px solid #aaa;
110+
}
111+
112+
.ms-options-wrap > .ms-options > ul > li.optgroup .label {
113+
display: block;
114+
padding: 5px 0 0 0;
115+
font-weight: bold;
116+
}
117+
118+
.ms-options-wrap > .ms-options > ul label {
119+
position: relative;
120+
display: inline-block;
121+
width: 100%;
122+
padding: 4px 4px 4px 20px;
123+
margin: 1px 0;
124+
border: 1px dotted transparent;
125+
}
126+
.ms-options-wrap > .ms-options.checkbox-autofit > ul label,
127+
.ms-options-wrap > .ms-options.hide-checkbox > ul label {
128+
padding: 4px;
129+
}
130+
131+
.ms-options-wrap > .ms-options > ul label.focused,
132+
.ms-options-wrap > .ms-options > ul label:hover {
133+
background-color: #efefef;
134+
border-color: #999;
135+
}
136+
137+
.ms-options-wrap > .ms-options > ul li.selected label {
138+
background-color: #efefef;
139+
border-color: transparent;
140+
}
141+
142+
.ms-options-wrap > .ms-options > ul input[type="checkbox"] {
143+
margin: 0 5px 0 0;
144+
position: absolute;
145+
left: 4px;
146+
top: 7px;
147+
}
148+
149+
.ms-options-wrap > .ms-options.hide-checkbox > ul input[type="checkbox"] {
150+
position: absolute !important;
151+
height: 1px;
152+
width: 1px;
153+
overflow: hidden;
154+
clip: rect(1px 1px 1px 1px);
155+
clip: rect(1px, 1px, 1px, 1px);
95156
}

‎python/nav/web/static/images/multiselect/switch.png‎

-3.01 KB
Binary file not shown.

‎python/nav/web/static/js/require_config.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ var require = {
2929
"jquery-ui": "libs/jquery-ui-1.14.0.min",
3030
"jquery-tablesorter": "libs/jquery.tablesorter-2.32.0.min",
3131
"jquery-sparkline": "libs/jquery.sparkline-2.4.0.min",
32+
"jquery-multi-select": "libs/jquery.multiselect-2.4.24.min",
3233
},
3334
shim: {
3435
'libs/underscore': {
@@ -46,7 +47,7 @@ var require = {
4647
deps: ["libs/underscore"],
4748
exports: 'Backbone'
4849
},
49-
'libs/backbone-eventbroker': ['libs/backbone']
50+
'libs/backbone-eventbroker': ['libs/backbone'],
5051
},
5152
deps: ['jquery']
5253
};

‎python/nav/web/templates/useradmin/jwt_edit.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,11 @@
77
label[for='id_endpoints'] { display: none; }
88
</style>
99
<script>
10-
require(['libs/jquery.multi-select'], function(){
10+
require(['jquery-multi-select'], function(){
1111
$(function(){
1212
/* Add multiselect for selecting endpoints */
1313
var msSelector = '#id_endpoints';
14-
$(msSelector).multiSelect({
14+
$(msSelector).multiselect({
1515
selectableHeader: 'Available endpoints <a id="select-all-endpoints" class="right">Select all</a>',
1616
selectionHeader: 'Selected endpoints <a id="remove-all-endpoints" class="right">Remove all</a>',
1717
afterInit: function(){

‎python/nav/web/templates/useradmin/token_edit.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,11 @@
88
label[for='id_endpoints'] { display: none; }
99
</style>
1010
<script>
11-
require(['libs/jquery.multi-select'], function(){
11+
require(['jquery-multi-select'], function(){
1212
$(function(){
1313
/* Add multiselect for selecting endpoints */
1414
var msSelector = '#id_endpoints';
15-
$(msSelector).multiSelect({
15+
$(msSelector).multiselect({
1616
selectableHeader: 'Available endpoints <a id="select-all-endpoints" class="right">Select all</a>',
1717
selectionHeader: 'Selected endpoints <a id="remove-all-endpoints" class="right">Remove all</a>',
1818
afterInit: function(){

0 commit comments

Comments
 (0)