mirror of
https://github.com/strapi/strapi.git
synced 2025-07-30 20:39:05 +00:00
styled components migration
This commit is contained in:
Virginie Ky
parent
4f45134dd1
commit
a6b57689fb
@ -1,34 +1,36 @@
|
||||
/**
|
||||
*
|
||||
* BoundRoute
|
||||
*
|
||||
*/
|
||||
*
|
||||
* BoundRoute
|
||||
*
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { get, includes, map, tail, toLower } from 'lodash';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import PropTypes from 'prop-types';
|
||||
import cn from 'classnames';
|
||||
import styles from './styles.scss';
|
||||
|
||||
import { Header, Path, Verb, Wrapper } from './Components';
|
||||
|
||||
function BoundRoute({ route }) {
|
||||
const title = get(route, 'handler');
|
||||
const formattedRoute = get(route, 'path') ? tail(get(route, 'path').split('/')) : [];
|
||||
const [ controller = '', action = '' ] = title ? title.split('.') : [];
|
||||
const formattedRoute = get(route, 'path')
|
||||
? tail(get(route, 'path').split('/'))
|
||||
: [];
|
||||
const [controller = '', action = ''] = title ? title.split('.') : [];
|
||||
|
||||
return (
|
||||
<div className="col-md-12">
|
||||
<div className={styles.title}>
|
||||
<Header>
|
||||
<FormattedMessage id="users-permissions.BoundRoute.title" />
|
||||
|
||||
<span>{controller}</span>
|
||||
<span>.{action} </span>
|
||||
</div>
|
||||
<div className={styles.boundRoute}>
|
||||
<div className={cn(styles.verb, styles[toLower(get(route, 'method'))])}>
|
||||
</Header>
|
||||
<Wrapper>
|
||||
<Verb className={toLower(get(route, 'method'))}>
|
||||
{get(route, 'method')}
|
||||
</div>
|
||||
<div className={styles.path}>
|
||||
</Verb>
|
||||
<Path>
|
||||
{map(formattedRoute, value => (
|
||||
<span
|
||||
key={value}
|
||||
@ -37,8 +39,8 @@ function BoundRoute({ route }) {
|
||||
/{value}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</Path>
|
||||
</Wrapper>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,59 +0,0 @@
|
||||
.boundRoute {
|
||||
display: flex;
|
||||
height: 2.4rem;
|
||||
border-radius: 3px;
|
||||
background-color: #E9EAEB;
|
||||
line-height: 2.4rem;
|
||||
}
|
||||
|
||||
.verb {
|
||||
padding: 0 1rem;
|
||||
border-radius: 3px;
|
||||
color: #FFFFFF;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.path {
|
||||
padding: 0 1rem;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #333740;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-bottom: 3rem;
|
||||
padding-top: 1.1rem;
|
||||
color: #333740;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
|
||||
> span:not(:first-child) {
|
||||
color: #787E8F;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
> span:last-child {
|
||||
color: #1642E1;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.get {
|
||||
background-color: #008DFE;
|
||||
}
|
||||
|
||||
.post {
|
||||
background-color: #69BA05;
|
||||
}
|
||||
|
||||
.put {
|
||||
background-color: #F68E0E;
|
||||
}
|
||||
|
||||
.delete {
|
||||
background-color: #F64D0A;
|
||||
}
|
||||
@ -5,6 +5,12 @@ const Wrapper = styled.div`
|
||||
background: #ffffff;
|
||||
opacity: none;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
.checkbox-wrapper {
|
||||
font-size: 13px;
|
||||
> div {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const Header = styled.div`
|
||||
@ -18,7 +24,6 @@ const Header = styled.div`
|
||||
`;
|
||||
|
||||
const Label = styled.label`
|
||||
position: relative;
|
||||
margin-right: 0px;
|
||||
margin-left: 10px;
|
||||
font-weight: 400 !important;
|
||||
|
||||
@ -7,12 +7,10 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { get, map } from 'lodash';
|
||||
import cn from 'classnames';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import pluginId from '../../pluginId';
|
||||
|
||||
import InputCheckbox from '../InputCheckboxPlugin';
|
||||
import styles from './styles.scss';
|
||||
|
||||
import { Header, Label, Separator, Wrapper } from './Components';
|
||||
|
||||
@ -55,10 +53,10 @@ class Controller extends React.Component {
|
||||
<div>{this.props.name}</div>
|
||||
<Separator />
|
||||
<div>
|
||||
<div className={cn(styles.inputCheckbox)}>
|
||||
<div className="checkbox-wrapper">
|
||||
<div className="form-check">
|
||||
<Label
|
||||
className={`${this.areAllActionsSelected() &&
|
||||
className={`form-check-label ${this.areAllActionsSelected() &&
|
||||
'checked'} ${!this.areAllActionsSelected() &&
|
||||
this.hasSomeActionsSelected() &&
|
||||
'some-checked'}`}
|
||||
|
||||
@ -1,81 +0,0 @@
|
||||
.checked {
|
||||
&:after {
|
||||
content: '\f00c';
|
||||
position: absolute;
|
||||
top: 0px; left: 2px;
|
||||
font-size: 10px;
|
||||
font-family: 'FontAwesome';
|
||||
font-weight: 100;
|
||||
color: #1C5DE7;
|
||||
transition: all .2s;
|
||||
|
||||
}
|
||||
}
|
||||
.someChecked {
|
||||
&:after {
|
||||
content: '\f068';
|
||||
position: absolute;
|
||||
top: 0px; left: 3px;
|
||||
font-size: 10px;
|
||||
font-family: 'FontAwesome';
|
||||
font-weight: 100;
|
||||
color: #1C5DE7;
|
||||
}
|
||||
}
|
||||
|
||||
.controller {
|
||||
padding: 1px 43px 0 28px;
|
||||
background: #ffffff;
|
||||
opacity: none;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.controllerHeader {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 1.5rem;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
line-height: 16px;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.inputCheckbox {
|
||||
font-size: 13px;
|
||||
> div {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
margin-right: 0px;
|
||||
margin-left: 10px;
|
||||
font-weight: 400 !important;
|
||||
cursor: pointer;
|
||||
|
||||
> input {
|
||||
display: none;
|
||||
margin-right: 9px;
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left:0px;
|
||||
top: 1px;
|
||||
width: 14px; height: 14px;
|
||||
border: 1px solid rgba(16,22,34,0.15);
|
||||
background-color: #FDFDFD;
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.separator {
|
||||
height: 1px;
|
||||
flex-grow: 2;
|
||||
margin-top: 8px;
|
||||
margin-right: 15px;
|
||||
margin-left: 15px;
|
||||
background-color: #F6F6F6;
|
||||
}
|
||||
|
||||
@ -6,9 +6,8 @@
|
||||
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import cn from 'classnames';
|
||||
|
||||
import styles from './styles.scss';
|
||||
import { Label, Wrapper } from './Components';
|
||||
|
||||
class InputCheckboxPlugin extends React.Component {
|
||||
// eslint-disable-line react/prefer-stateless-function
|
||||
@ -65,8 +64,8 @@ class InputCheckboxPlugin extends React.Component {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div
|
||||
className={cn(styles.inputCheckbox, 'col-md-4')}
|
||||
<Wrapper
|
||||
className="col-md-4"
|
||||
onMouseEnter={() => {
|
||||
if (this.props.value) {
|
||||
this.setState({ showCog: true });
|
||||
@ -75,17 +74,12 @@ class InputCheckboxPlugin extends React.Component {
|
||||
onMouseLeave={() => this.setState({ showCog: false })}
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
'form-check',
|
||||
this.state.showBackground ? styles.highlighted : ''
|
||||
)}
|
||||
className={`form-check ${
|
||||
this.state.showBackground ? 'highlighted' : ''
|
||||
}`}
|
||||
>
|
||||
<label
|
||||
className={cn(
|
||||
'form-check-label',
|
||||
styles.label,
|
||||
this.props.value ? styles.checked : ''
|
||||
)}
|
||||
<Label
|
||||
className={`form-check-label ${this.props.value ? 'checked' : ''}`}
|
||||
htmlFor={this.props.name}
|
||||
>
|
||||
<input
|
||||
@ -97,14 +91,14 @@ class InputCheckboxPlugin extends React.Component {
|
||||
type="checkbox"
|
||||
/>
|
||||
{this.props.label}
|
||||
</label>
|
||||
</Label>
|
||||
{this.state.showCog || this.state.showBackground ? (
|
||||
<i className="fa fa-cog" onClick={this.handleClick} />
|
||||
) : (
|
||||
''
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Wrapper>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,58 +0,0 @@
|
||||
.inputCheckbox {
|
||||
margin-bottom: .5rem;
|
||||
padding-left: 0;
|
||||
font-size: 13px;
|
||||
|
||||
> div {
|
||||
height: 26px;
|
||||
padding-left: 15px;
|
||||
line-height: 26px;
|
||||
|
||||
> i {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 10px;
|
||||
color: #787E8F;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
margin-left: 9px;
|
||||
cursor: pointer;
|
||||
> input {
|
||||
display: none;
|
||||
margin-right: 9px;
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left:15px; top: 6px;
|
||||
width: 14px; height: 14px;
|
||||
border: 1px solid rgba(16,22,34,0.15);
|
||||
background-color: #FDFDFD;
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.checked {
|
||||
&:after {
|
||||
content: '\f00c';
|
||||
position: absolute;
|
||||
top: 0; left: 17px;
|
||||
font-size: 10px;
|
||||
font-family: 'FontAwesome';
|
||||
font-weight: 100;
|
||||
color: #1C5DE7;
|
||||
transition: all .2s;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.highlighted {
|
||||
border-radius: 3px;
|
||||
background-color: #E9EAEB;
|
||||
font-weight: 600;
|
||||
}
|
||||
@ -15,6 +15,8 @@ import InputSearchLi from '../InputSearchLi';
|
||||
|
||||
import styles from './styles.scss';
|
||||
|
||||
import { Wrapper } from './Components';
|
||||
|
||||
class InputSearchContainer extends React.Component {
|
||||
// eslint-disable-line react/prefer-stateless-function
|
||||
state = {
|
||||
@ -99,9 +101,9 @@ class InputSearchContainer extends React.Component {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className={cn(styles.inputSearch, 'col-md-6')}>
|
||||
<Wrapper className="col-md-6">
|
||||
<Label htmlFor={this.props.name} message={this.props.label} />
|
||||
<div className={cn('input-group')}>
|
||||
<div className="input-group">
|
||||
<span
|
||||
className={cn(
|
||||
'input-group-addon',
|
||||
@ -148,7 +150,7 @@ class InputSearchContainer extends React.Component {
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</Wrapper>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,19 +1,19 @@
|
||||
.addon {
|
||||
width: 3.2rem;
|
||||
height: 3.4rem;
|
||||
margin-top: .9rem;
|
||||
margin-top: 0.9rem;
|
||||
background-color: rgba(16, 22, 34, 0.02);
|
||||
border: 1px solid #E3E9F3;
|
||||
border: 1px solid #e3e9f3;
|
||||
border-right: 0;
|
||||
border-bottom: 0px;
|
||||
border-radius: 0.25rem;
|
||||
border-bottom-left-radius: 0!important;
|
||||
border-bottom-right-radius: 0!important;
|
||||
color: #B3B5B9;
|
||||
border-bottom-left-radius: 0 !important;
|
||||
border-bottom-right-radius: 0 !important;
|
||||
color: #b3b5b9;
|
||||
line-height: 3.2rem;
|
||||
font-size: 1.3rem;
|
||||
font-family: 'Lato';
|
||||
font-weight: 600!important;
|
||||
font-weight: 600 !important;
|
||||
text-transform: capitalize;
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
@ -23,7 +23,7 @@
|
||||
display: inline-table;
|
||||
margin-top: 0px;
|
||||
margin-left: 2px;
|
||||
color: #B3B5B9;
|
||||
color: #b3b5b9;
|
||||
font-weight: 900;
|
||||
font-size: 14px;
|
||||
font-family: 'FontAwesome';
|
||||
@ -31,42 +31,42 @@
|
||||
}
|
||||
}
|
||||
|
||||
.inputSearch {
|
||||
min-width: 200px;
|
||||
margin-bottom: 1.5rem;
|
||||
font-size: 1.3rem;
|
||||
// .inputSearch {
|
||||
// min-width: 200px;
|
||||
// margin-bottom: 1.5rem;
|
||||
// font-size: 1.3rem;
|
||||
|
||||
label {
|
||||
margin-bottom: 0;
|
||||
font-weight: 500;
|
||||
}
|
||||
// label {
|
||||
// margin-bottom: 0;
|
||||
// font-weight: 500;
|
||||
// }
|
||||
|
||||
input {
|
||||
height: 3.4rem;
|
||||
margin-top: .9rem;
|
||||
padding-left: 1rem;
|
||||
background-size: 0 !important;
|
||||
border: 1px solid #E3E9F3;
|
||||
border-left: 0;
|
||||
border-bottom: 0px;
|
||||
border-radius: 0.25rem;
|
||||
border-bottom-right-radius: 0;
|
||||
line-height: 3.4rem;
|
||||
font-size: 1.3rem;
|
||||
font-family: 'Lato' !important;
|
||||
box-shadow: 0px 2px 1px rgba(104, 118, 142, 0.05);
|
||||
&:focus {
|
||||
border-color: #78caff;
|
||||
}
|
||||
}
|
||||
}
|
||||
// input {
|
||||
// height: 3.4rem;
|
||||
// margin-top: .9rem;
|
||||
// padding-left: 1rem;
|
||||
// background-size: 0 !important;
|
||||
// border: 1px solid #E3E9F3;
|
||||
// border-left: 0;
|
||||
// border-bottom: 0px;
|
||||
// border-radius: 0.25rem;
|
||||
// border-bottom-right-radius: 0;
|
||||
// line-height: 3.4rem;
|
||||
// font-size: 1.3rem;
|
||||
// font-family: 'Lato' !important;
|
||||
// box-shadow: 0px 2px 1px rgba(104, 118, 142, 0.05);
|
||||
// &:focus {
|
||||
// border-color: #78caff;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
.ulContainer {
|
||||
height: 16.3rem;
|
||||
overflow: scroll;
|
||||
border: 1px solid #E3E9F3;
|
||||
border-top-left-radius: 0!important;
|
||||
border-top-right-radius: 0!important;
|
||||
border: 1px solid #e3e9f3;
|
||||
border-top-left-radius: 0 !important;
|
||||
border-top-right-radius: 0 !important;
|
||||
border-top: none;
|
||||
border-radius: 0.25rem;
|
||||
> ul {
|
||||
|
||||
@ -5,7 +5,6 @@
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import cn from 'classnames';
|
||||
import PropTypes from 'prop-types';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import { get, isEmpty, map, takeRight, toLower, without } from 'lodash';
|
||||
@ -13,7 +12,7 @@ import { get, isEmpty, map, takeRight, toLower, without } from 'lodash';
|
||||
import { InputsIndex as Input } from 'strapi-helper-plugin';
|
||||
import BoundRoute from '../BoundRoute';
|
||||
|
||||
import styles from './styles.scss';
|
||||
import { Header, Wrapper } from './Components';
|
||||
|
||||
class Policies extends React.Component {
|
||||
// eslint-disable-line react/prefer-stateless-function
|
||||
@ -27,7 +26,7 @@ class Policies extends React.Component {
|
||||
this.props.inputSelectName.split('.'),
|
||||
'permissions',
|
||||
'controllers',
|
||||
'policy',
|
||||
'policy'
|
||||
);
|
||||
const controllerRoutes = get(
|
||||
this.props.routes,
|
||||
@ -35,22 +34,22 @@ class Policies extends React.Component {
|
||||
this.props.inputSelectName.split('.'),
|
||||
'permissions',
|
||||
'controllers',
|
||||
'policy',
|
||||
)[0],
|
||||
'policy'
|
||||
)[0]
|
||||
);
|
||||
const routes = isEmpty(controllerRoutes)
|
||||
? []
|
||||
: controllerRoutes.filter(
|
||||
o => toLower(o.handler) === toLower(takeRight(path, 2).join('.')),
|
||||
);
|
||||
o => toLower(o.handler) === toLower(takeRight(path, 2).join('.'))
|
||||
);
|
||||
|
||||
return (
|
||||
<div className={cn('col-md-5', styles.policies)}>
|
||||
<Wrapper className="col-md-5">
|
||||
<div className="container-fluid">
|
||||
<div className={cn('row', styles.inputWrapper)}>
|
||||
<div className={cn('col-md-12', styles.header)}>
|
||||
<div className="row">
|
||||
<Header className="col-md-12">
|
||||
<FormattedMessage id={`${baseTitle}.${title}`} />
|
||||
</div>
|
||||
</Header>
|
||||
{!this.props.shouldDisplayPoliciesHint ? (
|
||||
<Input
|
||||
customBootstrapClass="col-md-12"
|
||||
@ -69,12 +68,12 @@ class Policies extends React.Component {
|
||||
<div className="row">
|
||||
{!this.props.shouldDisplayPoliciesHint
|
||||
? map(routes, (route, key) => (
|
||||
<BoundRoute key={key} route={route} />
|
||||
))
|
||||
<BoundRoute key={key} route={route} />
|
||||
))
|
||||
: ''}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Wrapper>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,20 +0,0 @@
|
||||
.policies {
|
||||
min-height: 100%;
|
||||
background-color: #F6F6F6;
|
||||
}
|
||||
|
||||
.header {
|
||||
margin-bottom: 1.1rem;
|
||||
padding-top: 2.8rem;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
line-height: 3.6rem;
|
||||
}
|
||||
|
||||
.inputWrapper {
|
||||
> div:nth-child(2) {
|
||||
> label {
|
||||
// font-weight: 800!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user