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 {
|
||||
border-radius: 0;
|
||||
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-preset-es2015": "^6.24.1",
|
||||
"babel-preset-react": "^6.24.1",
|
||||
"enzyme": "^3.3.0",
|
||||
"enzyme-adapter-react-16": "^1.1.1",
|
||||
"enzyme": "^3.9.0",
|
||||
"enzyme-adapter-react-16": "^1.9.1",
|
||||
"enzyme-to-json": "^3.3.0",
|
||||
"eslint": "^2.9.0",
|
||||
"eslint-config-wagtail": "0.1.1",
|
||||
|
|
@ -90,13 +90,14 @@
|
|||
"draftail": "^1.2.1",
|
||||
"element-closest": "^2.0.2",
|
||||
"focus-trap-react": "^3.1.0",
|
||||
"prop-types": "^15.6.0",
|
||||
"react": "^16.2.0",
|
||||
"react-dom": "^16.2.0",
|
||||
"prop-types": "^15.6.2",
|
||||
"react": "^16.4.0",
|
||||
"react-dom": "^16.4.0",
|
||||
"react-redux": "^5.0.6",
|
||||
"react-streamfield": "^0.9.2",
|
||||
"react-transition-group": "^1.1.3",
|
||||
"redux": "^3.7.2",
|
||||
"redux-thunk": "^2.2.0",
|
||||
"redux": "^4.0.0",
|
||||
"redux-thunk": "^2.3.0",
|
||||
"whatwg-fetch": "^2.0.3"
|
||||
},
|
||||
"scripts": {
|
||||
|
|
|
|||
|
|
@ -27,11 +27,10 @@ function makeHalloRichTextEditable(id, plugins) {
|
|||
}
|
||||
|
||||
var closestObj = input.closest('.object');
|
||||
var isRoot = input.closest('.struct-block').length == 0;
|
||||
|
||||
editor.hallo({
|
||||
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 */
|
||||
plugins: plugins
|
||||
}).on('hallomodified', function(event, data) {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
@import 'wagtailadmin/scss/helpers';
|
||||
@import '../../../../../../client/scss/components/streamfield';
|
||||
|
||||
.page-editor {
|
||||
.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 {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
background-color: #f6f6f6;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
|
||||
&.required .field > label:after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Undo column widths usually applied to the contents of a field panel
|
||||
.object-layout_big-part > fieldset {
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
.object-layout_big-part {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
padding-bottom: 0;
|
||||
max-width: unset;
|
||||
// Workaround to make sure blocks do not overflow horizontally.
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.block_field > .field-content {
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
@import '../../../../../../client/src/components/StreamField/StreamField';
|
||||
|
|
@ -506,7 +506,11 @@ class BlockWidget(forms.Widget):
|
|||
|
||||
@property
|
||||
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):
|
||||
return self.block_def.value_from_datadict(data, files, name)
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue