Commit cb9011e5 authored by git's avatar git Committed by Miro Dietiker
Browse files

Issue #2837855 by yongt9412, miro_dietiker, Berdir: Offer a second experimental widget

parent 880996b9

config/schema/paragraphs_type.schema.yml

+16 −0
Original line number Diff line number Diff line
@@ -66,3 +66,19 @@ field.widget.settings.entity_reference_paragraphs: 
      type: string

    default_paragraph_type:

      type: string



field.widget.settings.paragraphs:

  type: mapping

  mapping:

    title:

      type: string

    title_plural:

      type: string

    edit_mode:

      type: string

    add_mode:

      type: string

    form_display_mode:

      type: string

    default_paragraph_type:

      type: string

css/paragraphs.admin.css

+0 −39
Original line number Diff line number Diff line
@@ -80,42 +80,3 @@ 
  padding-right: 10px;

  text-align: right;

}
 


.paragraphs-remove-button-container {

  display: flex;

  flex-flow: row-reverse;

  padding-left: 1em;

  padding-right: 1em;

  margin-left: auto;

}



.js .paragraphs-remove-button {

  background: url('/core/misc/icons/787878/ex.svg') no-repeat center;

  background-size: 13px 13px;

  width: 20px;

  border: none;

  font-size: 0px;

  line-height: 0;

}



.js .paragraphs-remove-button:hover {

  background: url('/core/misc/icons/000000/ex.svg') no-repeat center;

  background-size: 13px 13px;

  width: 20px;

  border: none;

  font-size: 0px;

  line-height: 0;

  box-shadow: none;

}





/* Override 600px breakpoint core submit button tweaks. */

@media screen and (max-width: 600px) {

  .js .paragraphs-remove-button-container .paragraphs-remove-button {

    width: 20px;

  }



  .js .paragraphs-remove-button-container .paragraphs-remove-button:hover {

    width: 20px;

  }

}

css/paragraphs.widget.css

0 → 100644
+121 −0
Original line number Diff line number Diff line 
.js .field--widget-paragraphs .dropbutton-wrapper {

  display: inline-flex;

  padding-right: 0em;

  margin-right: 0em;

  /* Override 600px breakpoint from core. */

  width: auto;

}



.js .field--widget-paragraphs .dropbutton-widget {

  position: relative;

}



.js .field--widget-paragraphs .field-multiple-table {

  margin-bottom: 10px;

}



.js .field--widget-paragraphs td {

  padding: 10px 0px 10px 0px;

}



.js .field--widget-paragraphs .field-multiple-drag {

  vertical-align: top;

}

.js .field--widget-paragraphs .draggable .tabledrag-handle {

  padding-right: 0;

  margin-left: 0;

}

.js .field--widget-paragraphs .tabledrag-handle .handle {

  margin-left: 0;

  margin-right: 0;

  padding-right: 0.2em;

}



.js .paragraph-type-top {

  display: flex;

  flex-wrap: nowrap;

  justify-content: space-between;

}

.js .paragraphs-collapsed-description {

  height: 1.538em;

  padding-left: 1em;

  padding-right: 1em;

  position: relative;

  width: 100%;



  color: #777;

  overflow: hidden;

  word-break: break-all;

}

.js .paragraphs-collapsed-description:after {

  content: '\00a0';

  display: block;

  position: absolute;

  top: 0;

  right: 1em;

  width: 3em;



  background: #fff;

  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #fff 100%);

}

.js .draggable:hover .paragraphs-collapsed-description:after,

.js .draggable:hover .paragraphs-collapsed-description:after {

  background: #f7fcff;

  background: linear-gradient(to right, rgba(247, 252, 255, 0) 0%, #f7fcff 100%);

}

.js .drag-previous .paragraphs-collapsed-description:after {

  background: #ffd;

  background: linear-gradient(to right, rgba(255, 255, 221, 0) 0%, #ffd 100%);

}

.js .paragraph-type-title {

  flex-basis: 25%;

  min-width: 80px;



  white-space: nowrap;

  text-overflow: ellipsis;

  overflow: hidden;

}



.js .field--widget-paragraphs .delta-order {

  padding-right: 10px;

  text-align: right;

}



.paragraphs-remove-button-container {

  display: flex;

  flex-flow: row-reverse;

  padding-left: 1em;

  padding-right: 1em;

  margin-left: auto;

}



.js .paragraphs-remove-button {

  background: url('/core/misc/icons/787878/ex.svg') no-repeat center;

  background-size: 13px 13px;

  width: 20px;

  border: none;

  font-size: 0px;

  line-height: 0;

}



.js .paragraphs-remove-button:hover {

  background: url('/core/misc/icons/000000/ex.svg') no-repeat center;

  background-size: 13px 13px;

  width: 20px;

  border: none;

  font-size: 0px;

  line-height: 0;

  box-shadow: none;

}





/* Override 600px breakpoint core submit button tweaks. */

@media screen and (max-width: 600px) {

  .js .paragraphs-remove-button-container .paragraphs-remove-button {

    width: 20px;

  }



  .js .paragraphs-remove-button-container .paragraphs-remove-button:hover {

    width: 20px;

  }

}

paragraphs.libraries.yml

+6 −1
Original line number Diff line number Diff line
@@ -11,3 +11,8 @@ drupal.paragraphs.admin: 
  css:

    theme:

      css/paragraphs.admin.css: {}



drupal.paragraphs.widget:

  css:

    theme:

      css/paragraphs.widget.css: {}

src/Form/ParagraphsTypeForm.php

+5 −0
Original line number Diff line number Diff line
@@ -79,6 +79,11 @@ class ParagraphsTypeForm extends EntityForm { 


    // Loop over the plugins that can be applied to this paragraph type.

    if ($behavior_plugin_definitions = $this->paragraphsBehaviorManager->getApplicableDefinitions($paragraphs_type)) {

      $form['message'] = [

        '#type' => 'container',

        '#markup' => $this->t('Behavior plugins are only supported by the EXPERIMENTAL paragraphs widget.'),

        '#attributes' => ['class' => ['messages', 'messages--warning']]

      ];

      $form['behavior_plugins'] = [

        '#type' => 'details',

        '#title' => $this->t('Behaviors'),