kopia lustrzana https://github.com/wagtail/wagtail
Replace streamfield CSS with react-streamfield CSS
Matt Westcott
rodzic
05f129c8f5
commit
725b01c809
|
|
@ -1,401 +0,0 @@
|
||||||
ul.sequence {
|
|
||||||
@include clearfix;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
li.sequence-member {
|
|
||||||
@include clearfix;
|
|
||||||
position: relative;
|
|
||||||
border: 1px solid transparent;
|
|
||||||
border-width: 1px 0;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: $color-input-focus;
|
|
||||||
border-color: darken($color-input-focus, 10%);
|
|
||||||
|
|
||||||
.sequence-member-inner {
|
|
||||||
> .struct-block > label,
|
|
||||||
> .char_field > label,
|
|
||||||
.sequence > label {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.struct-block .fields {
|
|
||||||
@include column(10);
|
|
||||||
padding-left: 0;
|
|
||||||
padding-right: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.struct-block .sequence-container {
|
|
||||||
@include column(9);
|
|
||||||
padding-left: 0;
|
|
||||||
padding-right: 0;
|
|
||||||
|
|
||||||
.sequence-member-inner {
|
|
||||||
padding: 1.5em 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Copied from page-editor.scss
|
|
||||||
.struct-block li.required > label:after {
|
|
||||||
content: '*';
|
|
||||||
color: $color-red;
|
|
||||||
font-weight: bold;
|
|
||||||
display: inline-block;
|
|
||||||
margin-left: 0.5em;
|
|
||||||
line-height: 1em;
|
|
||||||
font-size: 13px;
|
|
||||||
}
|
|
||||||
|
|
||||||
// The top level sequence doesn't have a sequnce-member-inner. This block is basically for things that should only affect inner blocks
|
|
||||||
.sequence-member-inner {
|
|
||||||
@include clearfix;
|
|
||||||
position: relative;
|
|
||||||
padding: 1.5em 50px;
|
|
||||||
|
|
||||||
.sequence-member {
|
|
||||||
border: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
// sequences within sequences, such as a ListBlock within StructBlock
|
|
||||||
> .sequence .sequence-inner {
|
|
||||||
@include column(10);
|
|
||||||
padding-left: 0;
|
|
||||||
padding-right: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sequence-type-list .sequence-container-inner {
|
|
||||||
@include column(10);
|
|
||||||
padding-left: 0;
|
|
||||||
padding-right: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sequence-type-list .sequence-member-inner {
|
|
||||||
padding: 0;
|
|
||||||
padding-top: 0.5em;
|
|
||||||
padding-bottom: 1.2em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.fields > li {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.sequence-member__help {
|
|
||||||
opacity: 0;
|
|
||||||
|
|
||||||
.sequence-member:hover & {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-help-inverse {
|
|
||||||
margin-right: 0.5em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Image chooser as direct descendant of top-level streamfield has special display
|
|
||||||
.sequence-member-inner > .widget-admin_image_chooser {
|
|
||||||
label {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.field-content {
|
|
||||||
display: block;
|
|
||||||
float: none;
|
|
||||||
width: 100%;
|
|
||||||
text-align: center;
|
|
||||||
max-width: 500px;
|
|
||||||
margin: auto;
|
|
||||||
border: 1px solid $color-grey-4;
|
|
||||||
padding: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chooser {
|
|
||||||
.chosen {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.unchosen {
|
|
||||||
&:before {
|
|
||||||
float: none;
|
|
||||||
font-size: 4em;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.preview-image {
|
|
||||||
float: none;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.actions li {
|
|
||||||
display: inline-block;
|
|
||||||
float: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// This horridly specific selector ensures text inputs, rich text fields and textareas
|
|
||||||
// that are direct children of highest level sequence should be borderless and full-width
|
|
||||||
.block_field > .field-content > .input > .sequence-container > .sequence-container-inner > .sequence > .sequence-member > .sequence-member-inner {
|
|
||||||
> .widget-text_input input,
|
|
||||||
> .halloeditor,
|
|
||||||
> .widget-textarea textarea {
|
|
||||||
padding: 0;
|
|
||||||
max-width: 1024px;
|
|
||||||
border: 0;
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
> .Draftail-Editor {
|
|
||||||
padding: 0;
|
|
||||||
max-width: 1024px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Controls for ordering and deletion of items in a sequence
|
|
||||||
.sequence-controls {
|
|
||||||
@include transition(opacity 0.2s ease);
|
|
||||||
border-radius: 2px 0 0;
|
|
||||||
border: 1px solid darken($color-input-focus, 10%);
|
|
||||||
border-width: 1px 1px 0;
|
|
||||||
opacity: 0;
|
|
||||||
visibility: hidden;
|
|
||||||
position: absolute;
|
|
||||||
top: -30px;
|
|
||||||
right: 0;
|
|
||||||
z-index: 1;
|
|
||||||
overflow: visible;
|
|
||||||
background-color: $color-input-focus;
|
|
||||||
padding: 0 0 0 1em;
|
|
||||||
height: 30px;
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 0.7rem;
|
|
||||||
display: inline-block;
|
|
||||||
margin-right: 1em;
|
|
||||||
line-height: 1.8rem;
|
|
||||||
|
|
||||||
label {
|
|
||||||
color: $color-teal;
|
|
||||||
font-weight: normal;
|
|
||||||
text-transform: uppercase;
|
|
||||||
float: none;
|
|
||||||
width: auto;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
button.icon.text-replace {
|
|
||||||
width: 1.8rem;
|
|
||||||
height: 1.8rem;
|
|
||||||
|
|
||||||
&:before {
|
|
||||||
line-height: 1.3em;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// .buttons only exists for menus in stream_member.html
|
|
||||||
.button-group {
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover .buttons,
|
|
||||||
&:hover label {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.disabled {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// list controls are slightly different as they require closer proximity to their associated fields
|
|
||||||
.list-controls {
|
|
||||||
border-radius: 0;
|
|
||||||
background: transparent;
|
|
||||||
top: 1.5em;
|
|
||||||
border: 0;
|
|
||||||
padding: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Menu of other blocks to be added at each position
|
|
||||||
.stream-menu {
|
|
||||||
@include transition(all 0.2s ease);
|
|
||||||
box-shadow: inset 0 0 45px rgba(0, 0, 0, 0.3);
|
|
||||||
position: relative;
|
|
||||||
background-color: $color-grey-1;
|
|
||||||
opacity: 1;
|
|
||||||
|
|
||||||
.toggle {
|
|
||||||
@include transition(color 0.2s ease);
|
|
||||||
border-radius: 50px;
|
|
||||||
position: absolute;
|
|
||||||
top: -0.5em;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
margin: 0 auto;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 1.7em;
|
|
||||||
width: 1em;
|
|
||||||
height: 1em;
|
|
||||||
display: block;
|
|
||||||
z-index: 1;
|
|
||||||
color: $color-grey-1;
|
|
||||||
background-color: $color-white;
|
|
||||||
|
|
||||||
span {
|
|
||||||
@include visuallyhidden();
|
|
||||||
}
|
|
||||||
|
|
||||||
&:before {
|
|
||||||
transform: rotate(-45deg);
|
|
||||||
position: absolute;
|
|
||||||
font-family: wagtail;
|
|
||||||
content: map-get($icons, 'plus-inverse');
|
|
||||||
line-height: 1em;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.stream-menu-inner {
|
|
||||||
color: $color-grey-3;
|
|
||||||
transform: translate3d(0, 0, 0);
|
|
||||||
max-width: 50em;
|
|
||||||
margin: auto;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul {
|
|
||||||
@include transition(all 0.2s ease);
|
|
||||||
@include clearfix;
|
|
||||||
transform: translate3d(0, 0, 0) scale(1);
|
|
||||||
visibility: visible;
|
|
||||||
opacity: 1;
|
|
||||||
padding: 1em 1em 0;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
li {
|
|
||||||
@include column(3);
|
|
||||||
padding-bottom: $grid-gutter-width;
|
|
||||||
padding-left: 0;
|
|
||||||
padding-right: 0;
|
|
||||||
|
|
||||||
&:nth-child(4n+1) {
|
|
||||||
clear: left;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
button {
|
|
||||||
@include transition(all 0.2s ease);
|
|
||||||
background-color: transparent;
|
|
||||||
border: 0;
|
|
||||||
color: $color-grey-3;
|
|
||||||
height: auto;
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
padding: 0 0 0.5em;
|
|
||||||
overflow: visible;
|
|
||||||
|
|
||||||
span {
|
|
||||||
text-transform: none;
|
|
||||||
white-space: pre-wrap;
|
|
||||||
width: 100%;
|
|
||||||
display: block;
|
|
||||||
overflow: hidden;
|
|
||||||
padding: 0 1em;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:before {
|
|
||||||
display: block;
|
|
||||||
font-family: wagtail;
|
|
||||||
font-size: 2em;
|
|
||||||
width: 100%;
|
|
||||||
height: 2em;
|
|
||||||
line-height: 2em;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&:focus {
|
|
||||||
background-color: $color-teal;
|
|
||||||
color: $color-white;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.stream-menu-closed {
|
|
||||||
box-shadow: none;
|
|
||||||
|
|
||||||
.stream-menu-inner ul {
|
|
||||||
transform: scale(0.9);
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle {
|
|
||||||
color: $color-grey-3;
|
|
||||||
background-color: $color-white;
|
|
||||||
|
|
||||||
&:before {
|
|
||||||
transform: rotate(0deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
color: $color-teal;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
border-top-color: $color-teal;
|
|
||||||
|
|
||||||
.toggle {
|
|
||||||
color: $color-teal;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@include media-breakpoint-up(sm) {
|
|
||||||
li {
|
|
||||||
@include column(2);
|
|
||||||
|
|
||||||
&:nth-child(4n+1) {
|
|
||||||
clear: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:nth-child(6n+1) {
|
|
||||||
clear: left;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.sequence-member .stream-menu {
|
|
||||||
margin: auto auto 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sequence-member .stream-menu-closed {
|
|
||||||
opacity: 0;
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sequence-member:hover {
|
|
||||||
.sequence-controls {
|
|
||||||
visibility: visible;
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stream-menu {
|
|
||||||
visibility: visible;
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -18,16 +18,6 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// stream-field is added to hallotoolbar when invoked on a field within a stream-field
|
|
||||||
&.stream-field {
|
|
||||||
margin-top: -1em;
|
|
||||||
margin-left: 0;
|
|
||||||
|
|
||||||
&.affixed {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
button {
|
button {
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
height: 2.4em;
|
height: 2.4em;
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,49 @@
|
||||||
|
$header-padding-vertical: 6px;
|
||||||
|
$action-font-size: 18px;
|
||||||
|
|
||||||
|
|
||||||
|
@import '../../../../node_modules/react-streamfield/src/scss/index';
|
||||||
|
|
||||||
|
|
||||||
|
.c-sf-container {
|
||||||
|
// TODO: #CSSoverhaul the bse icon style here - the margin - should be reconsidered when
|
||||||
|
// re-building the icon component as part of the CSS These styles come from global
|
||||||
|
// label styles in css/mixins/_general.scss -@jonnyscholes
|
||||||
|
.c-sf-button__icon {
|
||||||
|
.icon::before {
|
||||||
|
margin: unset;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// TODO: #CSSoverhaul global label styles need to be removed. These styles come from global
|
||||||
|
// label styles in css/_grid.scss -@jonnyscholes
|
||||||
|
.field label {
|
||||||
|
float: unset; // LEGIT
|
||||||
|
width: unset; // LEGIT
|
||||||
|
max-width: unset; // LEGIT
|
||||||
|
padding: 0; // LEGIT
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: ''; // LEGIT
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// TODO: #CSSoverhaul This should be fixed as part of Wagtail CSS overhaul. The default
|
||||||
|
// `.field`/`.field-componet` (or whatever they become) should be full width by default.
|
||||||
|
// -@jonnyscholes
|
||||||
|
.field-content {
|
||||||
|
float: unset;
|
||||||
|
display: block;
|
||||||
|
width: unset;
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// TODO: #CSSoverhaul This should be fixed as part of Wagtail CSS overhaul. Whatever we do with
|
||||||
|
// `.field`/`.field-content` should take into account help text -@jonnyscholes
|
||||||
|
.help {
|
||||||
|
margin: 8px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
Plik diff jest za duży
Load Diff
15
package.json
15
package.json
|
|
@ -58,8 +58,8 @@
|
||||||
"babel-plugin-transform-react-remove-prop-types": "^0.4.12",
|
"babel-plugin-transform-react-remove-prop-types": "^0.4.12",
|
||||||
"babel-preset-es2015": "^6.24.1",
|
"babel-preset-es2015": "^6.24.1",
|
||||||
"babel-preset-react": "^6.24.1",
|
"babel-preset-react": "^6.24.1",
|
||||||
"enzyme": "^3.3.0",
|
"enzyme": "^3.9.0",
|
||||||
"enzyme-adapter-react-16": "^1.1.1",
|
"enzyme-adapter-react-16": "^1.9.1",
|
||||||
"enzyme-to-json": "^3.3.0",
|
"enzyme-to-json": "^3.3.0",
|
||||||
"eslint": "^2.9.0",
|
"eslint": "^2.9.0",
|
||||||
"eslint-config-wagtail": "0.1.1",
|
"eslint-config-wagtail": "0.1.1",
|
||||||
|
|
@ -90,13 +90,14 @@
|
||||||
"draftail": "^1.2.1",
|
"draftail": "^1.2.1",
|
||||||
"element-closest": "^2.0.2",
|
"element-closest": "^2.0.2",
|
||||||
"focus-trap-react": "^3.1.0",
|
"focus-trap-react": "^3.1.0",
|
||||||
"prop-types": "^15.6.0",
|
"prop-types": "^15.6.2",
|
||||||
"react": "^16.2.0",
|
"react": "^16.4.0",
|
||||||
"react-dom": "^16.2.0",
|
"react-dom": "^16.4.0",
|
||||||
"react-redux": "^5.0.6",
|
"react-redux": "^5.0.6",
|
||||||
|
"react-streamfield": "^0.9.2",
|
||||||
"react-transition-group": "^1.1.3",
|
"react-transition-group": "^1.1.3",
|
||||||
"redux": "^3.7.2",
|
"redux": "^4.0.0",
|
||||||
"redux-thunk": "^2.2.0",
|
"redux-thunk": "^2.3.0",
|
||||||
"whatwg-fetch": "^2.0.3"
|
"whatwg-fetch": "^2.0.3"
|
||||||
},
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
|
|
|
||||||
|
|
@ -27,11 +27,10 @@ function makeHalloRichTextEditable(id, plugins) {
|
||||||
}
|
}
|
||||||
|
|
||||||
var closestObj = input.closest('.object');
|
var closestObj = input.closest('.object');
|
||||||
var isRoot = input.closest('.struct-block').length == 0;
|
|
||||||
|
|
||||||
editor.hallo({
|
editor.hallo({
|
||||||
toolbar: 'halloToolbarFixed',
|
toolbar: 'halloToolbarFixed',
|
||||||
toolbarCssClass: (closestObj.hasClass('full')) ? 'full' : (closestObj.hasClass('stream-field') && isRoot) ? 'stream-field' : '',
|
toolbarCssClass: (closestObj.hasClass('full')) ? 'full' : '',
|
||||||
/* use the passed-in plugins arg */
|
/* use the passed-in plugins arg */
|
||||||
plugins: plugins
|
plugins: plugins
|
||||||
}).on('hallomodified', function(event, data) {
|
}).on('hallomodified', function(event, data) {
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,4 @@
|
||||||
@import 'wagtailadmin/scss/helpers';
|
@import 'wagtailadmin/scss/helpers';
|
||||||
@import '../../../../../../client/scss/components/streamfield';
|
|
||||||
|
|
||||||
.page-editor {
|
.page-editor {
|
||||||
.content-wrapper {
|
.content-wrapper {
|
||||||
|
|
@ -194,24 +193,29 @@ $object-title-height: 40px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// cursory styling for streamfield. Main styling in components/streamfield.scss
|
// cursory styling for streamfield. Main styling in client/src/components/StreamField/StreamField.scss
|
||||||
&.stream-field {
|
&.stream-field {
|
||||||
padding-left: 0;
|
background-color: #f6f6f6;
|
||||||
padding-right: 0;
|
padding-left: 20px;
|
||||||
|
padding-right: 20px;
|
||||||
|
|
||||||
&.required .field > label:after {
|
&.required .field > label:after {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Undo column widths usually applied to the contents of a field panel
|
.object-layout_big-part {
|
||||||
.object-layout_big-part > fieldset {
|
max-width: 100%;
|
||||||
width: 100%;
|
}
|
||||||
max-width: none;
|
|
||||||
|
fieldset {
|
||||||
|
padding-bottom: 0;
|
||||||
|
max-width: unset;
|
||||||
|
// Workaround to make sure blocks do not overflow horizontally.
|
||||||
|
min-width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.block_field > .field-content {
|
.block_field > .field-content {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: block;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
@import '../../../../../../client/src/components/StreamField/StreamField';
|
||||||
|
|
@ -506,7 +506,11 @@ class BlockWidget(forms.Widget):
|
||||||
|
|
||||||
@property
|
@property
|
||||||
def media(self):
|
def media(self):
|
||||||
return self.block_def.all_media()
|
return self.block_def.all_media() + forms.Media(
|
||||||
|
css={'all': [
|
||||||
|
'wagtailadmin/css/panels/streamfield.css',
|
||||||
|
]}
|
||||||
|
)
|
||||||
|
|
||||||
def value_from_datadict(self, data, files, name):
|
def value_from_datadict(self, data, files, name):
|
||||||
return self.block_def.value_from_datadict(data, files, name)
|
return self.block_def.value_from_datadict(data, files, name)
|
||||||
|
|
|
||||||
Ładowanie…
Reference in New Issue