mirror of
https://github.com/strapi/strapi.git
synced 2025-11-04 03:43:34 +00:00
Create popUpWarning component
This commit is contained in:
cyril lopez
parent
cd6bd9d8fd
commit
c8f274f034
@ -0,0 +1,19 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
|
||||||
|
<title>Danger</title>
|
||||||
|
<desc>Created with Sketch.</desc>
|
||||||
|
<defs></defs>
|
||||||
|
<g id="Pages" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||||
|
<g id="Home-view" transform="translate(-1086.000000, -110.000000)">
|
||||||
|
<g id="Notification-2---Danger" transform="translate(1066.000000, 90.000000)">
|
||||||
|
<g id="Danger" transform="translate(20.000000, 20.000000)">
|
||||||
|
<g id="exclamation" transform="translate(8.500000, 5.000000)" fill-rule="nonzero" fill="#FF5D00">
|
||||||
|
<path d="M2.86305623,7.72680235 L2.86305623,9.27216281 C2.86305623,9.39174428 2.819363,9.49522824 2.73197654,9.58261469 C2.64459009,9.67000115 2.54110613,9.71369438 2.42152466,9.71369438 L0.655398413,9.71369438 C0.535816948,9.71369438 0.432332988,9.67000115 0.344946533,9.58261469 C0.257560078,9.49522824 0.213866851,9.39174428 0.213866851,9.27216281 L0.213866851,7.72680235 C0.213866851,7.60722088 0.257560078,7.50373692 0.344946533,7.41635047 C0.432332988,7.32896401 0.535816948,7.28527078 0.655398413,7.28527078 L2.42152466,7.28527078 C2.54110613,7.28527078 2.64459009,7.32896401 2.73197654,7.41635047 C2.819363,7.50373692 2.86305623,7.60722088 2.86305623,7.72680235 Z M3.07002415,0.441531563 L2.87685409,5.73991031 C2.8722548,5.85949178 2.82511211,5.96297574 2.73542601,6.05036219 C2.64573991,6.13774865 2.54110613,6.18144188 2.42152466,6.18144188 L0.655398413,6.18144188 C0.535816948,6.18144188 0.431183167,6.13774865 0.341497068,6.05036219 C0.251810969,5.96297574 0.204668276,5.85949178 0.200068989,5.73991031 L0.00689893067,0.441531563 C0.00229964356,0.321950098 0.0425434058,0.218466138 0.127630217,0.131079683 C0.212717029,0.0436932275 0.315051167,0 0.434632632,0 L2.64229044,0 C2.76187191,0 2.86420605,0.0436932275 2.94929286,0.131079683 C3.03437967,0.218466138 3.07462343,0.321950098 3.07002415,0.441531563 Z" id="Shape"></path>
|
||||||
|
</g>
|
||||||
|
<rect id="Rectangle-2" stroke="#FF5D00" x="0.5" y="0.5" width="19" height="19" rx="9.5"></rect>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.3 KiB |
@ -0,0 +1,27 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg width="25px" height="16px" viewBox="0 0 25 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
|
||||||
|
<title>Icon Flag Not Found</title>
|
||||||
|
<desc>Created with Sketch.</desc>
|
||||||
|
<defs></defs>
|
||||||
|
<g id="Pages" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||||
|
<g id="Settings-Manager---Languages-view" transform="translate(-579.000000, -294.000000)">
|
||||||
|
<g id="Container" transform="translate(234.000000, 53.000000)">
|
||||||
|
<g id="Content">
|
||||||
|
<g id="Forms" transform="translate(335.000000, 126.000000)">
|
||||||
|
<g id="List" transform="translate(0.000000, 1.000000)">
|
||||||
|
<g id="2" transform="translate(10.000000, 113.000000)">
|
||||||
|
<g id="Icon-Flag-Not-Found" transform="translate(0.000000, 1.000000)">
|
||||||
|
<rect id="Rectangle-2" fill="#ECEDEE" x="0" y="0" width="25" height="16" rx="1"></rect>
|
||||||
|
<g id="question" transform="translate(9.000000, 4.000000)" fill-rule="nonzero" fill="#919BAE">
|
||||||
|
<path d="M4.2827381,7.03125 L4.2827381,8.71875 C4.2827381,8.79375 4.2546131,8.859375 4.1983631,8.915625 C4.1421131,8.971875 4.0764881,9 4.0014881,9 L2.3139881,9 C2.2389881,9 2.1733631,8.971875 2.1171131,8.915625 C2.0608631,8.859375 2.0327381,8.79375 2.0327381,8.71875 L2.0327381,7.03125 C2.0327381,6.95625 2.0608631,6.890625 2.1171131,6.834375 C2.1733631,6.778125 2.2389881,6.75 2.3139881,6.75 L4.0014881,6.75 C4.0764881,6.75 4.1421131,6.778125 4.1983631,6.834375 C4.2546131,6.890625 4.2827381,6.95625 4.2827381,7.03125 Z M6.5046131,2.8125 C6.5046131,3.065625 6.46828497,3.30234375 6.39562872,3.52265625 C6.32297247,3.74296875 6.24094122,3.92226562 6.14953497,4.06054688 C6.05812872,4.19882813 5.92922247,4.33828125 5.76281622,4.47890625 C5.59640997,4.61953125 5.46164435,4.72148438 5.35851935,4.78476562 C5.25539435,4.84804687 5.1124256,4.93125 4.9296131,5.034375 C4.7374256,5.1421875 4.57687872,5.29453125 4.44797247,5.49140625 C4.31906622,5.68828125 4.2546131,5.8453125 4.2546131,5.9625 C4.2546131,6.0421875 4.2264881,6.11835938 4.1702381,6.19101563 C4.1139881,6.26367187 4.0483631,6.3 3.9733631,6.3 L2.2858631,6.3 C2.2155506,6.3 2.15578497,6.25664062 2.10656622,6.16992188 C2.05734747,6.08320312 2.0327381,5.9953125 2.0327381,5.90625 L2.0327381,5.58984375 C2.0327381,5.20078125 2.18508185,4.83398438 2.48976935,4.48945312 C2.79445685,4.14492187 3.1296131,3.890625 3.4952381,3.7265625 C3.7718006,3.6 3.9686756,3.46875 4.0858631,3.3328125 C4.2030506,3.196875 4.26164435,3.01875 4.26164435,2.7984375 C4.26164435,2.6015625 4.15265997,2.428125 3.93469122,2.278125 C3.71672247,2.128125 3.46476935,2.053125 3.17883185,2.053125 C2.87414435,2.053125 2.62101935,2.12109375 2.41945685,2.25703125 C2.25539435,2.37421875 2.0046131,2.64375 1.6671131,3.065625 C1.6061756,3.140625 1.53351935,3.178125 1.44914435,3.178125 C1.39289435,3.178125 1.3343006,3.159375 1.2733631,3.121875 L0.120238095,2.24296875 C0.0593005952,2.19609375 0.0229724702,2.1375 0.0112537202,2.0671875 C-0.000465029762,1.996875 0.0124255952,1.93125 0.0499255952,1.8703125 C0.799925595,0.6234375 1.8874256,0 3.3124256,0 C3.6874256,0 4.06476935,0.07265625 4.44445685,0.21796875 C4.82414435,0.36328125 5.16633185,0.5578125 5.47101935,0.8015625 C5.77570685,1.0453125 6.02414435,1.34414063 6.21633185,1.69804687 C6.40851935,2.05195313 6.5046131,2.4234375 6.5046131,2.8125 Z" id="Shape"></path>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 3.8 KiB |
@ -0,0 +1,19 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
|
||||||
|
<title>Info</title>
|
||||||
|
<desc>Created with Sketch.</desc>
|
||||||
|
<defs></defs>
|
||||||
|
<g id="Pages" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||||
|
<g id="Home-view" transform="translate(-1086.000000, -255.000000)">
|
||||||
|
<g id="Notification-2---Info" transform="translate(1066.000000, 234.000000)">
|
||||||
|
<g id="Info" transform="translate(20.000000, 21.000000)">
|
||||||
|
<g id="info" transform="translate(8.000000, 5.000000)" fill-rule="nonzero" fill="#1C5DE7">
|
||||||
|
<path d="M4,7.6 L4,8.4 C4,8.50833333 3.96041667,8.60208333 3.88125,8.68125 C3.80208333,8.76041667 3.70833333,8.8 3.6,8.8 L0.4,8.8 C0.291666667,8.8 0.197916667,8.76041667 0.11875,8.68125 C0.0395833333,8.60208333 0,8.50833333 0,8.4 L0,7.6 C0,7.49166667 0.0395833333,7.39791667 0.11875,7.31875 C0.197916667,7.23958333 0.291666667,7.2 0.4,7.2 L0.8,7.2 L0.8,4.8 L0.4,4.8 C0.291666667,4.8 0.197916667,4.76041667 0.11875,4.68125 C0.0395833333,4.60208333 0,4.50833333 0,4.4 L0,3.6 C0,3.49166667 0.0395833333,3.39791667 0.11875,3.31875 C0.197916667,3.23958333 0.291666667,3.2 0.4,3.2 L2.8,3.2 C2.90833333,3.2 3.00208333,3.23958333 3.08125,3.31875 C3.16041667,3.39791667 3.2,3.49166667 3.2,3.6 L3.2,7.2 L3.6,7.2 C3.70833333,7.2 3.80208333,7.23958333 3.88125,7.31875 C3.96041667,7.39791667 4,7.49166667 4,7.6 Z M3.2,0.4 L3.2,1.6 C3.2,1.70833333 3.16041667,1.80208333 3.08125,1.88125 C3.00208333,1.96041667 2.90833333,2 2.8,2 L1.2,2 C1.09166667,2 0.997916667,1.96041667 0.91875,1.88125 C0.839583333,1.80208333 0.8,1.70833333 0.8,1.6 L0.8,0.4 C0.8,0.291666667 0.839583333,0.197916667 0.91875,0.11875 C0.997916667,0.0395833333 1.09166667,0 1.2,0 L2.8,0 C2.90833333,0 3.00208333,0.0395833333 3.08125,0.11875 C3.16041667,0.197916667 3.2,0.291666667 3.2,0.4 Z" id="Shape"></path>
|
||||||
|
</g>
|
||||||
|
<rect id="Rectangle-2" stroke="#1C5DE7" x="0.5" y="0.5" width="19" height="19" rx="9.5"></rect>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.2 KiB |
@ -0,0 +1,19 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
|
||||||
|
<title>Check</title>
|
||||||
|
<desc>Created with Sketch.</desc>
|
||||||
|
<defs></defs>
|
||||||
|
<g id="Pages" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||||
|
<g id="Home-view" transform="translate(-1086.000000, -34.000000)">
|
||||||
|
<g id="Notification-2---Success" transform="translate(1066.000000, 14.000000)">
|
||||||
|
<g id="Check" transform="translate(20.000000, 20.000000)">
|
||||||
|
<g id="check" transform="translate(5.500000, 7.000000)" fill-rule="nonzero" fill="#27B70F">
|
||||||
|
<path d="M9.34239514,1.3983456 C9.34239514,1.55907497 9.28613986,1.69569495 9.1736293,1.80820551 L4.80982666,6.17200815 L3.99010683,6.99172798 C3.87759626,7.10423854 3.74097629,7.16049383 3.58024691,7.16049383 C3.41951753,7.16049383 3.28289756,7.10423854 3.170387,6.99172798 L2.35066717,6.17200815 L0.168765848,3.99010683 C0.0562552826,3.87759626 0,3.74097629 0,3.58024691 C0,3.41951753 0.0562552826,3.28289756 0.168765848,3.170387 L0.98848568,2.35066717 C1.10099625,2.2381566 1.23761622,2.18190132 1.3983456,2.18190132 C1.55907497,2.18190132 1.69569495,2.2381566 1.80820551,2.35066717 L3.58024691,4.12873592 L7.53418963,0.168765848 C7.6467002,0.0562552826 7.78332017,0 7.94404955,0 C8.10477893,0 8.2413989,0.0562552826 8.35390947,0.168765848 L9.1736293,0.98848568 C9.28613986,1.10099625 9.34239514,1.23761622 9.34239514,1.3983456 Z" id="Shape"></path>
|
||||||
|
</g>
|
||||||
|
<rect id="Rectangle-2" stroke="#27B70F" x="0.5" y="0.5" width="19" height="19" rx="9.5"></rect>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.8 KiB |
@ -0,0 +1,21 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg width="22px" height="21px" viewBox="0 0 22 21" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
|
||||||
|
<title>Warning</title>
|
||||||
|
<desc>Created with Sketch.</desc>
|
||||||
|
<defs></defs>
|
||||||
|
<g id="Pages" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||||
|
<g id="Home-view" transform="translate(-1085.000000, -182.000000)" fill-rule="nonzero">
|
||||||
|
<g id="Notification-2---Warning" transform="translate(1066.000000, 162.000000)">
|
||||||
|
<g id="Warning" transform="translate(20.000000, 21.000000)">
|
||||||
|
<g id="exclamation" transform="translate(8.500000, 6.000000)" fill="#FA9C00">
|
||||||
|
<path d="M2.86305623,7.72680235 L2.86305623,9.27216281 C2.86305623,9.39174428 2.819363,9.49522824 2.73197654,9.58261469 C2.64459009,9.67000115 2.54110613,9.71369438 2.42152466,9.71369438 L0.655398413,9.71369438 C0.535816948,9.71369438 0.432332988,9.67000115 0.344946533,9.58261469 C0.257560078,9.49522824 0.213866851,9.39174428 0.213866851,9.27216281 L0.213866851,7.72680235 C0.213866851,7.60722088 0.257560078,7.50373692 0.344946533,7.41635047 C0.432332988,7.32896401 0.535816948,7.28527078 0.655398413,7.28527078 L2.42152466,7.28527078 C2.54110613,7.28527078 2.64459009,7.32896401 2.73197654,7.41635047 C2.819363,7.50373692 2.86305623,7.60722088 2.86305623,7.72680235 Z M3.07002415,0.441531563 L2.87685409,5.73991031 C2.8722548,5.85949178 2.82511211,5.96297574 2.73542601,6.05036219 C2.64573991,6.13774865 2.54110613,6.18144188 2.42152466,6.18144188 L0.655398413,6.18144188 C0.535816948,6.18144188 0.431183167,6.13774865 0.341497068,6.05036219 C0.251810969,5.96297574 0.204668276,5.85949178 0.200068989,5.73991031 L0.00689893067,0.441531563 C0.00229964356,0.321950098 0.0425434058,0.218466138 0.127630217,0.131079683 C0.212717029,0.0436932275 0.315051167,0 0.434632632,0 L2.64229044,0 C2.76187191,0 2.86420605,0.0436932275 2.94929286,0.131079683 C3.03437967,0.218466138 3.07462343,0.321950098 3.07002415,0.441531563 Z" id="Shape"></path>
|
||||||
|
</g>
|
||||||
|
<g id="exclamation-triangle" stroke="#FA9C00">
|
||||||
|
<path d="M11.247216,0.74610245 L19.7995546,16.4253898 C20.0593912,16.8930958 20.0519673,17.3608018 19.7772829,17.8285078 C19.6510765,18.043801 19.4784707,18.2145509 19.2594655,18.3407572 C19.0404603,18.4669636 18.8047513,18.5300668 18.5523385,18.5300668 L1.44766147,18.5300668 C1.1952487,18.5300668 0.959539718,18.4669636 0.740534521,18.3407572 C0.521529324,18.2145509 0.348923534,18.043801 0.222717149,17.8285078 C-0.0519673348,17.3608018 -0.0593912398,16.8930958 0.200445434,16.4253898 L8.75278396,0.74610245 C8.87899035,0.515961396 9.05345212,0.334075724 9.27616927,0.200445434 C9.49888641,0.0668151448 9.74016333,0 10,0 C10.2598367,0 10.5011136,0.0668151448 10.7238307,0.200445434 C10.9465479,0.334075724 11.1210097,0.515961396 11.247216,0.74610245 Z" id="Shape"></path>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 3.1 KiB |
@ -39,7 +39,6 @@ class AttributeCard extends React.Component { // eslint-disable-line react/prefe
|
|||||||
|
|
||||||
render() {
|
render() {
|
||||||
const bootstrapClass = this.props.attribute.type === 'relation' ? 'col-md-6 offset-md-3' : 'col-md-6';
|
const bootstrapClass = this.props.attribute.type === 'relation' ? 'col-md-6 offset-md-3' : 'col-md-6';
|
||||||
console.log(this.props);
|
|
||||||
return (
|
return (
|
||||||
<div className={bootstrapClass}>
|
<div className={bootstrapClass}>
|
||||||
<div className={styles.attributeCardContainer} onClick={this.goTo}>
|
<div className={styles.attributeCardContainer} onClick={this.goTo}>
|
||||||
|
|||||||
@ -0,0 +1,75 @@
|
|||||||
|
/**
|
||||||
|
*
|
||||||
|
* PopUpWarning
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
// modal
|
||||||
|
import { Button, Modal, ModalHeader, ModalBody } from 'reactstrap';
|
||||||
|
import { FormattedMessage } from 'react-intl';
|
||||||
|
import IcoDanger from '../../assets/icons/icon_danger.svg';
|
||||||
|
import IcoNotFound from '../../assets/icons/icon_flag_not_found.svg';
|
||||||
|
import IcoInfo from '../../assets/icons/icon_info.svg';
|
||||||
|
import IcoSuccess from '../../assets/icons/icon_success.svg';
|
||||||
|
import IcoWarning from '../../assets/icons/icon_warning.svg';
|
||||||
|
import styles from './styles.scss';
|
||||||
|
|
||||||
|
class PopUpWarning extends React.Component { // eslint-disable-line react/prefer-stateless-function
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.icons = {
|
||||||
|
'danger': IcoDanger,
|
||||||
|
'info': IcoInfo,
|
||||||
|
'notFound': IcoNotFound,
|
||||||
|
'success': IcoSuccess,
|
||||||
|
'warning': IcoWarning,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div className={styles.popUpWarning}>
|
||||||
|
<Modal isOpen={this.props.isOpen} toggle={this.props.toggleModal} className={styles.modalPosition}>
|
||||||
|
<ModalHeader toggle={this.props.toggleModal} className={styles.header}>
|
||||||
|
<FormattedMessage id="popUpWarning.title" />
|
||||||
|
</ModalHeader>
|
||||||
|
<div className={styles.bordered} />
|
||||||
|
<ModalBody>
|
||||||
|
<div className={styles.modalDangerBodyContainer}>
|
||||||
|
<img src={this.icons[this.props.popUpWarningType]} alt="icon" />
|
||||||
|
<FormattedMessage id={this.props.bodyMessage}>
|
||||||
|
{(message) => (
|
||||||
|
<p>{message}</p>
|
||||||
|
)}
|
||||||
|
</FormattedMessage>
|
||||||
|
</div>
|
||||||
|
<div className={styles.buttonContainer}>
|
||||||
|
<FormattedMessage id="popUpWarning.button.cancel">
|
||||||
|
{(message) => (
|
||||||
|
<Button onClick={this.props.toggleModal} className={styles.secondary}>{message}</Button>
|
||||||
|
)}
|
||||||
|
</FormattedMessage>
|
||||||
|
<FormattedMessage id="popUpWarning.button.confirm">
|
||||||
|
{(message) => (
|
||||||
|
<Button onClick={this.props.handleConfirm} className={styles.primary}>{message}</Button>
|
||||||
|
)}
|
||||||
|
</FormattedMessage>
|
||||||
|
</div>
|
||||||
|
</ModalBody>
|
||||||
|
|
||||||
|
</Modal>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
PopUpWarning.propTypes = {
|
||||||
|
bodyMessage: React.PropTypes.string,
|
||||||
|
handleConfirm: React.PropTypes.func,
|
||||||
|
isOpen: React.PropTypes.bool.isRequired,
|
||||||
|
popUpWarningType: React.PropTypes.string,
|
||||||
|
toggleModal: React.PropTypes.func.isRequired,
|
||||||
|
}
|
||||||
|
|
||||||
|
export default PopUpWarning;
|
||||||
@ -0,0 +1,146 @@
|
|||||||
|
.popUpWarning { /* stylelint-disable */
|
||||||
|
width: 37.5rem!important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
border: none!important;
|
||||||
|
> h4 {
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
font-family: Lato;
|
||||||
|
font-weight: bold!important;
|
||||||
|
font-size: 1.8rem!important;
|
||||||
|
|
||||||
|
}
|
||||||
|
> button {
|
||||||
|
margin-right: 0!important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.modalPosition {
|
||||||
|
top: 16.8rem;
|
||||||
|
> div {
|
||||||
|
border:none;
|
||||||
|
width: 37.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.modalDangerBodyContainer {
|
||||||
|
padding-top: .1rem;
|
||||||
|
> img {
|
||||||
|
width: 2.5rem;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
> p {
|
||||||
|
line-height: 1.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
color: #F64D0A;
|
||||||
|
text-align: center;
|
||||||
|
font-family: Lato;
|
||||||
|
font-size: 1.3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.buttonContainer {
|
||||||
|
width: 100%;
|
||||||
|
padding: 0 .5rem;
|
||||||
|
display: flex;
|
||||||
|
margin-top: 3.5rem;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
> button {
|
||||||
|
height: 3rem;
|
||||||
|
width: 15rem;
|
||||||
|
position: relative;
|
||||||
|
border-radius: 0.3rem;
|
||||||
|
text-transform: capitalize;
|
||||||
|
// margin-right: 1.8rem;
|
||||||
|
cursor: pointer;
|
||||||
|
font-family: Lato;
|
||||||
|
&:focus {
|
||||||
|
outline: 0;
|
||||||
|
}
|
||||||
|
> i {
|
||||||
|
margin-right: 1.3rem;
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
&::after {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
border-radius: 0.3rem;
|
||||||
|
content: '';
|
||||||
|
opacity: 0.1;
|
||||||
|
background: #FFFFFF;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.primary {
|
||||||
|
font-weight: 500;
|
||||||
|
background: linear-gradient(315deg, #0097F6 0%, #005EEA 100%);
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
color: white;
|
||||||
|
&:active {
|
||||||
|
box-shadow: inset 1px 1px 3px rgba(0,0,0,.15);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.secondary {
|
||||||
|
// height: 32px !important;
|
||||||
|
color: #F64D0A;
|
||||||
|
border: 0.1rem solid #F64D0A;
|
||||||
|
position: relative;
|
||||||
|
border-radius: 3px;
|
||||||
|
overflow: hidden;
|
||||||
|
&:active {
|
||||||
|
border: 0.15rem solid #F64D0A;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// .primary {
|
||||||
|
// height: 3rem;
|
||||||
|
// font-family: Lato!important;
|
||||||
|
// margin-left: 1.9rem!important;
|
||||||
|
// cursor: pointer;
|
||||||
|
// font-family: Lato;
|
||||||
|
// &:focus {
|
||||||
|
// outline: 0;
|
||||||
|
// }
|
||||||
|
// border: none!important;
|
||||||
|
// width: 15rem;
|
||||||
|
// line-height: 1.6rem;
|
||||||
|
// font-weight: 600;
|
||||||
|
// border-radius: 3px;
|
||||||
|
// background: linear-gradient(315deg, #0097F6 0%, #005EEA 100%);
|
||||||
|
// -webkit-font-smoothing: antialiased;
|
||||||
|
// color: white!important;
|
||||||
|
// }
|
||||||
|
//
|
||||||
|
// .secondary {
|
||||||
|
// font-family: Lato;
|
||||||
|
// color: #F64D0A;
|
||||||
|
// border: 0.1rem solid #F64D0A;
|
||||||
|
// cursor: pointer;
|
||||||
|
// &:hover {
|
||||||
|
// color: #F64D0A;
|
||||||
|
// background-color: white;
|
||||||
|
// border: 0.1rem solid #F64D0A;
|
||||||
|
// }
|
||||||
|
// height: 3rem;
|
||||||
|
// width: 15rem;
|
||||||
|
// color: #F64D0A;
|
||||||
|
// border: 0.1rem solid #F64D0A;
|
||||||
|
// position: relative;
|
||||||
|
// border-radius: 3px;
|
||||||
|
// }
|
||||||
|
|
||||||
|
.bordered {
|
||||||
|
margin-top: -.4rem;
|
||||||
|
margin-left: 3rem;
|
||||||
|
margin-right: 3rem;
|
||||||
|
border: 1px solid #F6F6F6;
|
||||||
|
}
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
// import PopUpWarning from '../index';
|
||||||
|
|
||||||
|
import expect from 'expect';
|
||||||
|
// import { shallow } from 'enzyme';
|
||||||
|
// import React from 'react';
|
||||||
|
|
||||||
|
describe('<PopUpWarning />', () => {
|
||||||
|
it('Expect to have unit tests specified', () => {
|
||||||
|
expect(true).toEqual(false);
|
||||||
|
});
|
||||||
|
});
|
||||||
@ -47,7 +47,7 @@ class TableList extends React.Component { // eslint-disable-line react/prefer-st
|
|||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
{map(this.props.rowItems, (rowItem, key) => (
|
{map(this.props.rowItems, (rowItem, key) => (
|
||||||
<TableListRow key={key} rowItem={rowItem} />
|
<TableListRow key={key} rowItem={rowItem} handleDelete={this.props.handleDelete} />
|
||||||
))}
|
))}
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
@ -62,6 +62,7 @@ TableList.propTypes = {
|
|||||||
availableNumber: React.PropTypes.number.isRequired,
|
availableNumber: React.PropTypes.number.isRequired,
|
||||||
buttonLabel: React.PropTypes.string.isRequired,
|
buttonLabel: React.PropTypes.string.isRequired,
|
||||||
handleButtonClick: React.PropTypes.func,
|
handleButtonClick: React.PropTypes.func,
|
||||||
|
handleDelete: React.PropTypes.func,
|
||||||
rowItems: React.PropTypes.array.isRequired,
|
rowItems: React.PropTypes.array.isRequired,
|
||||||
title: React.PropTypes.string.isRequired,
|
title: React.PropTypes.string.isRequired,
|
||||||
};
|
};
|
||||||
|
|||||||
@ -7,27 +7,40 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { startCase } from 'lodash';
|
import { startCase } from 'lodash';
|
||||||
import { FormattedMessage } from 'react-intl';
|
import { FormattedMessage } from 'react-intl';
|
||||||
|
import PopUpWarning from 'components/PopUpWarning';
|
||||||
import styles from 'components/TableList/styles.scss';
|
import styles from 'components/TableList/styles.scss';
|
||||||
import { router } from 'app';
|
import { router } from 'app';
|
||||||
/* eslint-disable jsx-a11y/no-static-element-interactions */
|
/* eslint-disable jsx-a11y/no-static-element-interactions */
|
||||||
|
|
||||||
class TableListRow extends React.Component { // eslint-disable-line react/prefer-stateless-function
|
class TableListRow extends React.Component { // eslint-disable-line react/prefer-stateless-function
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.state = {
|
||||||
|
showWarning: false,
|
||||||
|
};
|
||||||
|
}
|
||||||
edit = (e) => {
|
edit = (e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
router.push(`plugins/content-type-builder/#edit${this.props.rowItem.name}::contentType::baseSettings`);
|
router.push(`plugins/content-type-builder/#edit${this.props.rowItem.name}::contentType::baseSettings`);
|
||||||
}
|
}
|
||||||
|
|
||||||
delete = (e) => {
|
delete = () => {
|
||||||
e.preventDefault();
|
this.props.handleDelete(this.props.rowItem.name)
|
||||||
e.stopPropagation();
|
this.setState({ showWarning: false });
|
||||||
console.log('delete', this.props.rowItem.name);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
goTo = () => {
|
goTo = () => {
|
||||||
router.push(`/plugins/content-type-builder/models/${this.props.rowItem.name}`);
|
router.push(`/plugins/content-type-builder/models/${this.props.rowItem.name}`);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
toggleModalWarning = (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation()
|
||||||
|
this.setState({ showWarning: !this.state.showWarning });
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const temporary = this.props.rowItem.isTemporary ? <FormattedMessage id={'contentType.temporaryDisplay'} /> : '';
|
const temporary = this.props.rowItem.isTemporary ? <FormattedMessage id={'contentType.temporaryDisplay'} /> : '';
|
||||||
return (
|
return (
|
||||||
@ -43,17 +56,25 @@ class TableListRow extends React.Component { // eslint-disable-line react/prefer
|
|||||||
<i className="fa fa-pencil" onClick={this.edit} role="button" />
|
<i className="fa fa-pencil" onClick={this.edit} role="button" />
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<i className="fa fa-trash" onClick={this.delete} role="button" />
|
<i className="fa fa-trash" onClick={this.toggleModalWarning} role="button" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<PopUpWarning
|
||||||
|
isOpen={this.state.showWarning}
|
||||||
|
toggleModal={this.toggleModalWarning}
|
||||||
|
bodyMessage={'popUpWarning.bodyMessage.contentType.delete'}
|
||||||
|
popUpWarningType={'danger'}
|
||||||
|
handleConfirm={this.delete}
|
||||||
|
/>
|
||||||
</li>
|
</li>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
TableListRow.propTypes = {
|
TableListRow.propTypes = {
|
||||||
|
handleDelete: React.PropTypes.func,
|
||||||
rowItem: React.PropTypes.object.isRequired,
|
rowItem: React.PropTypes.object.isRequired,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@ -7,16 +7,37 @@
|
|||||||
/* eslint-disable new-cap */
|
/* eslint-disable new-cap */
|
||||||
|
|
||||||
import { List, Map } from 'immutable';
|
import { List, Map } from 'immutable';
|
||||||
import { concat, size, map } from 'lodash';
|
import { concat, size, map, findIndex } from 'lodash';
|
||||||
|
|
||||||
import { storeData } from '../../utils/storeData';
|
import { storeData } from '../../utils/storeData';
|
||||||
|
|
||||||
import {
|
import {
|
||||||
|
DELETE_CONTENT_TYPE,
|
||||||
MODELS_FETCH,
|
MODELS_FETCH,
|
||||||
MODELS_FETCH_SUCCEEDED,
|
MODELS_FETCH_SUCCEEDED,
|
||||||
STORE_TEMPORARY_MENU,
|
STORE_TEMPORARY_MENU,
|
||||||
} from './constants';
|
} from './constants';
|
||||||
|
|
||||||
|
export function deleteContentType(itemToDelete) {
|
||||||
|
const oldMenu = storeData.getMenu();
|
||||||
|
|
||||||
|
if (oldMenu) {
|
||||||
|
const index = findIndex(oldMenu, ['name', itemToDelete]);
|
||||||
|
if (oldMenu[index].isTemporary) {
|
||||||
|
storeData.clearAppStorage();
|
||||||
|
}else {
|
||||||
|
oldMenu.splice(index, 1);
|
||||||
|
const newMenu = oldMenu
|
||||||
|
storeData.setMenu(newMenu);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
type: DELETE_CONTENT_TYPE,
|
||||||
|
itemToDelete,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
export function modelsFetch() {
|
export function modelsFetch() {
|
||||||
return {
|
return {
|
||||||
type: MODELS_FETCH,
|
type: MODELS_FETCH,
|
||||||
|
|||||||
@ -4,6 +4,7 @@
|
|||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
export const DELETE_CONTENT_TYPE = 'ContentTypeBuilder/App/DELETE_CONTENT_TYPE';
|
||||||
export const MODELS_FETCH = 'ContentTypeBuilder/App/MODELS_FETCH';
|
export const MODELS_FETCH = 'ContentTypeBuilder/App/MODELS_FETCH';
|
||||||
export const MODELS_FETCH_SUCCEEDED = 'ContentTypeBuilder/App/MODELS_FETCH_SUCCEEDED';
|
export const MODELS_FETCH_SUCCEEDED = 'ContentTypeBuilder/App/MODELS_FETCH_SUCCEEDED';
|
||||||
export const STORE_TEMPORARY_MENU = 'ContentTypeBuilder/App/STORE_TEMPORARY_MENU';
|
export const STORE_TEMPORARY_MENU = 'ContentTypeBuilder/App/STORE_TEMPORARY_MENU';
|
||||||
|
|||||||
@ -5,8 +5,9 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
import { fromJS, List } from 'immutable';
|
import { fromJS, List } from 'immutable';
|
||||||
import { size } from 'lodash';
|
import { findIndex, size } from 'lodash';
|
||||||
import {
|
import {
|
||||||
|
DELETE_CONTENT_TYPE,
|
||||||
MODELS_FETCH,
|
MODELS_FETCH,
|
||||||
MODELS_FETCH_SUCCEEDED,
|
MODELS_FETCH_SUCCEEDED,
|
||||||
STORE_TEMPORARY_MENU,
|
STORE_TEMPORARY_MENU,
|
||||||
@ -21,6 +22,10 @@ const initialState = fromJS({
|
|||||||
|
|
||||||
function appReducer(state = initialState, action) {
|
function appReducer(state = initialState, action) {
|
||||||
switch (action.type) {
|
switch (action.type) {
|
||||||
|
case DELETE_CONTENT_TYPE:
|
||||||
|
return state
|
||||||
|
.updateIn(['menu', '0', 'items'], (list) => list.splice(findIndex(state.getIn(['menu', '0', 'items']).toJS(), ['name', action.itemToDelete]), 1))
|
||||||
|
.update('models', (array) => array.splice(findIndex(state.get('models').toJS(), ['name', action.itemToDelete]), 1));
|
||||||
case MODELS_FETCH:
|
case MODELS_FETCH:
|
||||||
return state.set('loading', true);
|
return state.set('loading', true);
|
||||||
case MODELS_FETCH_SUCCEEDED:
|
case MODELS_FETCH_SUCCEEDED:
|
||||||
|
|||||||
@ -12,6 +12,7 @@ import { size } from 'lodash';
|
|||||||
import Helmet from 'react-helmet';
|
import Helmet from 'react-helmet';
|
||||||
import { router } from 'app';
|
import { router } from 'app';
|
||||||
import { makeSelectLoading, makeSelectMenu, makeSelectModels } from 'containers/App/selectors';
|
import { makeSelectLoading, makeSelectMenu, makeSelectModels } from 'containers/App/selectors';
|
||||||
|
import { deleteContentType } from 'containers/App/actions';
|
||||||
|
|
||||||
import Form from 'containers/Form';
|
import Form from 'containers/Form';
|
||||||
|
|
||||||
@ -43,6 +44,11 @@ export class HomePage extends React.Component { // eslint-disable-line react/pre
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
handleDelete = (contentTypeName) => {
|
||||||
|
console.log(contentTypeName);
|
||||||
|
this.props.deleteContentType(contentTypeName);
|
||||||
|
}
|
||||||
|
|
||||||
toggleModal = () => {
|
toggleModal = () => {
|
||||||
const locationHash = this.props.location.hash ? '' : '#create::contentType::baseSettings';
|
const locationHash = this.props.location.hash ? '' : '#create::contentType::baseSettings';
|
||||||
router.push(`plugins/content-type-builder/${locationHash}`);
|
router.push(`plugins/content-type-builder/${locationHash}`);
|
||||||
@ -59,6 +65,7 @@ export class HomePage extends React.Component { // eslint-disable-line react/pre
|
|||||||
buttonLabel={'button.contentType.add'}
|
buttonLabel={'button.contentType.add'}
|
||||||
handleButtonClick={this.handleButtonClick}
|
handleButtonClick={this.handleButtonClick}
|
||||||
rowItems={this.props.models}
|
rowItems={this.props.models}
|
||||||
|
handleDelete={this.handleDelete}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@ -105,20 +112,21 @@ const mapStateToProps = createStructuredSelector({
|
|||||||
|
|
||||||
function mapDispatchToProps(dispatch) {
|
function mapDispatchToProps(dispatch) {
|
||||||
return bindActionCreators(
|
return bindActionCreators(
|
||||||
{},
|
{
|
||||||
|
deleteContentType,
|
||||||
|
},
|
||||||
dispatch,
|
dispatch,
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
HomePage.propTypes = {
|
HomePage.propTypes = {
|
||||||
// homePage: React.PropTypes.object.isRequired,
|
deleteContentType: React.PropTypes.func,
|
||||||
location: React.PropTypes.object,
|
location: React.PropTypes.object,
|
||||||
menu: React.PropTypes.array,
|
menu: React.PropTypes.array,
|
||||||
models: React.PropTypes.oneOfType([
|
models: React.PropTypes.oneOfType([
|
||||||
React.PropTypes.object,
|
React.PropTypes.object,
|
||||||
React.PropTypes.array,
|
React.PropTypes.array,
|
||||||
]),
|
]),
|
||||||
// modelsLoading: React.PropTypes.bool,
|
|
||||||
route: React.PropTypes.object,
|
route: React.PropTypes.object,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@ -62,6 +62,12 @@
|
|||||||
"popUpForm.navContainer.base": "Base settings",
|
"popUpForm.navContainer.base": "Base settings",
|
||||||
"popUpForm.navContainer.advanced": "Advanced settings",
|
"popUpForm.navContainer.advanced": "Advanced settings",
|
||||||
|
|
||||||
|
"popUpWarning.button.cancel": "Cancel",
|
||||||
|
"popUpWarning.button.confirm": "Confirm",
|
||||||
|
"popUpWarning.title": "Please confirm",
|
||||||
|
"popUpWarning.bodyMessage.contentType.delete": "Are you sure you want to delete this Content Type?",
|
||||||
|
|
||||||
|
|
||||||
"table.contentType.title.plural": "Content Types are available",
|
"table.contentType.title.plural": "Content Types are available",
|
||||||
"table.contentType.title.singular": "Content Type is available",
|
"table.contentType.title.singular": "Content Type is available",
|
||||||
"table.contentType.head.name": "Name",
|
"table.contentType.head.name": "Name",
|
||||||
|
|||||||
@ -61,6 +61,11 @@
|
|||||||
"popUpForm.navContainer.base": "Réglages de base",
|
"popUpForm.navContainer.base": "Réglages de base",
|
||||||
"popUpForm.navContainer.advanced": "Réglages avancés",
|
"popUpForm.navContainer.advanced": "Réglages avancés",
|
||||||
|
|
||||||
|
"popUpWarning.button.cancel": "Annuler",
|
||||||
|
"popUpWarning.button.confirm": "Confirmer",
|
||||||
|
"popUpWarning.title": "Merci de confirmer",
|
||||||
|
"popUpWarning.bodyMessage.contentType.delete": "Êtes-vous sûre de vouloir supprimer ce modèle?",
|
||||||
|
|
||||||
"table.contentType.title.plural": "Modèles sont disponibles",
|
"table.contentType.title.plural": "Modèles sont disponibles",
|
||||||
"table.contentType.title.singular": "Modèle est disponible",
|
"table.contentType.title.singular": "Modèle est disponible",
|
||||||
"table.contentType.head.name": "Nom",
|
"table.contentType.head.name": "Nom",
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user