Rework drive-selector with react + rendition

Change-type: patch
Changelog-entry: Rework drive-selector with react + rendition
Signed-off-by: Lorenzo Alberto Maria Ambrosi <lorenzoa@balena.io>
This commit is contained in:
Lorenzo Alberto Maria Ambrosi 2019-05-29 15:51:58 +02:00
parent 543ba51d3c
commit 17f83135c5
45 changed files with 525 additions and 266 deletions

6
.gitattributes vendored
View File

@ -48,4 +48,10 @@ CODEOWNERS text
*.rpi-sdcard binary diff=hex
*.wic binary diff=hex
*.foo binary diff=hex
*.eot binary diff=hex
*.otf binary diff=hex
*.woff binary diff=hex
*.woff2 binary diff=hex
*.ttf binary diff=hex
xz-without-extension binary diff=hex
wmic-output.txt binary diff=hex

View File

@ -0,0 +1,34 @@
/*
* Copyright 2019 resin.io
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
'use strict'
/**
* @module Etcher.Components.TargetSelector
*/
const angular = require('angular')
const { react2angular } = require('react2angular')
const MODULE_NAME = 'Etcher.Components.TargetSelector'
const SelectTargetButton = angular.module(MODULE_NAME, [])
SelectTargetButton.component(
'targetSelector',
react2angular(require('./target-selector.jsx'))
)
module.exports = MODULE_NAME

View File

@ -0,0 +1,166 @@
/*
* Copyright 2019 resin.io
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/* eslint-disable no-magic-numbers */
'use strict'
// eslint-disable-next-line no-unused-vars
const React = require('react')
const propTypes = require('prop-types')
const { default: styled } = require('styled-components')
const {
ChangeButton,
DetailsText,
StepButton,
StepNameButton,
ThemedProvider
} = require('./../../styled-components')
const { Txt } = require('rendition')
const middleEllipsis = require('./../../utils/middle-ellipsis')
const { bytesToClosestUnit } = require('./../../../../shared/units')
const TargetDetail = styled((props) => (
<Txt.span {...props}>
</Txt.span>
)) `
float: ${({ float }) => float}
`
const TargetDisplayText = ({
description,
size,
...props
}) => {
return (
<Txt.span {...props}>
<TargetDetail
float='left'>
{description}
</TargetDetail>
<TargetDetail
float='right'
>
{size}
</TargetDetail>
</Txt.span>
)
}
const TargetSelector = (props) => {
const targets = props.selection.getSelectedDrives()
if (targets.length === 1) {
const target = targets[0]
return (
<ThemedProvider>
<StepNameButton
plain
tooltip={props.tooltip}
>
{/* eslint-disable no-magic-numbers */}
{ middleEllipsis(target.description, 20) }
</StepNameButton>
{ !props.flashing &&
<ChangeButton
plain
mb={14}
onClick={props.reselectDrive}
>
Change
</ChangeButton>
}
<DetailsText>
{ props.constraints.hasListDriveImageCompatibilityStatus(targets, props.image) &&
<Txt.span className='glyphicon glyphicon-exclamation-sign'
ml={2}
tooltip={
props.constraints.getListDriveImageCompatibilityStatuses(targets, props.image)[0].message
}
/>
}
{ bytesToClosestUnit(target.size) }
</DetailsText>
</ThemedProvider>
)
}
if (targets.length > 1) {
const targetsTemplate = []
for (const target of targets) {
targetsTemplate.push((
<DetailsText
key={target.device}
tooltip={
`${target.description} ${target.displayName} ${bytesToClosestUnit(target.size)}`
}
px={21}
>
<TargetDisplayText
description={middleEllipsis(target.description, 14)}
size={bytesToClosestUnit(target.size)}
>
</TargetDisplayText>
</DetailsText>
))
}
return (
<ThemedProvider>
<StepNameButton
plain
tooltip={props.tooltip}
>
{targets.length} Targets
</StepNameButton>
{ !props.flashing &&
<ChangeButton
plain
onClick={props.reselectDrive}
mb={14}
>
Change
</ChangeButton>
}
{targetsTemplate}
</ThemedProvider>
)
}
return (
<ThemedProvider>
<StepButton
tabindex={(targets.length > 0) ? -1 : 2 }
disabled={props.disabled}
onClick={props.openDriveSelector}
>
Select target
</StepButton>
</ThemedProvider>
)
}
TargetSelector.propTypes = {
disabled: propTypes.bool,
openDriveSelector: propTypes.func,
selection: propTypes.object,
reselectDrive: propTypes.func,
flashing: propTypes.bool,
constraints: propTypes.object,
show: propTypes.bool,
tooltip: propTypes.string
}
module.exports = TargetSelector

View File

@ -52,7 +52,7 @@
</div>
<div class="modal-footer">
<button class="button button-primary button-block"
<button class="button button-primary"
tabindex="{{ 15 + modal.getDrives().length }}"
ng-class="{
'button-warning': modal.constraints.hasListDriveImageCompatibilityStatus(modal.state.getSelectedDrives(), modal.state.getImage())

View File

@ -16,10 +16,12 @@
'use strict'
// eslint-disable-next-line no-unused-vars
const React = require('react')
const PropTypes = require('prop-types')
const styled = require('styled-components').default
const { position, right } = require('styled-system')
const { BaseButton, ThemedProvider } = require('../../styled-components')
const Div = styled.div `
${position}
@ -28,11 +30,15 @@ const Div = styled.div `
const FlashAnother = (props) => {
return (
<Div position='absolute' right='152px'>
<button className="button button-primary button-brick" onClick={props.onClick.bind(null, { preserveImage: true })}>
<b>Flash Another</b>
</button>
</Div>
<ThemedProvider>
<Div position='absolute' right='152px'>
<BaseButton
primary
onClick={props.onClick.bind(null, { preserveImage: true })}>
Flash Another
</BaseButton>
</Div>
</ThemedProvider>
)
}

View File

