mirror of
https://github.com/silverstripe/silverstripe-framework
synced 2024-10-22 14:05:37 +02:00
Modal styles
This commit is contained in:
Paul Clarke
parent
5f92e12911
commit
374ef6e0c3
10
admin/client/dist/js/bundle.js
vendored
10
admin/client/dist/js/bundle.js
vendored
@ -416,10 +416,10 @@ var n=o(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e))
|
||||
return n.handleSubmit=n.handleSubmit.bind(n),n.handleHide=n.handleHide.bind(n),n.clearResponse=n.clearResponse.bind(n),n}return a(t,e),s(t,[{key:"getForm",value:function n(){return u["default"].createElement(h["default"],{
|
||||
schemaUrl:this.props.schemaUrl,handleSubmit:this.handleSubmit,handleAction:this.props.handleAction})}},{key:"getResponse",value:function i(){if(!this.state||!this.state.response)return null
|
||||
var e=""
|
||||
return e=this.state.error?this.props.responseClassBad||"response error":this.props.responseClassGood||"response good",u["default"].createElement("div",{className:e},u["default"].createElement("div",{className:"response-wrapper"
|
||||
},u["default"].createElement("span",null,this.state.response)))}},{key:"clearResponse",value:function l(){this.setState({response:null})}},{key:"handleHide",value:function c(){this.clearResponse(),"function"==typeof this.props.handleHide&&this.props.handleHide()
|
||||
return e=this.state.error?this.props.responseClassBad||"response error":this.props.responseClassGood||"response good",u["default"].createElement("div",{className:e},u["default"].createElement("span",null,this.state.response))
|
||||
|
||||
}},{key:"handleSubmit",value:function f(e,t,n){var i=this,r=null
|
||||
}},{key:"clearResponse",value:function l(){this.setState({response:null})}},{key:"handleHide",value:function c(){this.clearResponse(),"function"==typeof this.props.handleHide&&this.props.handleHide()}},{
|
||||
key:"handleSubmit",value:function f(e,t,n){var i=this,r=null
|
||||
return"function"==typeof this.props.handleSubmit?r=this.props.handleSubmit(e,t,n):(e.preventDefault(),r=n()),r&&r.then(function(e){return i.setState({response:e.message,error:!1}),e})["catch"](function(e){
|
||||
e.then(function(e){i.setState({response:e,error:!0})})}),r}},{key:"render",value:function p(){var e=this.getForm(),t=this.getResponse()
|
||||
return u["default"].createElement(d.Modal,{show:this.props.show,onHide:this.handleHide,className:this.props.className},this.props.title!==!1&&u["default"].createElement(d.Modal.Header,{closeButton:!0},u["default"].createElement(d.Modal.Title,null,this.props.title)),u["default"].createElement(d.Modal.Body,{
|
||||
@ -1475,8 +1475,8 @@ return t.length||(t=e('<div id="add-to-campaign__dialog-wrapper" />'),e("body").
|
||||
this._clearModal()},_renderModal:function r(){var t=this,n=function l(){return t._clearModal()},i=function d(){return t._handleSubmitModal.apply(t,arguments)},r=e("form.cms-edit-form :input[name=ID]").val(),o=window.ss.store,a=o.getState().config.sections["SilverStripe\\CMS\\Controllers\\CMSPageEditController"],s=a.form.AddToCampaignForm.schemaUrl+"/"+r
|
||||
|
||||
|
||||
c["default"].render(u["default"].createElement(f.Provider,{store:o},u["default"].createElement(h["default"],{show:!0,handleSubmit:i,handleHide:n,schemaUrl:s,bodyClassName:"add-to-campaign__dialog",responseClassBad:"add-to-campaign__response add-to-campaign__response--error",
|
||||
responseClassGood:"add-to-campaign__response add-to-campaign__response--good"})),this[0])},_clearModal:function o(){c["default"].unmountComponentAtNode(this[0])},_handleSubmitModal:function a(e,t,n){return e.preventDefault(),
|
||||
c["default"].render(u["default"].createElement(f.Provider,{store:o},u["default"].createElement(h["default"],{show:!0,handleSubmit:i,handleHide:n,schemaUrl:s,bodyClassName:"modal__dialog",responseClassBad:"modal__response modal__response--error",
|
||||
responseClassGood:"modal__response modal__response--good"})),this[0])},_clearModal:function o(){c["default"].unmountComponentAtNode(this[0])},_handleSubmitModal:function a(e,t,n){return e.preventDefault(),
|
||||
t.Campaign?n():(alert(s["default"]._t("AddToCampaigns.ErrorCampaignNotSelected","There was no campaign selected to be added to")),null)}})})},,function(e,t){e.exports=FormBuilderModal},function(e,t,n){
|
||||
"use strict"
|
||||
function i(e){return e&&e.__esModule?e:{"default":e}}var r=n(1),o=i(r)
|
||||
|
||||
220
admin/client/dist/styles/bundle.css
vendored
220
admin/client/dist/styles/bundle.css
vendored
@ -6112,7 +6112,7 @@ a.list-group-item-danger.active,a.list-group-item-danger.active:focus,a.list-gro
|
||||
.close{
|
||||
float:right;
|
||||
font-size:1.5rem;
|
||||
font-weight:700;
|
||||
font-weight:300;
|
||||
line-height:1;
|
||||
color:#000;
|
||||
text-shadow:0 1px 0 #fff;
|
||||
@ -6177,7 +6177,7 @@ button.close{
|
||||
|
||||
.modal-content{
|
||||
position:relative;
|
||||
background-color:#fff;
|
||||
background-color:#f6f7f8;
|
||||
background-clip:padding-box;
|
||||
border:1px solid rgba(0,0,0,.2);
|
||||
border-radius:.3rem;
|
||||
@ -6204,7 +6204,7 @@ button.close{
|
||||
}
|
||||
|
||||
.modal-header{
|
||||
padding:15px;
|
||||
padding:.76925rem 1.5385rem;
|
||||
border-bottom:1px solid #e5e5e5;
|
||||
}
|
||||
|
||||
@ -6225,11 +6225,11 @@ button.close{
|
||||
|
||||
.modal-body{
|
||||
position:relative;
|
||||
padding:15px;
|
||||
padding:1.5385rem;
|
||||
}
|
||||
|
||||
.modal-footer{
|
||||
padding:15px;
|
||||
padding:1.5385rem;
|
||||
text-align:right;
|
||||
border-top:1px solid #e5e5e5;
|
||||
}
|
||||
@ -8655,7 +8655,7 @@ form.nostyle .TreeDropdownField,form.nostyle input.text,form.nostyle select,form
|
||||
}
|
||||
|
||||
.field select:not([size]):not([multiple]){
|
||||
height:2.5rem;
|
||||
height:2.924rem;
|
||||
}
|
||||
|
||||
.field input.creditcard,.field input.phonenumber-field__area,.field input.phonenumber-field__country,.field input.phonenumber-field__extension,.field input.phonenumber-field__number{
|
||||
@ -10978,93 +10978,6 @@ body.cms-dialog{
|
||||
top:0;
|
||||
}
|
||||
|
||||
.add-to-campaign__dialog{
|
||||
overflow:hidden;
|
||||
padding:12px 16px;
|
||||
margin:0;
|
||||
border:0;
|
||||
min-height:150px;
|
||||
}
|
||||
|
||||
.add-to-campaign__dialog .chosen-results>li{
|
||||
padding:.82053rem 1.2308rem;
|
||||
}
|
||||
|
||||
.add-to-campaign__dialog .disabled-result{
|
||||
font-style:italic;
|
||||
}
|
||||
|
||||
.add-to-campaign__dialog .disabled-result:after{
|
||||
font-style:normal;
|
||||
content:"Already contains item";
|
||||
color:#0071c4;
|
||||
margin-left:1.2308rem;
|
||||
float:right;
|
||||
}
|
||||
|
||||
@-webkit-keyframes add-to-campaign--slideup{
|
||||
0%{
|
||||
bottom:-100%;
|
||||
}
|
||||
|
||||
to{
|
||||
bottom:0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes add-to-campaign--slideup{
|
||||
0%{
|
||||
bottom:-100%;
|
||||
}
|
||||
|
||||
to{
|
||||
bottom:0;
|
||||
}
|
||||
}
|
||||
|
||||
.add-to-campaign__dialog .add-to-campaign__response{
|
||||
position:absolute;
|
||||
bottom:0;
|
||||
height:100%;
|
||||
left:0;
|
||||
width:100%;
|
||||
-webkit-animation:add-to-campaign--slideup 2s 1;
|
||||
animation:add-to-campaign--slideup 2s 1;
|
||||
background:#fff;
|
||||
display:block;
|
||||
z-index:1;
|
||||
}
|
||||
|
||||
.add-to-campaign__dialog .response-wrapper{
|
||||
display:table;
|
||||
height:100%;
|
||||
width:100%;
|
||||
}
|
||||
|
||||
.add-to-campaign__dialog .response-wrapper span{
|
||||
display:table-cell;
|
||||
text-align:center;
|
||||
vertical-align:middle;
|
||||
padding-bottom:1.2308rem;
|
||||
}
|
||||
|
||||
.add-to-campaign__dialog .response-wrapper span:before{
|
||||
font-size:48px;
|
||||
line-height:40px;
|
||||
display:block;
|
||||
padding-bottom:1.2308rem;
|
||||
}
|
||||
|
||||
.add-to-campaign__dialog .add-to-campaign__response--good span:before{
|
||||
content:"\263A";
|
||||
color:#3fa142;
|
||||
}
|
||||
|
||||
.add-to-campaign__dialog .add-to-campaign__response--error span:before{
|
||||
content:"\2639";
|
||||
color:#d40404;
|
||||
}
|
||||
|
||||
.cms-search-form{
|
||||
margin-bottom:16px;
|
||||
}
|
||||
@ -15645,6 +15558,10 @@ div.grid-field__sort-field+.form__fieldgroup-item{
|
||||
font-size:.923rem;
|
||||
}
|
||||
|
||||
.form__field-description:empty,.form__field-extra-label:empty{
|
||||
display:none;
|
||||
}
|
||||
|
||||
.form__field-extra-label{
|
||||
font-style:italic;
|
||||
}
|
||||
@ -15875,6 +15792,123 @@ input.checkbox,input.radio,input[type=checkbox],input[type=radio]{
|
||||
}
|
||||
}
|
||||
|
||||
.modal-content{
|
||||
overflow:hidden;
|
||||
border:0;
|
||||
}
|
||||
|
||||
.modal-header{
|
||||
height:53px;
|
||||
}
|
||||
|
||||
.modal-header .close{
|
||||
top:.9231rem;
|
||||
right:.9231rem;
|
||||
position:absolute;
|
||||
z-index:2;
|
||||
margin-right:0;
|
||||
height:32px;
|
||||
}
|
||||
|
||||
.modal-header .close span{
|
||||
overflow:hidden;
|
||||
display:block;
|
||||
margin-top:-7px;
|
||||
}
|
||||
|
||||
.modal-body{
|
||||
min-height:200px;
|
||||
}
|
||||
|
||||
@-webkit-keyframes modal--slideup{
|
||||
0%{
|
||||
bottom:-100%;
|
||||
opacity:.5;
|
||||
}
|
||||
|
||||
to{
|
||||
bottom:0;
|
||||
opacity:1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes modal--slideup{
|
||||
0%{
|
||||
bottom:-100%;
|
||||
opacity:.5;
|
||||
}
|
||||
|
||||
to{
|
||||
bottom:0;
|
||||
opacity:1;
|
||||
}
|
||||
}
|
||||
|
||||
.modal__response{
|
||||
position:absolute;
|
||||
bottom:0;
|
||||
left:0;
|
||||
height:calc(100% + 53px);
|
||||
width:100%;
|
||||
-webkit-animation:modal--slideup .6s 1;
|
||||
animation:modal--slideup .6s 1;
|
||||
background:#f6f7f8;
|
||||
display:block;
|
||||
border-radius:.3rem;
|
||||
z-index:1;
|
||||
text-align:center;
|
||||
display:-webkit-box;
|
||||
display:-ms-flexbox;
|
||||
display:flex;
|
||||
-webkit-box-pack:center;
|
||||
-ms-flex-pack:center;
|
||||
justify-content:center;
|
||||
-webkit-box-align:center;
|
||||
-ms-flex-align:center;
|
||||
align-items:center;
|
||||
padding:1.5385rem;
|
||||
}
|
||||
|
||||
.modal__response--error,.modal__response--good{
|
||||
font-size:1.23rem;
|
||||
font-weight:300;
|
||||
}
|
||||
|
||||
.modal__response--error span:before,.modal__response--good span:before{
|
||||
font-family:silverstripe;
|
||||
margin-bottom:1.2308rem;
|
||||
font-size:48px;
|
||||
line-height:40px;
|
||||
display:block;
|
||||
padding-bottom:1.2308rem;
|
||||
}
|
||||
|
||||
.modal__response--good span:before{
|
||||
content:"O";
|
||||
color:#3fa142;
|
||||
}
|
||||
|
||||
.modal__response--error span:before{
|
||||
content:"#";
|
||||
color:#d40404;
|
||||
}
|
||||
|
||||
.modal__dialog .chosen-results>li{
|
||||
padding:.82053rem 1.2308rem;
|
||||
}
|
||||
|
||||
.modal__dialog .disabled-result{
|
||||
font-style:italic;
|
||||
}
|
||||
|
||||
.modal__dialog .disabled-result:after{
|
||||
font-style:normal;
|
||||
content:"Already contains item";
|
||||
color:#0071c4;
|
||||
margin-left:1.2308rem;
|
||||
float:right;
|
||||
}
|
||||
|
||||
.cms-content__inner{
|
||||
height:100%;
|
||||
}
|
||||
|
||||
@ -37,9 +37,7 @@ class FormBuilderModal extends SilverStripeComponent {
|
||||
|
||||
return (
|
||||
<div className={className}>
|
||||
<div className="response-wrapper">
|
||||
<span>{this.state.response}</span>
|
||||
</div>
|
||||
<span>{this.state.response}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
112
admin/client/src/components/Modal/Modal.scss
Normal file
112
admin/client/src/components/Modal/Modal.scss
Normal file
@ -0,0 +1,112 @@
|
||||
// Based on bootstrap modal
|
||||
.modal-content {
|
||||
overflow: hidden;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
|
||||
// Modal header
|
||||
// Top section of the modal w/ title and dismiss
|
||||
.modal-header {
|
||||
height: $toolbar-total-height;
|
||||
|
||||
// Close icon
|
||||
.close {
|
||||
top: $spacer-sm;
|
||||
right: $spacer-sm;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
margin-right: 0;
|
||||
height: 32px;
|
||||
|
||||
span {
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
margin-top: -7px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
|
||||
// Modal slide up response
|
||||
@keyframes modal--slideup {
|
||||
from {
|
||||
bottom: -100%;
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
to {
|
||||
bottom: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.modal__response {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: calc(100% + #{$toolbar-total-height});
|
||||
width: 100%;
|
||||
animation: modal--slideup .6s 1;
|
||||
background: $background-main;
|
||||
display: block;
|
||||
border-radius: $border-radius-lg;
|
||||
z-index: 1;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: $panel-padding-y $panel-padding-x;
|
||||
}
|
||||
|
||||
// Response messages
|
||||
.modal__response--good,
|
||||
.modal__response--error {
|
||||
font-size: $font-size-lg;
|
||||
font-weight: 300;
|
||||
|
||||
span::before {
|
||||
font-family: silverstripe;
|
||||
margin-bottom: $spacer-y;
|
||||
font-size: 48px;
|
||||
line-height: 40px;
|
||||
display: block;
|
||||
padding-bottom: $spacer-y;
|
||||
}
|
||||
}
|
||||
|
||||
.modal__response--good span::before {
|
||||
content: "O";
|
||||
color: $brand-success;
|
||||
}
|
||||
|
||||
.modal__response--error span::before {
|
||||
content: "#";
|
||||
color: $brand-danger;
|
||||
}
|
||||
|
||||
|
||||
// This code doesn't do anything
|
||||
// TODO check whether or why this (chosen) isn't being used?
|
||||
.modal__dialog {
|
||||
|
||||
.chosen-results > li {
|
||||
padding: $spacer-y/1.5 $spacer-x;
|
||||
}
|
||||
|
||||
.disabled-result {
|
||||
font-style: italic;
|
||||
|
||||
&::after {
|
||||
font-style: normal;
|
||||
content: "Already contains item";
|
||||
color: $color-text-blue-link;
|
||||
margin-left: $spacer-x;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -57,9 +57,9 @@ jQuery.entwine('ss', ($) => {
|
||||
handleSubmit={handleSubmit}
|
||||
handleHide={handleHide}
|
||||
schemaUrl={modalSchemaUrl}
|
||||
bodyClassName="add-to-campaign__dialog"
|
||||
responseClassBad="add-to-campaign__response add-to-campaign__response--error"
|
||||
responseClassGood="add-to-campaign__response add-to-campaign__response--good"
|
||||
bodyClassName="modal__dialog"
|
||||
responseClassBad="modal__response modal__response--error"
|
||||
responseClassGood="modal__response modal__response--good"
|
||||
/>
|
||||
</Provider>,
|
||||
this[0]
|
||||
|
||||
Loading…
Reference in New Issue
Block a user