Adding toolbar and checkBox style fixes
This commit is contained in:
VakarisZ
parent
17a51cd92e
commit
7b8a758541
File diff suppressed because it is too large
Load Diff
|
|
@ -73,6 +73,7 @@
|
|||
"json-loader": "^0.5.7",
|
||||
"jwt-decode": "^2.2.0",
|
||||
"moment": "^2.22.2",
|
||||
"node-sass": "^4.11.0",
|
||||
"normalize.css": "^8.0.0",
|
||||
"npm": "^6.4.1",
|
||||
"prop-types": "^15.6.2",
|
||||
|
|
@ -92,7 +93,9 @@
|
|||
"react-router-dom": "^4.3.1",
|
||||
"react-table": "^6.8.6",
|
||||
"react-toggle": "^4.0.1",
|
||||
"react-tooltip-lite": "^1.9.1",
|
||||
"redux": "^4.0.0",
|
||||
"sass-loader": "^7.1.0",
|
||||
"sha3": "^2.0.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ let renderTechnique = function (technique) {
|
|||
if (technique == null){
|
||||
return (<div></div>)
|
||||
} else {
|
||||
return (<div>{technique.title}</div>)
|
||||
return (<CheckBox>{technique.title}</CheckBox>)
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -59,7 +59,8 @@ class MatrixComponent extends AuthComponent {
|
|||
return {
|
||||
Header: key,
|
||||
id: key,
|
||||
accessor: x => renderTechnique(x[key].technique)
|
||||
accessor: x => renderTechnique(x[key].technique),
|
||||
style: { 'white-space': 'unset' }
|
||||
};
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
import '../../styles/CheckBox.scss'
|
||||
import React from 'react';
|
||||
import MatrixComponent from "../attck/MatrixComponent";
|
||||
import Tooltip from 'react-tooltip-lite';
|
||||
|
||||
class Checkbox extends React.PureComponent {
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
checked: false,
|
||||
|
|
@ -46,17 +46,22 @@ class Checkbox extends React.PureComponent {
|
|||
render() {
|
||||
|
||||
const cl = this.composeStateClasses('ui-checkbox-btn');
|
||||
|
||||
let tooltip = "";
|
||||
if (this.props.hasOwnProperty("tooltipContent") && this.props.hasOwnProperty("tooltipDirection")){
|
||||
tooltip = (<Tooltip content={this.props.tooltipContent} direction={this.props.tooltipDirection}
|
||||
className="tooltip" tipContentClassName="">)
|
||||
}
|
||||
}
|
||||
return (
|
||||
<div
|
||||
className={ cl }
|
||||
onClick={ this.toggleChecked }>
|
||||
|
||||
<Tooltip content={this.props.} direction="down" className="target" tipContentClassName="">
|
||||
<input className="ui ui-checkbox" type="checkbox" checked={this.state.checked} />
|
||||
{
|
||||
this.state.checked &&
|
||||
<i className="icon">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24">
|
||||
<svg>
|
||||
<path d="M21 5q0.43 0 0.715 0.285t0.285 0.715q0 0.422-0.289 0.711l-12 12q-0.289 0.289-0.711 0.289t-0.711-0.289l-6-6q-0.289-0.289-0.289-0.711 0-0.43 0.285-0.715t0.715-0.285q0.422 0 0.711 0.289l5.289 5.297 11.289-11.297q0.289-0.289 0.711-0.289z"></path>
|
||||
</svg>
|
||||
</i>
|
||||
|
|
@ -64,7 +69,7 @@ class Checkbox extends React.PureComponent {
|
|||
{
|
||||
!this.state.checked &&
|
||||
<i className="icon">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24">
|
||||
<svg>
|
||||
<path d="M19 4q0.43 0 0.715 0.285t0.285 0.715q0 0.422-0.289 0.711l-6.297 6.289 6.297 6.289q0.289 0.289 0.289 0.711 0 0.43-0.285 0.715t-0.715 0.285q-0.422 0-0.711-0.289l-6.289-6.297-6.289 6.297q-0.289 0.289-0.711 0.289-0.43 0-0.715-0.285t-0.285-0.715q0-0.422 0.289-0.711l6.297-6.289-6.297-6.289q-0.289-0.289-0.289-0.711 0-0.43 0.285-0.715t0.715-0.285q0.422 0 0.711 0.289l6.289 6.297 6.289-6.297q0.289-0.289 0.711-0.289z"></path>
|
||||
</svg>
|
||||
</i>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
// readable
|
||||
$desired-line-height: 24px;
|
||||
$desired-height: 36px;
|
||||
$desired-line-height: 100%;
|
||||
$desired-height: 100%;
|
||||
$text-offset: 2px;
|
||||
|
||||
// usable
|
||||
|
|
@ -13,14 +13,15 @@ $light-grey: #EAF4F4;
|
|||
$medium-grey: #7B9EA8;
|
||||
$dark-grey: #7B9EA8;
|
||||
$green: #44CF6C;
|
||||
$black: #000000;
|
||||
|
||||
.ui-checkbox-btn {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
||||
padding: (($dh - $dlh) / 2) ($dlh / 2);
|
||||
border-radius: $dh / 2; // overcompensate
|
||||
background-color: rgba(red, .6);
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
input { display: none; } // turn off, but not forgotten
|
||||
|
||||
|
|
@ -33,17 +34,13 @@ $green: #44CF6C;
|
|||
|
||||
.text {
|
||||
font-size: 14px;
|
||||
line-height: $dlh - $to;
|
||||
padding-top: $to;
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
// color states
|
||||
&.is-unchecked {
|
||||
border: 1px solid $medium-grey;
|
||||
background-color: transparent;
|
||||
color: $dark-grey;
|
||||
fill: $dark-grey;
|
||||
color: $black;
|
||||
fill: $black;
|
||||
}
|
||||
|
||||
&.is-checked {
|
||||
|
|
@ -57,8 +54,6 @@ $green: #44CF6C;
|
|||
.icon {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: $dlh - 4;
|
||||
height: $dlh;
|
||||
|
||||
svg {
|
||||
position: absolute;
|
||||
|
|
|
|||
|
|
@ -18,6 +18,14 @@ module.exports = {
|
|||
'css-loader'
|
||||
]
|
||||
},
|
||||
{
|
||||
test: /\.scss$/,
|
||||
use: [
|
||||
'style-loader',
|
||||
'css-loader',
|
||||
'sass-loader'
|
||||
]
|
||||
},
|
||||
{
|
||||
test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
|
||||
use: {
|
||||
|
|
|
|||
Loading…
Reference in New Issue