@ -22,8 +22,6 @@ const propTypes = require('prop-types')
const middleEllipsis = require('./../../utils/middle-ellipsis')
const { Provider } = require('rendition')
const shared = require('./../../../../shared/units')
const {
StepButton,
@ -32,13 +30,14 @@ const {
Footer,
Underline,
DetailsText,
ChangeButton
ChangeButton,
ThemedProvider
} = require('./../../styled-components')
const SelectImageButton = (props) => {
if (props.hasImage) {
return (
<Provider>
<ThemedProvider>
<StepNameButton
plain
onClick={props.showSelectedImageDetails}
@ -47,22 +46,23 @@ const SelectImageButton = (props) => {
{/* eslint-disable no-magic-numbers */}
{ middleEllipsis(props.imageName || props.imageBasename, 20) }
</StepNameButton>
<DetailsText>
{shared.bytesToClosestUnit(props.imageSize)}
</DetailsText>
{ !props.flashing &&
<ChangeButton
plain
mb={14}
onClick={props.reselectImage}
>
Change
</ChangeButton>
}
</Provider>
<DetailsText>
{shared.bytesToClosestUnit(props.imageSize)}
</DetailsText>
</ThemedProvider>
)
}
return (
<Provider>
<ThemedProvider>
<StepSelection>
<StepButton
onClick={props.openImageSelector}
@ -78,7 +78,7 @@ const SelectImageButton = (props) => {
</Underline>
</Footer>
</StepSelection>
</Provider>
</ThemedProvider>
)
}

View File

@ -1,5 +1,5 @@
/*
* Copyright 2016 resin.io
* Copyright 2018 resin.io
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.

View File

@ -83,6 +83,7 @@
.modal-footer {
flex-grow: 0;
border: 0;
text-align: center;
}
.modal {

View File

@ -28,5 +28,5 @@ const react2angular = require('react2angular').react2angular
const MODULE_NAME = 'Etcher.Components.SVGIcon'
const angularSVGIcon = angular.module(MODULE_NAME, [])
angularSVGIcon.component('svgIcon', react2angular(require('./svg-icon/svg-icon.jsx')))
angularSVGIcon.component('svgIcon', react2angular(require('./svg-icon.jsx')))
module.exports = MODULE_NAME

View File

@ -49,7 +49,6 @@
> b {
color: $palette-theme-dark-soft-foreground;
font-family: monospace;
}
}

View File

@ -44,6 +44,7 @@ const MainPage = angular.module(MODULE_NAME, [
require('../../components/reduced-flashing-infos'),
require('../../components/flash-another'),
require('../../components/flash-results'),
require('../../components/drive-selector'),
require('../../os/open-external/open-external'),
require('../../os/dropzone/dropzone'),

View File

@ -21,11 +21,13 @@
>
</image-selector>
</div>
</div>
</div>
<div class="col-xs" ng-controller="DriveSelectionController as drive">
<div class="box text-center relative">
<div class="step-border-left" ng-disabled="main.shouldDriveStepBeDisabled()" ng-hide="main.state.isFlashing() && main.isWebviewShowing"></div>
<div class="step-border-right" ng-disabled="main.shouldFlashStepBeDisabled()" ng-hide="main.state.isFlashing() && main.isWebviewShowing"></div>
@ -35,58 +37,20 @@
</div>
<div class="space-vertical-large">
<div ng-if="!main.selection.hasDrive() && drive.shouldShowDrivesButton()">
<div>
<button class="button button-primary button-brick"
tabindex="{{ main.selection.hasDrive() ? -1 : 2 }}"
ng-disabled="main.shouldDriveStepBeDisabled()"
ng-click="drive.openDriveSelector()">Select drive</button>
</div>
</div>
<div ng-if="main.selection.hasDrive() || !drive.shouldShowDrivesButton()">
<div class="step-selection-text"
ng-class="{
'text-disabled': main.shouldDriveStepBeDisabled()
}">
<span class="step-drive step-name"
ng-class="{
'text-warning': !main.selection.getSelectedDevices().length
}"
uib-tooltip="{{ drive.getDriveListLabel() }}">
<!-- middleEllipsis errors on undefined, therefore fallback to empty string -->
{{ drive.getDrivesTitle() | middleEllipsis:20 }}
</span>
<span class="step-drive step-warning glyphicon glyphicon-exclamation-sign"
uib-tooltip="{{ main.constraints.getListDriveImageCompatibilityStatuses(main.selection.getSelectedDrives(), main.selection.getImage())[0].message }}"
ng-show="main.constraints.hasListDriveImageCompatibilityStatus(main.selection.getSelectedDrives(), main.selection.getImage())"></span>
<p
ng-if="main.selection.getSelectedDevices().length <= 1"
ng-class="{
'step-fill': !drive.shouldShowDrivesButton()
}"
class="step-drive step-size">
{{ drive.getDrivesSubtitle() }}
</p>
<button class="button button-link step-footer"
tabindex="{{ main.selection.hasDrive() ? 2 : -1 }}"
ng-hide="main.state.isFlashing() || !drive.shouldShowDrivesButton()"
ng-click="drive.reselectDrive()">Change</button>
</div>
</div>
<div ng-if="main.selection.getSelectedDevices().length > 1"
ng-class="{
'step-fill': !drive.shouldShowDrivesButton()
}"
class="step-drive step-list">
<div ng-repeat="driveObj in drive.getMemoizedSelectedDrives()"
uib-tooltip="{{ driveObj.description }} ({{ driveObj.displayName }})">
{{ driveObj.description | middleEllipsis:14 }}
</div>
</div>
<target-selector
disabled="main.shouldDriveStepBeDisabled()"
show="!main.selection.hasDrive() && drive.shouldShowDrivesButton()"
tooltip="drive.getDriveListLabel()"
selection="main.selection"
open-drive-selector="drive.openDriveSelector"
reselect-drive="drive.reselectDrive"
flashing="main.state.isFlashing()"
constraints="main.constraints"
targets="drive.getMemoizedSelectedDrives()"
>
</target-selector>
</div>
</div>
</div>

View File

@ -20,7 +20,7 @@
padding: 10px;
padding-top: 11px;
border-radius: 2px;
border-radius: 24px;
border: 0;
letter-spacing: .5px;
@ -33,6 +33,11 @@
margin-right: 2px;
}
&.button-primary{
width: 200px;
height: 48px;
}
&[disabled] {
@extend .button-no-hover;
background-color: $palette-theme-dark-disabled-background;

View File

@ -15,7 +15,7 @@
*/
$icon-font-path: "../../../node_modules/bootstrap-sass/assets/fonts/bootstrap/";
$font-size-base: 13px;
$font-size-base: 16px;
$cursor-disabled: initial;
$link-hover-decoration: none;
$btn-min-width: 170px;
@ -47,44 +47,90 @@ $fa-font-path: "../../../node_modules/@fortawesome/fontawesome-free-webfonts/web
@import "../../../../node_modules/@fortawesome/fontawesome-free-webfonts/scss/fa-solid";
@font-face {
font-family: Roboto;
src: url('../../../node_modules/roboto-fontface/fonts/roboto/Roboto-Thin.woff');
font-weight: 100;
font-family: 'Nunito';
src: url('Nunito-Regular.eot');
src: url('./fonts/Nunito-Regular.eot?#iefix') format('embedded-opentype'),
url('./fonts/Nunito-Regular.woff2') format('woff2'),
url('./fonts/Nunito-Regular.woff') format('woff'),
url('./fonts/Nunito-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: Roboto;
src: url('../../../node_modules/roboto-fontface/fonts/roboto/Roboto-Light.woff');
font-family: 'Nunito';
src: url('Nunito-Bold.eot');
src: url('./fonts/Nunito-Bold.eot?#iefix') format('embedded-opentype'),
url('./fonts/Nunito-Bold.woff2') format('woff2'),
url('./fonts/Nunito-Bold.woff') format('woff'),
url('./fonts/Nunito-Bold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Nunito';
src: url('Nunito-Light.eot');
src: url('./fonts/Nunito-Light.eot?#iefix') format('embedded-opentype'),
url('./fonts/Nunito-Light.woff2') format('woff2'),
url('./fonts/Nunito-Light.woff') format('woff'),
url('./fonts/Nunito-Light.ttf') format('truetype');
font-weight: 300;
font-style: normal;
font-display: block;
}
@font-face {
font-family: Roboto;
src: url('../../../node_modules/roboto-fontface/fonts/roboto/Roboto-Regular.woff');
font-weight: 400;
font-family: 'CircularStd';
src: url('./fonts/CircularStd-Bold.eot');
src: url('./fonts/CircularStd-Bold.eot?#iefix') format('embedded-opentype'),
url('./fonts/CircularStd-Bold.woff2') format('woff2'),
url('./fonts/CircularStd-Bold.woff') format('woff'),
url('./fonts/CircularStd-Bold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: Roboto;
src: url('../../../node_modules/roboto-fontface/fonts/roboto/Roboto-Medium.woff');
font-family: 'CircularStd';
src: url('./fonts/CircularStd-Book.eot');
src: url('./fonts/CircularStd-Book.eot?#iefix') format('embedded-opentype'),
url('./fonts/CircularStd-Book.woff2') format('woff2'),
url('./fonts/CircularStd-Book.woff') format('woff'),
url('./fonts/CircularStd-Book.ttf') format('truetype');
font-weight: 500;
font-style: normal;
font-display: block;
}
@font-face {
font-family: Roboto;
src: url('../../../node_modules/roboto-fontface/fonts/roboto/Roboto-Bold.woff');
font-weight: 700;
font-family: 'CircularStd';
src: url('./fonts/CircularStd-Medium.eot');
src: url('./fonts/CircularStd-Medium.eot?#iefix') format('embedded-opentype'),
url('./fonts/CircularStd-Medium.woff2') format('woff2'),
url('./fonts/CircularStd-Medium.woff') format('woff'),
url('./fonts/CircularStd-Medium.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-display: block;
}
.circular {
font-family: 'CircularStd';
font-weight: 500;
}
.nunito {
font-family: 'Nunito';
}
body {
letter-spacing: 0.5px;
display: flex;
flex-direction: column;
font-family: 'CircularStd';
> header {
flex: 0 0 auto;
@ -100,12 +146,6 @@ body {
}
}
body,
.tooltip,
.popover {
font-family: Roboto;
}
.section-footer-main {
display: flex;
align-items: center;
@ -173,7 +213,6 @@ body,
.section-header {
text-align: right;
padding: 5px 8px;
font-size: 15px;
> .button {
padding-left: 3px;

View File

@ -19,23 +19,29 @@
// eslint-disable-next-line no-unused-vars
const React = require('react')
const { default: styled } = require('styled-components')
const { colors } = require('./theme')
const {
Button, Txt, Flex, Provider
Button,
Txt,
Flex,
Provider
} = require('rendition')
const {
space
} = require('styled-system')
const { colors } = require('./theme')
const theme = {
button: {
border: {
width: '0',
radius: '2px'
radius: '24px'
},
disabled: {
opacity: 1
},
extend: (props) => `
extend: () => `
width: 200px;
min-height: 48px;
height: 48px;
font-size: 16px;
&:disabled {
@ -52,29 +58,37 @@ const theme = {
}
}
exports.StepButton = (props) => {
return (
<Provider theme={theme}>
<Button primary {...props}>
</Button>
</Provider>
)
}
exports.ThemedProvider = (props) => (
<Provider theme={theme} {...props}>
</Provider>
)
exports.ChangeButton = styled(Button) `
const BaseButton = styled(Button) `
height: 48px;
`
exports.BaseButton = BaseButton
exports.StepButton = (props) => (
<BaseButton primary {...props}>
</BaseButton>
)
exports.ChangeButton = styled(BaseButton) `
color: ${colors.primary.background};
padding: 0;
width: 100%;
height: auto;
${space}
&:hover, &:focus, &:active {
color: ${colors.primary.background};
}
`
exports.StepNameButton = styled(Button) `
exports.StepNameButton = styled(BaseButton) `
display: flex;
justify-content: center;
align-items: center;
height: 39px;
width: 100%;
font-weight: bold;
color: ${colors.dark.foreground};
@ -98,5 +112,5 @@ exports.Underline = styled(Txt.span) `
`
exports.DetailsText = styled(Txt.p) `
color: ${colors.dark.disabled.foreground};
margin-bottom: 8px;
margin-bottom: 0;
`

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

View File

@ -1074,7 +1074,7 @@ html {
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 13px;
font-size: 16px;
line-height: 1.42857;
color: #333333;
background-color: #fff; }
@ -1128,8 +1128,8 @@ img {
border-radius: 50%; }
hr {
margin-top: 18px;
margin-bottom: 18px;
margin-top: 22px;
margin-bottom: 22px;
border: 0;
border-top: 1px solid #eeeeee; }
@ -1181,8 +1181,8 @@ h1, h2, h3, h4, h5, h6,
h1, .h1,
h2, .h2,
h3, .h3 {
margin-top: 18px;
margin-bottom: 9px; }
margin-top: 22px;
margin-bottom: 11px; }
h1 small,
h1 .small, .h1 small,
.h1 .small,
@ -1197,8 +1197,8 @@ h3, .h3 {
h4, .h4,
h5, .h5,
h6, .h6 {
margin-top: 9px;
margin-bottom: 9px; }
margin-top: 11px;
margin-bottom: 11px; }
h4 small,
h4 .small, .h4 small,
.h4 .small,
@ -1211,38 +1211,38 @@ h6, .h6 {
font-size: 75%; }
h1, .h1 {
font-size: 33px; }
font-size: 41px; }
h2, .h2 {
font-size: 27px; }
font-size: 34px; }
h3, .h3 {
font-size: 23px; }
font-size: 28px; }
h4, .h4 {
font-size: 17px; }
font-size: 20px; }
h5, .h5 {
font-size: 13px; }
font-size: 16px; }
h6, .h6 {
font-size: 12px; }
font-size: 14px; }
p {
margin: 0 0 9px; }
margin: 0 0 11px; }
.lead {
margin-bottom: 18px;
font-size: 14px;
margin-bottom: 22px;
font-size: 18px;
font-weight: 300;
line-height: 1.4; }
@media (min-width: 768px) {
.lead {
font-size: 19.5px; } }
font-size: 24px; } }
small,
.small {
font-size: 92%; }
font-size: 87%; }
mark,
.mark {
@ -1350,14 +1350,14 @@ a.bg-danger:focus {
background-color: #e4b9b9; }
.page-header {
padding-bottom: 8px;
margin: 36px 0 18px;
padding-bottom: 10px;
margin: 44px 0 22px;
border-bottom: 1px solid #eeeeee; }
ul,
ol {
margin-top: 0;
margin-bottom: 9px; }
margin-bottom: 11px; }
ul ul,
ul ol,
ol ul,
@ -1379,7 +1379,7 @@ ol {
dl {
margin-top: 0;
margin-bottom: 18px; }
margin-bottom: 22px; }
dt,
dd {
@ -1418,9 +1418,9 @@ abbr[data-original-title] {
font-size: 90%; }
blockquote {
padding: 9px 18px;
margin: 0 0 18px;
font-size: 16.25px;
padding: 11px 22px;
margin: 0 0 22px;
font-size: 20px;
border-left: 5px solid #eeeeee; }
blockquote p:last-child,
blockquote ul:last-child,
@ -1461,7 +1461,7 @@ blockquote.pull-right {
content: "\00A0 \2014"; }
address {
margin-bottom: 18px;
margin-bottom: 22px;
font-style: normal;
line-height: 1.42857; }
@ -1493,9 +1493,9 @@ kbd {
pre {
display: block;
padding: 8.5px;
margin: 0 0 9px;
font-size: 12px;
padding: 10.5px;
margin: 0 0 11px;
font-size: 15px;
line-height: 1.42857;
color: #333333;
word-break: break-all;
@ -2066,7 +2066,7 @@ th {
.table {
width: 100%;
max-width: 100%;
margin-bottom: 18px; }
margin-bottom: 22px; }
.table > thead > tr > th,
.table > thead > tr > td,
.table > tbody > tr > th,
@ -2230,7 +2230,7 @@ th {
@media screen and (max-width: 767px) {
.table-responsive {
width: 100%;
margin-bottom: 13.5px;
margin-bottom: 16.5px;
overflow-y: hidden;
-ms-overflow-style: -ms-autohiding-scrollbar;
border: 1px solid #ddd; }
@ -2275,8 +2275,8 @@ legend {
display: block;
width: 100%;
padding: 0;
margin-bottom: 18px;
font-size: 19.5px;
margin-bottom: 22px;
font-size: 24px;
line-height: inherit;
color: #333333;
border: 0;
@ -2328,16 +2328,16 @@ input[type="checkbox"]:focus {
output {
display: block;
padding-top: 7px;
font-size: 13px;
font-size: 16px;
line-height: 1.42857;
color: #555555; }
.form-control {
display: block;
width: 100%;
height: 32px;
height: 36px;
padding: 6px 12px;
font-size: 13px;
font-size: 16px;
line-height: 1.42857;
color: #555555;
background-color: #fff;
@ -2380,7 +2380,7 @@ textarea.form-control {
input[type="time"].form-control,
input[type="datetime-local"].form-control,
input[type="month"].form-control {
line-height: 32px; }
line-height: 36px; }
input[type="date"].input-sm, .input-group-sm > input.form-control[type="date"],
.input-group-sm > input.input-group-addon[type="date"],
.input-group-sm > .input-group-btn > input.btn[type="date"], .input-group-sm > .input-group-btn > input.button[type="date"],
@ -2406,7 +2406,7 @@ textarea.form-control {
.input-group-sm > .input-group-btn > input.button[type="month"],
.input-group-sm
input[type="month"] {
line-height: 30px; }
line-height: 33px; }
input[type="date"].input-lg, .input-group-lg > input.form-control[type="date"],
.input-group-lg > input.input-group-addon[type="date"],
.input-group-lg > .input-group-btn > input.btn[type="date"], .input-group-lg > .input-group-btn > input.button[type="date"],
@ -2432,7 +2432,7 @@ textarea.form-control {
.input-group-lg > .input-group-btn > input.button[type="month"],
.input-group-lg
input[type="month"] {
line-height: 45px; } }
line-height: 49px; } }
.form-group {
margin-bottom: 15px; }
@ -2451,7 +2451,7 @@ textarea.form-control {
cursor: initial; }
.radio label,
.checkbox label {
min-height: 18px;
min-height: 22px;
padding-left: 20px;
margin-bottom: 0;
font-weight: 400;
@ -2491,7 +2491,7 @@ textarea.form-control {
margin-left: 10px; }
.form-control-static {
min-height: 31px;
min-height: 38px;
padding-top: 7px;
padding-bottom: 7px;
margin-bottom: 0; }
@ -2506,17 +2506,17 @@ textarea.form-control {
.input-sm, .input-group-sm > .form-control,
.input-group-sm > .input-group-addon,
.input-group-sm > .input-group-btn > .btn, .input-group-sm > .input-group-btn > .button {
height: 30px;
height: 33px;
padding: 5px 10px;
font-size: 12px;
font-size: 14px;
line-height: 1.5;
border-radius: 3px; }
select.input-sm, .input-group-sm > select.form-control,
.input-group-sm > select.input-group-addon,
.input-group-sm > .input-group-btn > select.btn, .input-group-sm > .input-group-btn > select.button {
height: 30px;
line-height: 30px; }
height: 33px;
line-height: 33px; }
textarea.input-sm, .input-group-sm > textarea.form-control,
.input-group-sm > textarea.input-group-addon,
@ -2529,41 +2529,41 @@ select[multiple].input-sm,
height: auto; }
.form-group-sm .form-control {
height: 30px;
height: 33px;
padding: 5px 10px;
font-size: 12px;
font-size: 14px;
line-height: 1.5;
border-radius: 3px; }
.form-group-sm select.form-control {
height: 30px;
line-height: 30px; }
height: 33px;
line-height: 33px; }
.form-group-sm textarea.form-control,
.form-group-sm select[multiple].form-control {
height: auto; }
.form-group-sm .form-control-static {
height: 30px;
min-height: 30px;
height: 33px;
min-height: 36px;
padding: 6px 10px;
font-size: 12px;
font-size: 14px;
line-height: 1.5; }
.input-lg, .input-group-lg > .form-control,
.input-group-lg > .input-group-addon,
.input-group-lg > .input-group-btn > .btn, .input-group-lg > .input-group-btn > .button {
height: 45px;
height: 49px;
padding: 10px 16px;
font-size: 17px;
font-size: 20px;
line-height: 1.33333;
border-radius: 6px; }
select.input-lg, .input-group-lg > select.form-control,
.input-group-lg > select.input-group-addon,
.input-group-lg > .input-group-btn > select.btn, .input-group-lg > .input-group-btn > select.button {
height: 45px;
line-height: 45px; }
height: 49px;
line-height: 49px; }
textarea.input-lg, .input-group-lg > textarea.form-control,
.input-group-lg > textarea.input-group-addon,
@ -2576,31 +2576,31 @@ select[multiple].input-lg,
height: auto; }
.form-group-lg .form-control {
height: 45px;
height: 49px;
padding: 10px 16px;
font-size: 17px;
font-size: 20px;
line-height: 1.33333;
border-radius: 6px; }
.form-group-lg select.form-control {
height: 45px;
line-height: 45px; }
height: 49px;
line-height: 49px; }
.form-group-lg textarea.form-control,
.form-group-lg select[multiple].form-control {
height: auto; }
.form-group-lg .form-control-static {
height: 45px;
min-height: 35px;
height: 49px;
min-height: 42px;
padding: 11px 16px;
font-size: 17px;
font-size: 20px;
line-height: 1.33333; }
.has-feedback {
position: relative; }
.has-feedback .form-control {
padding-right: 40px; }
padding-right: 45px; }
.form-control-feedback {
position: absolute;
@ -2608,25 +2608,25 @@ select[multiple].input-lg,
right: 0;
z-index: 2;
display: block;
width: 32px;
height: 32px;
line-height: 32px;
width: 36px;
height: 36px;
line-height: 36px;
text-align: center;
pointer-events: none; }
.input-lg + .form-control-feedback, .input-group-lg > .form-control + .form-control-feedback, .input-group-lg > .input-group-addon + .form-control-feedback, .input-group-lg > .input-group-btn > .btn + .form-control-feedback, .input-group-lg > .input-group-btn > .button + .form-control-feedback,
.input-group-lg + .form-control-feedback,
.form-group-lg .form-control + .form-control-feedback {
width: 45px;
height: 45px;
line-height: 45px; }
width: 49px;
height: 49px;
line-height: 49px; }
.input-sm + .form-control-feedback, .input-group-sm > .form-control + .form-control-feedback, .input-group-sm > .input-group-addon + .form-control-feedback, .input-group-sm > .input-group-btn > .btn + .form-control-feedback, .input-group-sm > .input-group-btn > .button + .form-control-feedback,
.input-group-sm + .form-control-feedback,
.form-group-sm .form-control + .form-control-feedback {
width: 30px;
height: 30px;
line-height: 30px; }
width: 33px;
height: 33px;
line-height: 33px; }
.has-success .help-block,
.has-success .control-label,
@ -2716,7 +2716,7 @@ select[multiple].input-lg,
color: #a94442; }
.has-feedback label ~ .form-control-feedback {
top: 23px; }
top: 27px; }
.has-feedback label.sr-only ~ .form-control-feedback {
top: 0; }
@ -2776,7 +2776,7 @@ select[multiple].input-lg,
.form-horizontal .radio,
.form-horizontal .checkbox {
min-height: 25px; }
min-height: 29px; }
.form-horizontal .form-group {
margin-right: -15px;
@ -2799,12 +2799,12 @@ select[multiple].input-lg,
@media (min-width: 768px) {
.form-horizontal .form-group-lg .control-label {
padding-top: 11px;
font-size: 17px; } }
font-size: 20px; } }
@media (min-width: 768px) {
.form-horizontal .form-group-sm .control-label {
padding-top: 6px;
font-size: 12px; } }
font-size: 14px; } }
.btn, .button {
display: inline-block;
@ -2818,7 +2818,7 @@ select[multiple].input-lg,
background-image: none;
border: 1px solid transparent;
padding: 6px 12px;
font-size: 13px;
font-size: 16px;
line-height: 1.42857;
border-radius: 4px;
-webkit-user-select: none;
@ -3086,19 +3086,19 @@ fieldset[disabled] a.button {
.btn-lg, .btn-group-lg > .btn, .btn-group-lg > .button {
padding: 10px 16px;
font-size: 17px;
font-size: 20px;
line-height: 1.33333;
border-radius: 6px; }
.btn-sm, .btn-group-sm > .btn, .btn-group-sm > .button {
padding: 5px 10px;
font-size: 12px;
font-size: 14px;
line-height: 1.5;
border-radius: 3px; }
.btn-xs, .btn-group-xs > .btn, .btn-group-xs > .button {
padding: 1px 5px;
font-size: 12px;
font-size: 14px;
line-height: 1.5;
border-radius: 3px; }
@ -3172,7 +3172,7 @@ tbody.collapse.in {
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
font-size: 13px;
font-size: 16px;
text-align: left;
list-style: none;
background-color: #fff;
@ -3187,7 +3187,7 @@ tbody.collapse.in {
left: auto; }
.dropdown-menu .divider {
height: 1px;
margin: 8px 0;
margin: 10px 0;
overflow: hidden;
background-color: #e5e5e5; }
.dropdown-menu > li > a {
@ -3236,7 +3236,7 @@ tbody.collapse.in {
.dropdown-header {
display: block;
padding: 3px 20px;
font-size: 12px;
font-size: 14px;
line-height: 1.42857;
color: #777777;
white-space: nowrap; }
@ -3496,7 +3496,7 @@ tbody.collapse.in {
.input-group-addon {
padding: 6px 12px;
font-size: 13px;
font-size: 16px;
font-weight: 400;
line-height: 1;
color: #555555;
@ -3508,13 +3508,13 @@ tbody.collapse.in {
.input-group-sm > .input-group-addon,
.input-group-sm > .input-group-btn > .input-group-addon.btn, .input-group-sm > .input-group-btn > .input-group-addon.button {
padding: 5px 10px;
font-size: 12px;
font-size: 14px;
border-radius: 3px; }
.input-group-addon.input-lg,
.input-group-lg > .input-group-addon,
.input-group-lg > .input-group-btn > .input-group-addon.btn, .input-group-lg > .input-group-btn > .input-group-addon.button {
padding: 10px 16px;
font-size: 17px;
font-size: 20px;
border-radius: 6px; }
.input-group-addon input[type="radio"],
.input-group-addon input[type="checkbox"] {
@ -3607,7 +3607,7 @@ tbody.collapse.in {
border-color: #ddd; }
.nav .nav-divider {
height: 1px;
margin: 8px 0;
margin: 10px 0;
overflow: hidden;
background-color: #e5e5e5; }
.nav > li > a > img {
@ -3701,7 +3701,7 @@ tbody.collapse.in {
.navbar {
position: relative;
min-height: 50px;
margin-bottom: 18px;
margin-bottom: 22px;
border: 1px solid transparent; }
.navbar:before, .navbar:after {
display: table;
@ -3806,9 +3806,9 @@ tbody.collapse.in {
.navbar-brand {
float: left;
height: 50px;
padding: 16px 15px;
font-size: 17px;
line-height: 18px; }
padding: 14px 15px;
font-size: 20px;
line-height: 22px; }
.navbar-brand:hover, .navbar-brand:focus {
text-decoration: none; }
.navbar-brand > img {
@ -3843,11 +3843,11 @@ tbody.collapse.in {
display: none; } }
.navbar-nav {
margin: 8px -15px; }
margin: 7px -15px; }
.navbar-nav > li > a {
padding-top: 10px;
padding-bottom: 10px;
line-height: 18px; }
line-height: 22px; }
@media (max-width: 767px) {
.navbar-nav .open .dropdown-menu {
position: static;
@ -3861,7 +3861,7 @@ tbody.collapse.in {
.navbar-nav .open .dropdown-menu .dropdown-header {
padding: 5px 15px 5px 25px; }
.navbar-nav .open .dropdown-menu > li > a {
line-height: 18px; }
line-height: 22px; }
.navbar-nav .open .dropdown-menu > li > a:hover, .navbar-nav .open .dropdown-menu > li > a:focus {
background-image: none; } }
@media (min-width: 768px) {
@ -3871,8 +3871,8 @@ tbody.collapse.in {
.navbar-nav > li {
float: left; }
.navbar-nav > li > a {
padding-top: 16px;
padding-bottom: 16px; } }
padding-top: 14px;
padding-bottom: 14px; } }
.navbar-form {
padding: 10px 15px;
@ -3882,8 +3882,8 @@ tbody.collapse.in {
border-bottom: 1px solid transparent;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
margin-top: 9px;
margin-bottom: 9px; }
margin-top: 7px;
margin-bottom: 7px; }
@media (min-width: 768px) {
.navbar-form .form-group {
display: inline-block;
@ -3951,18 +3951,18 @@ tbody.collapse.in {
border-bottom-left-radius: 0; }
.navbar-btn {
margin-top: 9px;
margin-bottom: 9px; }
margin-top: 7px;
margin-bottom: 7px; }
.navbar-btn.btn-sm, .btn-group-sm > .navbar-btn.btn, .btn-group-sm > .navbar-btn.button {
margin-top: 10px;
margin-bottom: 10px; }
margin-top: 8.5px;
margin-bottom: 8.5px; }
.navbar-btn.btn-xs, .btn-group-xs > .navbar-btn.btn, .btn-group-xs > .navbar-btn.button {
margin-top: 14px;
margin-bottom: 14px; }
.navbar-text {
margin-top: 16px;
margin-bottom: 16px; }
margin-top: 14px;
margin-bottom: 14px; }
@media (min-width: 768px) {
.navbar-text {
float: left;
@ -4104,7 +4104,7 @@ tbody.collapse.in {
.breadcrumb {
padding: 8px 15px;
margin-bottom: 18px;
margin-bottom: 22px;
list-style: none;
background-color: #f5f5f5;
border-radius: 4px; }
@ -4120,7 +4120,7 @@ tbody.collapse.in {
.pagination {
display: inline-block;
padding-left: 0;
margin: 18px 0;
margin: 22px 0;
border-radius: 4px; }
.pagination > li {
display: inline; }
@ -4174,7 +4174,7 @@ tbody.collapse.in {
.pagination-lg > li > a,
.pagination-lg > li > span {
padding: 10px 16px;
font-size: 17px;
font-size: 20px;
line-height: 1.33333; }
.pagination-lg > li:first-child > a,
@ -4190,7 +4190,7 @@ tbody.collapse.in {
.pagination-sm > li > a,
.pagination-sm > li > span {
padding: 5px 10px;
font-size: 12px;
font-size: 14px;
line-height: 1.5; }
.pagination-sm > li:first-child > a,
@ -4205,7 +4205,7 @@ tbody.collapse.in {
.pager {
padding-left: 0;
margin: 18px 0;
margin: 22px 0;
text-align: center;
list-style: none; }
.pager:before, .pager:after {
@ -4296,7 +4296,7 @@ a.label:hover, a.label:focus {
display: inline-block;
min-width: 10px;
padding: 3px 7px;
font-size: 12px;
font-size: 14px;
font-weight: bold;
line-height: 1;
color: #fff;
@ -4342,7 +4342,7 @@ a.badge:hover, a.badge:focus {
color: inherit; }
.jumbotron p {
margin-bottom: 15px;
font-size: 20px;
font-size: 24px;
font-weight: 200; }
.jumbotron > hr {
border-top-color: #d5d5d5; }
@ -4363,12 +4363,12 @@ a.badge:hover, a.badge:focus {
padding-left: 60px; }
.jumbotron h1,
.jumbotron .h1 {
font-size: 59px; } }
font-size: 72px; } }
.thumbnail {
display: block;
padding: 4px;
margin-bottom: 18px;
margin-bottom: 22px;
line-height: 1.42857;
background-color: #fff;
border: 1px solid #ddd;
@ -4394,7 +4394,7 @@ a.thumbnail.active {
.alert {
padding: 15px;
margin-bottom: 18px;
margin-bottom: 22px;
border: 1px solid transparent;
border-radius: 4px; }
.alert h4 {
@ -4467,8 +4467,8 @@ a.thumbnail.active {
background-position: 0 0; } }
.progress {
height: 18px;
margin-bottom: 18px;
height: 22px;
margin-bottom: 22px;
overflow: hidden;
background-color: #f5f5f5;
border-radius: 4px;
@ -4479,8 +4479,8 @@ a.thumbnail.active {
float: left;
width: 0%;
height: 100%;
font-size: 12px;
line-height: 18px;
font-size: 14px;
line-height: 22px;
color: #fff;
text-align: center;
background-color: #337ab7;
@ -4737,7 +4737,7 @@ button.list-group-item-danger {
line-height: 1.3; }
.panel {
margin-bottom: 18px;
margin-bottom: 22px;
background-color: #fff;
border: 1px solid transparent;
border-radius: 4px;
@ -4763,7 +4763,7 @@ button.list-group-item-danger {
.panel-title {
margin-top: 0;
margin-bottom: 0;
font-size: 15px;
font-size: 18px;
color: inherit; }
.panel-title > a,
.panel-title > small,
@ -4938,7 +4938,7 @@ button.list-group-item-danger {
border: 0; }
.panel-group {
margin-bottom: 18px; }
margin-bottom: 22px; }
.panel-group .panel {
margin-bottom: 0;
border-radius: 4px; }
@ -5086,7 +5086,7 @@ button.list-group-item-danger {
.close {
float: right;
font-size: 19.5px;
font-size: 24px;
font-weight: bold;
line-height: 1;
color: #000;
@ -5249,7 +5249,7 @@ button.close {
word-spacing: normal;
word-wrap: normal;
white-space: normal;
font-size: 12px;
font-size: 14px;
filter: alpha(opacity=0);
opacity: 0; }
.tooltip.in {
@ -5354,7 +5354,7 @@ button.close {
word-spacing: normal;
word-wrap: normal;
white-space: normal;
font-size: 13px;
font-size: 16px;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ccc;
@ -5438,7 +5438,7 @@ button.close {
.popover-title {
padding: 8px 14px;
margin: 0;
font-size: 13px;
font-size: 16px;
background-color: #f7f7f7;
border-bottom: 1px solid #ebebeb;
border-radius: 5px 5px 0 0; }
@ -6029,7 +6029,7 @@ body {
.button {
padding: 10px;
padding-top: 11px;
border-radius: 2px;
border-radius: 24px;
border: 0;
letter-spacing: .5px;
outline: none;
@ -6037,6 +6037,9 @@ body {
.button > .glyphicon, .button > .tick {
top: 2px;
margin-right: 2px; }
.button.button-primary {
width: 200px;
height: 48px; }
.button[disabled] {
background-color: #3a3c41;
color: #787c7f;
@ -6182,7 +6185,8 @@ body {
.modal-footer {
flex-grow: 0;
border: 0; }
border: 0;
text-align: center; }
.modal {
display: flex !important;
@ -6594,8 +6598,7 @@ svg-icon > img[disabled] {
.page-finish .label {
display: inline-block; }
.page-finish .label > b {
color: #ddd;
font-family: monospace; }
color: #ddd; }
.page-finish .soft {
color: #ddd; }
@ -9858,39 +9861,65 @@ readers do not read off random characters that represent icons */
font-weight: 900; }
@font-face {
font-family: Roboto;
src: url("../../../node_modules/roboto-fontface/fonts/roboto/Roboto-Thin.woff");
font-weight: 100;
font-style: normal; }
font-family: 'Nunito';
src: url("Nunito-Regular.eot");
src: url("./fonts/Nunito-Regular.eot?#iefix") format("embedded-opentype"), url("./fonts/Nunito-Regular.woff2") format("woff2"), url("./fonts/Nunito-Regular.woff") format("woff"), url("./fonts/Nunito-Regular.ttf") format("truetype");
font-weight: normal;
font-style: normal;
font-display: block; }
@font-face {
font-family: Roboto;
src: url("../../../node_modules/roboto-fontface/fonts/roboto/Roboto-Light.woff");
font-family: 'Nunito';
src: url("Nunito-Bold.eot");
src: url("./fonts/Nunito-Bold.eot?#iefix") format("embedded-opentype"), url("./fonts/Nunito-Bold.woff2") format("woff2"), url("./fonts/Nunito-Bold.woff") format("woff"), url("./fonts/Nunito-Bold.ttf") format("truetype");
font-weight: bold;
font-style: normal;
font-display: block; }
@font-face {
font-family: 'Nunito';
src: url("Nunito-Light.eot");
src: url("./fonts/Nunito-Light.eot?#iefix") format("embedded-opentype"), url("./fonts/Nunito-Light.woff2") format("woff2"), url("./fonts/Nunito-Light.woff") format("woff"), url("./fonts/Nunito-Light.ttf") format("truetype");
font-weight: 300;
font-style: normal; }
font-style: normal;
font-display: block; }
@font-face {
font-family: Roboto;
src: url("../../../node_modules/roboto-fontface/fonts/roboto/Roboto-Regular.woff");
font-weight: 400;
font-style: normal; }
font-family: 'CircularStd';
src: url("./fonts/CircularStd-Bold.eot");
src: url("./fonts/CircularStd-Bold.eot?#iefix") format("embedded-opentype"), url("./fonts/CircularStd-Bold.woff2") format("woff2"), url("./fonts/CircularStd-Bold.woff") format("woff"), url("./fonts/CircularStd-Bold.ttf") format("truetype");
font-weight: bold;
font-style: normal;
font-display: block; }
@font-face {
font-family: Roboto;
src: url("../../../node_modules/roboto-fontface/fonts/roboto/Roboto-Medium.woff");
font-family: 'CircularStd';
src: url("./fonts/CircularStd-Book.eot");
src: url("./fonts/CircularStd-Book.eot?#iefix") format("embedded-opentype"), url("./fonts/CircularStd-Book.woff2") format("woff2"), url("./fonts/CircularStd-Book.woff") format("woff"), url("./fonts/CircularStd-Book.ttf") format("truetype");
font-weight: 500;
font-style: normal; }
font-style: normal;
font-display: block; }
@font-face {
font-family: Roboto;
src: url("../../../node_modules/roboto-fontface/fonts/roboto/Roboto-Bold.woff");
font-weight: 700;
font-style: normal; }
font-family: 'CircularStd';
src: url("./fonts/CircularStd-Medium.eot");
src: url("./fonts/CircularStd-Medium.eot?#iefix") format("embedded-opentype"), url("./fonts/CircularStd-Medium.woff2") format("woff2"), url("./fonts/CircularStd-Medium.woff") format("woff"), url("./fonts/CircularStd-Medium.ttf") format("truetype");
font-weight: 400;
font-style: normal;
font-display: block; }
.circular {
font-family: 'CircularStd';
font-weight: 500; }
.nunito {
font-family: 'Nunito'; }
body {
letter-spacing: 0.5px;
display: flex;
flex-direction: column; }
flex-direction: column;
font-family: 'CircularStd'; }
body > header {
flex: 0 0 auto; }
body > main {
@ -9899,11 +9928,6 @@ body {
body > footer {
flex: 0 0 auto; }
body,
.tooltip,
.popover {
font-family: Roboto; }
.section-footer-main {
display: flex;
align-items: center;
@ -9949,8 +9973,7 @@ body,
.section-header {
text-align: right;
padding: 5px 8px;
font-size: 15px; }
padding: 5px 8px; }
.section-header > .button {
padding-left: 3px;
padding-right: 3px; }

1
npm-shrinkwrap.json generated
View File

@ -1041,6 +1041,7 @@
"version": "16.8.4",
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.8.4.tgz",
"integrity": "sha512-eIRpEW73DCzPIMaNBDP5pPIpK1KXyZwNgfxiVagb5iGiz6da+9A5hslSX6GAQKdO7SayVCS/Fr2kjqprgAvkfA==",
"dev": true,
"requires": {
"@types/react": "*"
}

View File

@ -39,7 +39,6 @@
],
"dependencies": {
"@fortawesome/fontawesome-free-webfonts": "^1.0.9",
"@types/react-dom": "^16.8.4",
"angular": "1.7.6",
"angular-if-state": "^1.0.0",
"angular-moment": "^1.0.1",
@ -86,6 +85,7 @@
"@babel/plugin-proposal-function-bind": "^7.2.0",
"@babel/preset-env": "^7.2.0",
"@babel/preset-react": "^7.0.0",
"@types/react-dom": "^16.8.4",
"acorn": "^6.0.5",
"angular-mocks": "1.7.6",
"babel-loader": "^8.0.4",