Skip to content

GitLab

Commit 889f7b41 authored by Axel Bocciarelli's avatar Axel Bocciarelli
Browse files

Move import of external styles to index.js and fix logbook combo search

parent edbab1f9
Pipeline #31791 passed with stage
in 3 minutes and 16 seconds
Hide whitespace changes
Inline Side-by-side
package-lock.json
View file @ 889f7b41
......@@ -7509,11 +7509,6 @@
"mime-types": "^2.1.12"
}
},
"formdata-polyfill": {
"version": "3.0.20",
"resolved": "https://registry.npmjs.org/formdata-polyfill/-/formdata-polyfill-3.0.20.tgz",
"integrity": "sha512-TAaxIEwTBdoH1TWndtUH1T0/GisUHwmOKcV5hjkR/iTatHBJSOHb563FP86Lra5nXo3iNdhK7HPwMl5Ihg71pg=="
},
"forwarded": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz",
......@@ -12699,11 +12694,11 @@
}
},
"react-combo-search": {
"version": "git://github.com/Max-Z80/react-combo-search.git#9f34d7a8022dfa58f40734f6dfbe51c4534923e1",
"from": "git://github.com/Max-Z80/react-combo-search.git",
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/react-combo-search/-/react-combo-search-1.1.4.tgz",
"integrity": "sha512-f4AENtgU4L2XAv9Q/UEIBUlkNqqFnts0MIboj2nkpCe9Eo8lVZT6Qltf7WFrWkRgcXonX7uJlZ95aUk9sAairA==",
"requires": {
"font-awesome": "*",
"formdata-polyfill": "^3.0.12",
"lodash.isequal": "^4.5.0",
"lodash.omit": "^4.5.0",
"moment": ">2.19.3",
......@@ -12716,7 +12711,6 @@
"version": "1.3.22",
"resolved": "https://registry.npmjs.org/react-combo-select/-/react-combo-select-1.3.22.tgz",
"integrity": "sha512-7pwfq9QV8i7Gh1GsM8HmhuiKsPX+FxMTxvVbA6cgz+8m1gEDIspRMjWJUoDBzbp4L+C2F5Zuyjh1W/WJNzFhFw==",
"optional": true,
"requires": {
"prop-types": "^15.6.0",
"react": "^16.4.0",
......@@ -12727,7 +12721,6 @@
"version": "2.16.3",
"resolved": "https://registry.npmjs.org/react-datetime/-/react-datetime-2.16.3.tgz",
"integrity": "sha512-amWfb5iGEiyqjLmqCLlPpu2oN415jK8wX1qoTq7qn6EYiU7qQgbNHglww014PT4O/3G5eo/3kbJu/M/IxxTyGw==",
"optional": true,
"requires": {
"create-react-class": "^15.5.2",
"object-assign": "^3.0.0",
......@@ -12738,8 +12731,7 @@
"object-assign": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-3.0.0.tgz",
"integrity": "sha1-m+3VygiXlJvKR+f/QIBi1Un1h/I=",
"optional": true
"integrity": "sha1-m+3VygiXlJvKR+f/QIBi1Un1h/I="
}
}
},
......@@ -13171,8 +13163,7 @@
"react-onclickoutside": {
"version": "6.9.0",
"resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.9.0.tgz",
"integrity": "sha512-8ltIY3bC7oGhj2nPAvWOGi+xGFybPNhJM0V1H8hY/whNcXgmDeaeoCMPPd8VatrpTsUWjb/vGzrmu6SrXVty3A==",
"optional": true
"integrity": "sha512-8ltIY3bC7oGhj2nPAvWOGi+xGFybPNhJM0V1H8hY/whNcXgmDeaeoCMPPd8VatrpTsUWjb/vGzrmu6SrXVty3A=="
},
"react-overlays": {
"version": "0.8.3",
......
src/components/Logbook/Menu/EventListMenu.js
View file @ 889f7b41
......@@ -20,9 +20,6 @@ import LogbookPager from '../LogbookPager';
import EventListMenuButton from './EventListMenuButton';
import NewlyAvailableEventsDialogue from './NewlyAvailableEventsDialogue';
import './eventListMenu.css';
import './react-combo-search.css';
import './react-combo-select.css';
import './react-datetime.css';
/**
* The menu displayed above the event list
......@@ -68,6 +65,7 @@ class EventListMenu extends React.Component {
top: 0,
backgroundColor: 'white',
zIndex: 1,
marginTop: 10,
}}
>
<Navbar.Header>
......@@ -212,7 +210,7 @@ class EventListMenu extends React.Component {
</Nav>
<Nav pullRight>
<NavItem eventKey={6} href="#" className="logbookNavItem">
<NavItem eventKey={6} className="logbookNavItem">
<div className="comboSearchContainer">
<ComboSearch
onSearch={this.onSearch}
......@@ -239,7 +237,7 @@ class EventListMenu extends React.Component {
color: '#666',
}}
>
<b> &nbsp; {eventCountBySelectionFilter} found </b>
<b>{eventCountBySelectionFilter} found</b>
</Well>
</NavItem>
</Nav>
......
src/components/Logbook/Menu/eventListMenu.css
View file @ 889f7b41
......@@ -5,6 +5,8 @@
}
.logbookNavItem > a {
pointer-events: none; /* workaround so nav link doesn't affect combo search (1/2) */
cursor: default;
padding-top: 8px !important;
padding-bottom: 5px !important;
padding-left: 5px !important;
......@@ -15,3 +17,193 @@
.logbookNavItem.dropdown > a > span {
display: none;
}
/* === `react-combo-search` overrides === */
.ComboSearch {
pointer-events: all; /* workaround so nav link doesn't affect combo search (2/2) */
display: flex;
flex-wrap: wrap;
border: none;
padding: 0;
font-size: 12px;
}
.ComboSearch * {
font-size: inherit;
}
.ComboSearch > p {
display: none;
}
.ComboStyleOverride {
flex: 0 0 auto;
width: 150px;
margin-right: 0;
padding-right: 8px;
}
.ComboStyleOverride .combo-select {
min-width: 0;
}
.ComboStyleOverride .combo-select-head {
width: 100%;
height: auto;
min-width: 0;
padding-left: 1rem;
border-radius: 3px;
line-height: 28px;
font-size: inherit;
color: inherit;
}
.combo-select .combo-select-head svg {
right: 8px;
pointer-events: none;
}
.combo-select .combo-select-body .combo-select-item {
padding-left: 1rem;
line-height: 32px;
height: auto;
}
.ComboSearch__inputWrapper {
flex: 1 1 0%;
}
.ComboSearch__inputIcon {
left: auto;
right: 5px;
top: 3px;
width: 25px;
height: 25px;
background-size: contain;
}
.Input {
outline: none;
height: auto;
padding: 0 3rem 0 1rem;
border-radius: 3px 0 0 3px;
line-height: 28px;
}
.ComboSearch input[type='search']:focus,
.ComboSearch input[type='text']:focus {
outline: none;
border-color: #45b3e3;
}
.ComboSearch__RadioWrapper {
flex: none;
height: auto;
padding-right: 8px;
}
.ComboSearch__datePicker {
flex: 1 1 0%;
width: auto;
margin-left: 0;
}
.ComboSearch__datePickerWrapper {
flex: 1 1 0%;
height: auto;
}
.RadioGroup {
width: auto;
}
.RadioGroup__label {
position: relative;
height: auto;
padding: 0 5px;
line-height: 28px;
border-radius: 8px;
color: inherit;
text-transform: lowercase;
pointer-events: none;
}
.RadioGroup__label--checked {
background-color: transparent;
}
.RadioGroup__label > input {
pointer-events: all;
display: inline;
margin-right: 3px;
opacity: 0;
cursor: pointer;
}
.RadioGroup__fakeRadio {
position: absolute;
left: 5px;
top: 8px;
width: 13px;
height: 13px;
border: 1px solid #666;
border-radius: 50%;
}
.RadioGroup__fakeRadio--checked > .RadioGroup__fakeRadioInner {
display: block;
width: 9px;
height: 9px;
margin-top: 1px;
margin-left: 1px;
border-radius: 50%;
background-color: #666;
}
.Datepicker__icon {
right: 5px;
top: 5px;
}
.rdtPicker {
right: 0;
}
.FilterBar {
flex: 1 0 100%;
margin: 0 -5px;
padding: 7px 0 0;
font-size: 12px;
}
.FilterBar__filter {
min-height: 0;
flex-direction: row;
flex-wrap: nowrap;
margin: 5px 5px 0;
padding: 2px 28px 3px 6px;
border-radius: 3px;
}
.FilterBar__filterClose {
right: 5px;
}
.FilterBar__filterText {
width: auto;
margin: 0;
}
.FilterBar__filterClose + .FilterBar__filterText {
white-space: nowrap;
}
.FilterBar__filterClose + .FilterBar__filterText:after {
content: ':';
padding-right: 3px;
}
.FilterBar__filterText:last-child {
font-weight: 600;
}
src/components/Logbook/Menu/react-combo-search.css deleted 100644 → 0
View file @ edbab1f9
/* --- reset --- */
.ComboSearch * {
box-sizing: border-box;
font-size: 14px;
}
.ComboSearch *:focus,
.ComboSearch a:focus,
.ComboSearch input:focus,
.ComboSearch button:focus,
.ComboSearch select:focus {
outline: none;
}
.ComboSearch input[disabled] {
background-color: #f9f9f9 !important;
border-color: #e1e1e1;
}
.ComboSearch input[disabled]:hover {
cursor: not-allowed;
}
.ComboSearch input[disabled]::-webkit-input-placeholder {
color: #e1e1e1;
}
.ComboSearch input[disabled]:-moz-placeholder {
/* Firefox 18- */
color: #e1e1e1;
}
.ComboSearch input[disabled]::-moz-placeholder {
/* Firefox 19+ */
color: #e1e1e1;
}
.ComboSearch input[disabled]:-ms-input-placeholder {
color: #e1e1e1;
}
.ComboSearch input[type='email']:focus,
.ComboSearch input[type='password']:focus {
outline-width: 2px;
}
.ComboSearch input[type='search']:focus,
.ComboSearch input[type='text']:focus {
outline: 1px solid #45b3e3;
}
.ComboSearch label {
font-weight: normal;
/*color: #595959;*/
}
.ComboSearch ::-webkit-input-placeholder {
/* Chrome */
color: #bcbcbc;
font-family: font-light, sans-serif;
}
.ComboSearch :-ms-input-placeholder {
/* IE 10+ */
color: #bcbcbc;
font-family: font-light, sans-serif;
}
.ComboSearch ::-moz-placeholder {
/* Firefox 19+ */
color: #bcbcbc;
font-family: font-light, sans-serif;
opacity: 1;
}
.ComboSearch :-moz-placeholder {
/* Firefox 4 - 18 */
color: #bcbcbc;
font-family: font-light, sans-serif;
opacity: 1;
}
.ComboSearch input[type='text']:-webkit-autofill,
.ComboSearch input[type='text']:-webkit-autofill:hover,
.ComboSearch input[type='text']:-webkit-autofill:focus,
.ComboSearch input[type='text']:-webkit-autofill:active {
-webkit-box-shadow: 0 0 0 42px white inset !important;
}
/* --- select override styles --- */
.ComboStyleOverride .combo-select {
/* max-width: 180px; */
}
.ComboStyleOverride .combo-select .combo-select-body {
border-radius: 2px;
font-size: 14px;
border-color: #bcbcbc;
}
.ComboStyleOverride .combo-select .combo-select-body .combo-select-item {
white-space: nowrap;
}
.ComboStyleOverride
.combo-select
.combo-select-body
.combo-select-item.selected
i {
color: #595959;
}
.ComboStyleOverride .combo-select i {
color: #595959;
}
.ComboStyleOverride .combo-select .search-input {
border-radius: 2px;
border: 1px solid #bcbcbc !important;
}
.ComboStyleOverride .combo-select-head {
border: 1px solid #bcbcbc;
border-radius: 2px;
font-size: 14px;
/*line-height: 2.6;*/
/*line-height: 42px;*/
line-height: 30px;
padding-left: 19px;
color: #595959;
/*height: 42px;*/
height: 30px;
width: auto;
min-width: 180px;
cursor: pointer;
vertical-align: top;
}
@media (max-width: 640px) {
.ComboStyleOverride .combo-select-head {
width: 100%;
}
}
/* --- datepicker style override --- */
.Datepicker {
position: relative;
}
.Datepicker__icon {
background: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20width%3D%2218%22%20height%3D%2217%22%20viewBox%3D%220%200%2018%2017%22%3E%0A%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3Cpath%20id%3D%22a%22%20d%3D%22M18%208.5V0H0v17h18z%22/%3E%0A%20%20%20%20%3C/defs%3E%0A%20%20%20%20%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cmask%20id%3D%22b%22%20fill%3D%22%23fff%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cuse%20xlink%3Ahref%3D%22%23a%22/%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C/mask%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20fill%3D%22%23646464%22%20d%3D%22M16.875%2015.583a.365.365%200%200%201-.375.354h-15c-.207%200-.375-.159-.375-.354V3.01c0-.195.168-.354.375-.354h2.438V3.72c0%20.293.251.53.562.53.31%200%20.563-.237.563-.53V2.656h3.375V3.72c0%20.293.252.53.562.53.31%200%20.563-.237.563-.53V2.656h3.374V3.72c0%20.293.252.53.563.53.311%200%20.563-.237.563-.53V2.656H16.5c.207%200%20.375.159.375.354v12.573zM16.5%201.593h-2.438V.532c0-.294-.25-.531-.562-.531-.311%200-.563.237-.563.531v1.063H9.563V.53C9.563.237%209.31%200%209%200c-.31%200-.563.237-.563.531v1.063H5.063V.53C5.063.237%204.81%200%204.5%200c-.31%200-.563.237-.563.531v1.063H1.5c-.828%200-1.5.633-1.5%201.416v12.573C0%2016.366.672%2017%201.5%2017h15c.829%200%201.5-.634%201.5-1.417V3.01c0-.783-.671-1.416-1.5-1.416z%22%20mask%3D%22url%28%23b%29%22/%3E%0A%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%20%20%20%20%3Cpath%20fill%3D%22%23646464%22%20d%3D%22M4%208h2V6H4zM4%2011h2V9H4zM4%2014h2v-2H4zM8%2014h2v-2H8zM8%2011h2V9H8zM8%208h2V6H8zM12%2014h2v-2h-2zM12%2011h2V9h-2zM12%208h2V6h-2z%22/%3E%0A%20%20%20%20%3C/g%3E%0A%3C/svg%3E)
no-repeat center center;
background-size: 18px;
width: 18px;
height: 18px;
position: absolute;
right: 15px;
/* top: 11px; */
top: 6px;
color: #595959;
pointer-events: none;
}
.Datepicker.Datepicker--pushDown {
margin-top: 25px;
}
@media (max-width: 767px) {
.Datepicker.Datepicker--pushDown {
margin-top: 45px;
}
}
.DatepickerSeparator {
display: inline-block;
width: 6.57%;
font-weight: bold;
font-size: 15px;
color: #595959;
text-align: center;
}
.rdtPrev span,
.rdtNext span,
.rdtBtn {
color: #45b3e3;
}
/* --- util --- */
.Input {
padding: 5px 15px;
/* padding-left: 49px; */
border: 1px solid #bcbcbc;
width: 100%;
/*height: 42px;*/
height: 30px;
display: block;
outline: 1px solid transparent;
transition: all 0.2s ease-in-out;
}
.Input:focus {
outline: 1px solid #45b3e3;
}
.Button {
display: inline-block;
height: 42px;
font-weight: bold;
font-size: 14px;
border-radius: 2px;
border-width: 0 0 2px;
border-style: solid;
min-width: 100px;
transition: background-color 0.4s;
padding: 2px 6px;
line-height: 2.4;
text-align: center;
z-index: 5;
cursor: pointer;
margin-top: 10px;
}
.Button.Button--action {
color: #fff;
background-color: #45b3e3;
border-color: #068fc5;
min-width: 145px;
}
.Button.Button--action:focus,
.Button.Button--action:hover {
background-color: #75d1f9;
}
.Button.Button--action:disabled {
color: #fff;
background-color: #d7d7d7;
border-color: #3d3d3d;
transition: background-color 0.4s;
cursor: not-allowed;
}
/* --- main --- */
.ComboSearch {
background-color: #fff;
/*border: solid 1px #bcbcbc;*/
border-radius: 4px;
/*padding: 24px 20px;*/
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
.ComboSearch .ComboStyleOverride {
position: relative;
}
.ComboSearch > p {
flex: 0 1 100%;
font-weight: bold;
}
@media (max-width: 600px) {
.ComboSearch {
display: block;
}
}
.combo-select {
/*min-width: 180px;*/
}
.ComboStyleOverride {
/* flex: 1 1 28%; */
margin-bottom: 16px;
}
@media (min-width: 768px) {
.ComboStyleOverride {
margin-right: 2%;
margin-bottom: 0;
}
}
.ComboSearch__inputWrapper {
position: relative;
flex: 1 1 30%;
}
.ComboSearch__inputIcon {
display: inline-block;
background: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2248%22%20height%3D%2248%22%20viewBox%3D%220%200%2048%2048%22%3E%0A%20%20%20%20%3Cpath%20fill%3D%22%23595959%22%20fill-rule%3D%22evenodd%22%20d%3D%22M29.385%2021.846c0-2.075-.738-3.85-2.213-5.326-1.475-1.475-3.25-2.212-5.326-2.212-2.075%200-3.85.737-5.326%202.212-1.475%201.476-2.212%203.25-2.212%205.326%200%202.075.737%203.85%202.212%205.326%201.476%201.475%203.25%202.213%205.326%202.213%202.075%200%203.85-.738%205.326-2.213%201.475-1.475%202.213-3.25%202.213-5.326zm8.615%2014a2.07%202.07%200%200%201-.64%201.515%202.07%202.07%200%200%201-1.514.639c-.606%200-1.11-.213-1.514-.64l-5.772-5.754c-2.008%201.39-4.246%202.086-6.714%202.086a11.64%2011.64%200%200%201-4.602-.934c-1.464-.622-2.726-1.464-3.786-2.524s-1.902-2.322-2.524-3.786A11.64%2011.64%200%200%201%2010%2021.846c0-1.604.311-3.138.934-4.602.622-1.464%201.464-2.726%202.524-3.786s2.322-1.902%203.786-2.524A11.64%2011.64%200%200%201%2021.846%2010c1.604%200%203.138.311%204.602.934%201.464.622%202.726%201.464%203.786%202.524s1.902%202.322%202.524%203.786a11.64%2011.64%200%200%201%20.934%204.602c0%202.468-.695%204.706-2.086%206.714l5.771%205.772c.415.415.623.92.623%201.514z%22/%3E%0A%3C/svg%3E%0A)
no-repeat center center;
/* background-size: 34px; */
background-size: 26px;
/*width: 34px;*/
width: 20px;
/*height: 34px;*/