mirror of
https://github.com/silverstripe/silverstripe-framework
synced 2024-10-22 12:05:37 +00:00
Delete legacy styles in Layout, move rest to CampaignAdmin. Convert to BEM
This commit is contained in:
Paul Clarke
parent
c82c88ebf6
commit
5350fcf650
27
admin/client/dist/js/bundle.js
vendored
27
admin/client/dist/js/bundle.js
vendored
@ -2414,12 +2414,10 @@ case"create":e=this.renderCreateView()
|
||||
break
|
||||
default:e=this.renderIndexView()}return e}},{key:"renderIndexView",value:function f(){var e=this.props.sectionConfig.form.EditForm.schemaUrl,t={title:S["default"]._t("Campaigns.ADDCAMPAIGN"),icon:"plus",
|
||||
handleClick:this.addCampaign.bind(this)},n={createFn:this.campaignListCreateFn.bind(this),schemaUrl:e}
|
||||
return p["default"].createElement("div",{className:"fill-height cms-campaigns","aria-expanded":"true"},p["default"].createElement(x["default"],null,p["default"].createElement(C["default"],{multiline:!0,
|
||||
crumbs:this.props.breadcrumbs})),p["default"].createElement("div",{className:"panel panel--padded panel--scrollable flexbox-area-grow"},p["default"].createElement("div",{className:"toolbar toolbar--content"
|
||||
},p["default"].createElement("div",{className:"btn-toolbar"},p["default"].createElement(O["default"],t))),p["default"].createElement("div",{className:"campaign-admin"},p["default"].createElement(A["default"],n))))
|
||||
|
||||
}},{key:"renderItemListView",value:function h(){var e={sectionConfig:this.props.sectionConfig,campaignId:this.props.params.id,itemListViewEndpoint:this.props.sectionConfig.itemListViewEndpoint,publishApi:this.publishApi,
|
||||
handleBackButtonClick:this.handleBackButtonClick.bind(this)}
|
||||
return p["default"].createElement("div",{className:"fill-height","aria-expanded":"true"},p["default"].createElement(x["default"],null,p["default"].createElement(C["default"],{multiline:!0,crumbs:this.props.breadcrumbs
|
||||
})),p["default"].createElement("div",{className:"panel panel--padded panel--scrollable flexbox-area-grow"},p["default"].createElement("div",{className:"toolbar toolbar--content"},p["default"].createElement("div",{
|
||||
className:"btn-toolbar"},p["default"].createElement(O["default"],t))),p["default"].createElement(A["default"],n)))}},{key:"renderItemListView",value:function h(){var e={sectionConfig:this.props.sectionConfig,
|
||||
campaignId:this.props.params.id,itemListViewEndpoint:this.props.sectionConfig.itemListViewEndpoint,publishApi:this.publishApi,handleBackButtonClick:this.handleBackButtonClick.bind(this)}
|
||||
return p["default"].createElement(F["default"],e)}},{key:"renderDetailEditView",value:function m(){var e=this.props.sectionConfig.form.DetailEditForm.schemaUrl,t=e
|
||||
this.props.params.id>0&&(t=e+"/"+this.props.params.id)
|
||||
var n={createFn:this.campaignEditCreateFn.bind(this),schemaUrl:t}
|
||||
@ -2487,17 +2485,17 @@ var a=[]
|
||||
handleClickArg:i.ID},h["default"].createElement(M["default"],{item:i,campaign:e.props.record})))}),a.push(h["default"].createElement(S["default"],{key:f,groupid:f,title:d},c))})
|
||||
var s=[this.props.config.absoluteBaseUrl,this.props.config.sections["SilverStripe\\CMS\\Controllers\\CMSPagesController"].url].join(""),l=a.length?h["default"].createElement(O["default"],null,a):h["default"].createElement("div",{
|
||||
className:"alert alert-warning",role:"alert"},h["default"].createElement("strong",null,"This campaign is empty.")," You can add pages by selecting"," ",h["default"].createElement("em",null,"Add to campaign")," from within the ",h["default"].createElement("em",null,"More Options")," popup on"," ","the ",h["default"].createElement("a",{
|
||||
href:s},"edit page screen"),"."),u=["panel","panel--padded","panel--scrollable","flexbox-area-grow","campaign-items"]
|
||||
return h["default"].createElement("div",{className:"fill-width campaigns"},h["default"].createElement("div",{className:"fill-height campaign-items cms-content__left cms-campaigns","aria-expanded":"true"
|
||||
href:s},"edit page screen"),"."),u=["panel","panel--padded","panel--scrollable","flexbox-area-grow"]
|
||||
return h["default"].createElement("div",{className:"fill-width campaign-admin__campaign"},h["default"].createElement("div",{className:"fill-height campaign-admin__campaign-items","aria-expanded":"true"
|
||||
},h["default"].createElement(A["default"],{showBackButton:!0,handleBackButtonClick:this.props.handleBackButtonClick},h["default"].createElement(U["default"],{multiline:!0,crumbs:this.props.breadcrumbs})),h["default"].createElement("div",{
|
||||
className:u.join(" ")},l),h["default"].createElement("div",{className:"toolbar toolbar--south"},this.renderButtonToolbar())),h["default"].createElement(B["default"],{itemLinks:n,itemId:t}))}},{key:"handleItemSelected",
|
||||
value:function l(e,t){this.props.campaignActions.selectChangeSetItem(t)}},{key:"renderButtonToolbar",value:function u(){var e=this.getItems()
|
||||
if(!e||!e.length)return h["default"].createElement("div",{className:"btn-toolbar"})
|
||||
var t={}
|
||||
return"open"===this.props.record.State?t=c(t,{title:$["default"]._t("Campaigns.PUBLISHCAMPAIGN"),bootstrapButtonStyle:"primary",loading:this.props.campaign.isPublishing,handleClick:this.handlePublish,icon:"rocket"
|
||||
}):"published"===this.props.record.State&&(t=c(t,{title:$["default"]._t("Campaigns.REVERTCAMPAIGN"),bootstrapButtonStyle:"default",icon:"back-in-time",disabled:!0})),h["default"].createElement("div",{className:"btn-toolbar"
|
||||
},h["default"].createElement(F["default"],t))}},{key:"getItems",value:function p(){return this.props.record&&this.props.record._embedded?this.props.record._embedded.items:null}},{key:"groupItemsForSet",
|
||||
value:function m(){var e={},t=this.getItems()
|
||||
}):"published"===this.props.record.State&&(t=c(t,{title:$["default"]._t("Campaigns.REVERTCAMPAIGN"),bootstrapButtonStyle:"secondary-outline",icon:"back-in-time",disabled:!0})),h["default"].createElement("div",{
|
||||
className:"btn-toolbar"},h["default"].createElement(F["default"],t))}},{key:"getItems",value:function p(){return this.props.record&&this.props.record._embedded?this.props.record._embedded.items:null}},{
|
||||
key:"groupItemsForSet",value:function m(){var e={},t=this.getItems()
|
||||
return t?(t.forEach(function(t){var n=t.BaseClass
|
||||
e[n]||(e[n]={singular:t.Singular,plural:t.Plural,items:[]}),e[n].items.push(t)}),e):e}},{key:"handlePublish",value:function g(e){e.preventDefault(),this.props.campaignActions.publishCampaign(this.props.publishApi,this.props.treeClass,this.props.campaignId)
|
||||
|
||||
@ -2591,8 +2589,7 @@ return this.props.itemLinks&&this.props.itemLinks.edit&&(i=this.props.itemLinks.
|
||||
className:"btn__title"},d["default"]._t("Preview.EDIT","Edit"))))),e=this.props.itemId?t?n&&0===n.indexOf("image/")?u["default"].createElement("div",{className:"preview__file-container panel--scrollable"
|
||||
},u["default"].createElement("img",{alt:t,className:"preview__file--fits-space",src:t})):u["default"].createElement("iframe",{className:"flexbox-area-grow preview__iframe",src:t}):u["default"].createElement("div",{
|
||||
className:"preview__overlay"},u["default"].createElement("h3",{className:"preview__overlay-text"},"There is no preview available for this item.")):u["default"].createElement("div",{className:"preview__overlay"
|
||||
},u["default"].createElement("h3",{className:"preview__overlay-text"},"No preview available.")),u["default"].createElement("div",{className:"flexbox-area-grow fill-height cms-content__right preview"},e,u["default"].createElement("a",{
|
||||
href:"",className:"cms-content__back-btn font-icon-left-open-big"}),u["default"].createElement("div",{className:"toolbar toolbar--south"},u["default"].createElement("div",{className:"btn-toolbar"},o)))
|
||||
|
||||
}}]),t}(p["default"])
|
||||
},u["default"].createElement("h3",{className:"preview__overlay-text"},"No preview available.")),u["default"].createElement("div",{className:"flexbox-area-grow fill-height preview"},e,u["default"].createElement("div",{
|
||||
className:"toolbar toolbar--south"},u["default"].createElement("button",{className:"btn btn-secondary font-icon-left-open-big toolbar__back-button hidden-lg-up",type:"button"},"Back"),u["default"].createElement("div",{
|
||||
className:"btn-toolbar"},o)))}}]),t}(p["default"])
|
||||
h.propTypes={itemLinks:u["default"].PropTypes.object,itemId:u["default"].PropTypes.number},t["default"]=h}])
|
||||
|
||||
98
admin/client/dist/styles/bundle.css
vendored
98
admin/client/dist/styles/bundle.css
vendored
@ -3745,7 +3745,7 @@ pre code{
|
||||
-ms-user-select:none;
|
||||
user-select:none;
|
||||
border:1px solid transparent;
|
||||
padding:.4615rem .7692rem;
|
||||
padding:.3846rem .7692rem;
|
||||
font-size:1rem;
|
||||
line-height:1.539;
|
||||
border-radius:.23rem;
|
||||
@ -9027,7 +9027,7 @@ button.loading.ss-ui-action-constructive .ui-icon,input.loading.ss-ui-action-con
|
||||
}
|
||||
|
||||
.ss-ui-button.ss-ui-button-constructive[class*=font-icon-],.ss-ui-button[class*=font-icon-],.ss-ui-button[class^=font-icon-]{
|
||||
padding:.4615rem .7692rem;
|
||||
padding:.3846rem .7692rem;
|
||||
vertical-align:middle;
|
||||
box-shadow:none;
|
||||
border:0;
|
||||
@ -15085,7 +15085,7 @@ fieldset+.btn-toolbar{
|
||||
}
|
||||
|
||||
button.close{
|
||||
padding:.4615rem .7692rem;
|
||||
padding:.3846rem .7692rem;
|
||||
}
|
||||
|
||||
.btn--top-right{
|
||||
@ -15243,8 +15243,8 @@ th:only-child .grid-field__sort{
|
||||
vertical-align:bottom;
|
||||
margin:0;
|
||||
float:right;
|
||||
margin-top:-.4615rem;
|
||||
margin-bottom:-.4615rem;
|
||||
margin-top:-.3846rem;
|
||||
margin-bottom:-.3846rem;
|
||||
}
|
||||
|
||||
.grid-field .grid-field__filter-clear,.grid-field .grid-field__filter-submit{
|
||||
@ -15377,6 +15377,8 @@ div.grid-field__sort-field+.form__fieldgroup-item{
|
||||
|
||||
.preview{
|
||||
position:relative;
|
||||
background-color:#f6f7f8;
|
||||
border-left:1px solid #ced3d9;
|
||||
}
|
||||
|
||||
@media (max-width:991px){
|
||||
@ -15385,6 +15387,7 @@ div.grid-field__sort-field+.form__fieldgroup-item{
|
||||
right:0;
|
||||
z-index:2;
|
||||
width:100%;
|
||||
border-left:0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -15494,15 +15497,22 @@ div.grid-field__sort-field+.form__fieldgroup-item{
|
||||
background-color:#f6f7f8;
|
||||
}
|
||||
|
||||
.cms-backlink .toolbar__back-button,.toolbar__back-button{
|
||||
.toolbar__back-button{
|
||||
float:left;
|
||||
margin:.76925rem .6154rem .76925rem -.76925rem;
|
||||
padding-left:.3077rem;
|
||||
padding-right:.3077rem;
|
||||
border:0;
|
||||
color:#66727d;
|
||||
}
|
||||
|
||||
.toolbar--south .toolbar__back-button{
|
||||
margin-top:0;
|
||||
margin-right:5px;
|
||||
}
|
||||
|
||||
.toolbar__back-button.btn--no-text{
|
||||
padding-right:.3077rem;
|
||||
}
|
||||
|
||||
.nav-tabs{
|
||||
margin-bottom:1.5385rem;
|
||||
}
|
||||
@ -15960,62 +15970,6 @@ body,html{
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width:991px){
|
||||
.campaign-items{
|
||||
width:100%;
|
||||
z-index:1;
|
||||
}
|
||||
}
|
||||
|
||||
.campaigns{
|
||||
position:relative;
|
||||
height:100%;
|
||||
}
|
||||
|
||||
.campaigns .cms-content--selected{
|
||||
display:block;
|
||||
}
|
||||
|
||||
.campaigns .cms-content__back-btn{
|
||||
width:36px;
|
||||
height:36px;
|
||||
background-color:rgba(79,88,97,.8);
|
||||
display:block;
|
||||
position:absolute;
|
||||
top:8px;
|
||||
left:12px;
|
||||
content:"5";
|
||||
font-size:16px;
|
||||
line-height:20px;
|
||||
color:#fff;
|
||||
padding:8px;
|
||||
border-radius:50%;
|
||||
font-family:silverstripe;
|
||||
z-index:1;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
.campaigns .cms-content__back-btn:hover{
|
||||
background-color:#4f5861;
|
||||
text-decoration:none;
|
||||
}
|
||||
|
||||
@media (min-width:992px){
|
||||
.campaigns{
|
||||
padding-left:300px;
|
||||
}
|
||||
|
||||
.campaigns .cms-content__back-btn{
|
||||
display:none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width:1200px){
|
||||
.campaigns{
|
||||
padding-left:448px;
|
||||
}
|
||||
}
|
||||
|
||||
.panel{
|
||||
margin-left:auto;
|
||||
margin-right:auto;
|
||||
@ -16092,6 +16046,22 @@ body,html{
|
||||
display:flex;
|
||||
}
|
||||
|
||||
.campaign-admin__campaign{
|
||||
position:relative;
|
||||
height:100%;
|
||||
}
|
||||
|
||||
.campaign-admin__campaign-items{
|
||||
width:100%;
|
||||
z-index:1;
|
||||
}
|
||||
|
||||
@media (min-width:992px){
|
||||
.campaign-admin__campaign-items{
|
||||
width:300px;
|
||||
}
|
||||
}
|
||||
|
||||
.campaign-admin__item-links--has-links,.campaign-admin__item-links--is-linked{
|
||||
color:#29abe2;
|
||||
float:right;
|
||||
|
||||
@ -1,3 +1,19 @@
|
||||
// Required for preview position
|
||||
.campaign-admin__campaign {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.campaign-admin__campaign-items {
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
width: $cms-panel-sm;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Campaign items which have linked associations
|
||||
.campaign-admin__item-links--has-links,
|
||||
.campaign-admin__item-links--is-linked {
|
||||
|
||||
@ -147,12 +147,12 @@ class CampaignAdminList extends SilverStripeComponent {
|
||||
</div>
|
||||
);
|
||||
const bodyClass = [
|
||||
'panel', 'panel--padded', 'panel--scrollable', 'flexbox-area-grow', 'campaign-items',
|
||||
'panel', 'panel--padded', 'panel--scrollable', 'flexbox-area-grow',
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="fill-width campaigns">
|
||||
<div className="fill-height campaign-items cms-content__left cms-campaigns"
|
||||
<div className="fill-width campaign-admin__campaign">
|
||||
<div className="fill-height campaign-admin__campaign-items"
|
||||
aria-expanded="true"
|
||||
>
|
||||
<Toolbar showBackButton handleBackButtonClick={this.props.handleBackButtonClick}>
|
||||
@ -209,7 +209,7 @@ class CampaignAdminList extends SilverStripeComponent {
|
||||
// TODO Implement "revert" feature
|
||||
actionProps = Object.assign(actionProps, {
|
||||
title: i18n._t('Campaigns.REVERTCAMPAIGN'),
|
||||
bootstrapButtonStyle: 'default',
|
||||
bootstrapButtonStyle: 'secondary-outline',
|
||||
icon: 'back-in-time',
|
||||
disabled: true,
|
||||
});
|
||||
|
||||
@ -19,79 +19,14 @@ body {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
|
||||
// TODO move out of layout
|
||||
@include media-breakpoint-down(md) {
|
||||
.cms-content.has-panel .cms-content-tools {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.campaign-items {
|
||||
@include media-breakpoint-down(md) {
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.campaigns { // TODO move to campaign container
|
||||
position: relative;
|
||||
height: 100%;
|
||||
|
||||
// Overlay preview if there isn't enough space for both items and preview
|
||||
.cms-content--selected {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Back button for smaller screens, closes preview
|
||||
.cms-content__back-btn {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
background-color: rgba($gray-dark, 0.8);
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 12px;
|
||||
content: "5";
|
||||
font-size: 16px;
|
||||
line-height: 20px;
|
||||
color: $white;
|
||||
padding: 8px;
|
||||
border-radius: 50%;
|
||||
font-family: silverstripe;
|
||||
z-index: 1;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: $gray-dark;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding-left: $cms-panel-sm;
|
||||
|
||||
// .cms-content__left {
|
||||
// width: $cms-panel-sm;
|
||||
// }
|
||||
//
|
||||
// .cms-content__right {
|
||||
// display: block;
|
||||
// border-left: 1px solid $border-color;
|
||||
// }
|
||||
|
||||
.cms-content__back-btn {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
padding-left: $cms-panel-md;
|
||||
|
||||
// .cms-content__left {
|
||||
// width: $cms-panel-md;
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Panels, basic holder for CMS content areas
|
||||
// Use .container-fluid if you want only padding left and right
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user