RiverLea 1.2-5.81: regression fixes, adds crm-designer.css

ext/riverlea/CHANGELOG.md

@@ -1,3 +1,12 @@
+1.2.0-5.81.beta
+ - CHANGED - version numbering (again!) ref
+https://lab.civicrm.org/extensions/riverlea/-/issues/44#note_174132
+ - FIXED - Thames, dropdown clipping, ref
+https://lab.civicrm.org/extensions/riverlea/-/issues/90
+ - FIXED - Backbone.js Profile edit via Event/Contribution page issues, ref https://lab.civicrm.org/extensions/riverlea/-/issues/92
+ - ADDED - crm.designer.css into /core/css to allow for RL overrides. Added some simple integrations (button colour, spacing fixe)
+ - CHANGED - dropdown items hover state now has a background color that should contrast the hover text colour - it was using a variable that was sometimes transparent, creating contrast ratio issues in Minetta
+
 1.80.14
  - FIXED - regression caused by trying to reset clipping in Thames (ref: https://lab.civicrm.org/extensions/riverlea/-/issues/91)
 

ext/riverlea/core/css/_cms.css

@@ -25,7 +25,7 @@ html.admin-bar #admin-bar-menu .civicrm .admin-bar-link-icon {
 
 /* Drupal - body.page-civicrm */
 
-/* D7 Garland */
+/* D7 */
 body.page-civicrm > #page {
   padding: 0;
   margin: 0;

ext/riverlea/core/css/_core.css

@@ -4,5 +4,5 @@
    can be merged later. */
 
 @import url(components/_accordion.css); @import url(components/_alerts.css); @import url(components/_buttons.css); @import url(components/_form.css); @import url(components/_icons.css); @import url(components/_nav.css); @import url(components/_tabs.css); @import url(components/_dropdowns.css); @import url(components/_tables.css); @import url(components/_dialogs.css); @import url(components/_page.css); @import url(components/_components.css); @import url(components/_front.css); :root {
-  --crm-release: '1.80.14';
+  --crm-release: '1.2.0-5.81.beta';
 }

ext/riverlea/core/css/components/_dropdowns.css

@@ -90,7 +90,7 @@
 #crm-create-new-list ul a:focus {
   text-decoration: none;
   color: var(--crm-c-text);
-  background-color: var(--crm-c-page-background);
+  background-color: var(--crm-c-background);
 }
 
 /* In-table dropdown */

ext/riverlea/core/css/components/_tables.css

@@ -136,17 +136,6 @@ table.dataTable.order-column.stripe tbody tr.extension-installed.even > .sorting
 .crm-container .crm-case-caseview-form-block table {
   box-shadow: none;
 }
-/*.crm-container .dataTables_wrapper,
-.crm-container .form-item:has(> table),
-.crm-container div:has(> table) {  simple fix-all for making many tables scroll when needed
-  overflow-x: auto;
-  max-width: 100%;
-}*/
-/* needed to reset the scroll in Thames but causes other problem - #91)
-.crm-container div:has(td span > .panel),
-.crm-container div:has(td > div > .dropdown-menu) {
-  overflow: initial;
-}*/
 .crm-selection-reset {
   padding: var(--crm-m) 0;
   margin-bottom: var(--crm-m);

ext/riverlea/core/css/crm.designer.css

@@ -0,0 +1,268 @@
+.crm-profile-selector-preview-pane {
+  width: 75%;
+  min-width: 500px;
+  height: 20em;
+  border: 1px solid black;
+  padding: 4px;
+}
+
+.crm-container .crm-profile-selector-preview .icon {
+  float: none;
+}
+
+.crm-designer-toolbar {
+  width: 290px;
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+
+.crm-designer-toolbar hr,
+.crm-designer-palette-search {
+  margin: var(--crm-m) 0;
+}
+
+.crm-designer-palette-search .crm-filter-objects {
+  margin-bottom: var(--crm-m);
+}
+
+.crm-designer-palette-search input {
+  max-width: 75%;
+}
+
+.crm-designer-toolbar .ui-resizable-w {
+  border-left: 4px dotted var(--crm-c-background4);
+  cursor: ew-resize;
+  height: 50px;
+  top: 45%;
+  left: -10px; /* stops resize handle overlap */
+}
+
+.crm-designer-toolbar .ui-resizable-w:hover {
+  border-left: 4px dotted #6b6b6b;
+}
+
+.crm-designer-palette {
+  height: 20em;
+}
+
+.crm-designer-palette-section > a {
+  font-weight: bold;
+}
+
+.crm-designer-palette .crm-designer-palette-field,
+.crm-designer-palette .crm-designer-palette-field.disabled:hover {
+  padding: 1px;
+  border: 1px dashed transparent;
+  background-color: transparent;
+  margin-right: 0.5em;
+}
+
+.crm-designer-palette .crm-designer-palette-field a {
+  cursor: move;
+}
+
+.crm-designer-palette .crm-designer-palette-field:hover,
+.crm-designer-fields-region .crm-designer-row:hover,
+.crm-designer-open .crm-designer-row,
+.crm-designer-row-placeholder {
+  border: 1px dashed gray;
+  cursor: move;
+  background-color: var(--crm-c-background);
+}
+
+.crm-designer-palette .crm-designer-palette-field.disabled a,
+.crm-designer-open .crm-designer-row:hover {
+  cursor: default;
+}
+
+.crm-container .crm-designer-palette .crm-designer-palette-tree a {
+  color: #222;
+  font-style: normal;
+}
+
+.crm-container .crm-designer-palette .disabled a,
+.crm-designer-palette .crm-designer-palette-tree .disabled a.jstree-search {
+  color: #999;
+}
+
+.crm-designer-palette .jstree-leaf ins {
+  width: 6px;
+}
+
+/* Cancel hovering affect from JSTree theme -- we already do this! */
+.crm-designer-palette .crm-designer-palette-tree .jstree-hovered {
+  background: transparent;
+  border: 1px transparent;
+  padding: 1px 2px 0 2px;
+}
+
+.crm-designer-canvas {
+  padding-right: 1em;
+  margin-right: 300px;
+}
+
+.crm-container.ui-dialog .crm-designer-buttonset-region.ui-dialog-buttonset {
+  text-align: center;
+  margin: auto;
+  padding: 0;
+}
+
+.crm-designer-field-binding {
+  border: 1px inset black;
+  padding: 0.4em;
+  background: #ccc;
+}
+
+.crm-designer-fields {
+  min-width: 100px;
+  /* to allow dropping in big whitespace, coordinate with min-height of dialog */
+  min-height: 500px;
+}
+
+.crm-designer-duplicate .crm-designer-row {
+  background: #fbb;
+}
+
+.crm-designer-duplicate .field-location_type_id,
+.crm-designer-duplicate .field-phone_type_id {
+  color: #f00;
+}
+
+.crm-designer-row .crm-designer-buttons {
+  right: 5px;
+  top: 5px;
+  position: absolute;
+  height: 20px;
+}
+
+.crm-designer-fields-region .crm-designer-buttons {
+  display: none;
+}
+
+.crm-designer-fields-region .crm-designer-open .crm-designer-buttons,
+.crm-designer-row:hover .crm-designer-buttons {
+  display: block;
+}
+
+.crm-designer-row .crm-designer-buttons a {
+  cursor: pointer;
+  display: inline-block;
+  padding: var(--crm-s);
+  font-size: var(--crm-m2);
+  border-radius: 4px;
+  border: 0;
+}
+
+.crm-designer .crm-designer-palette-tree button {
+  font-size: .8em;
+}
+
+.crm-designer .crm-designer-palette-tree span.ui-button-text {
+  padding: 0.4em;
+}
+
+.crm-designer .crm-designer-edit-custom {
+  position: absolute;
+  right: 5px;
+  top: 35px;
+  font-size: .8em;
+  border: 1px solid #cfcec3;
+}
+
+button#crm-designer-add-custom-set {
+  margin-top: 10px;
+}
+
+.ui-sortable-helper > .crm-designer-row {
+  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
+  opacity: 0.75;
+}
+
+.crm-designer-row .crm-designer-buttons a.crm-designer-action-settings:hover {
+  background-color: var(--crm-c-success);
+  color: var(--crm-c-success-text);
+  text-decoration: none;
+}
+
+.crm-designer-row .crm-designer-buttons a.crm-designer-action-remove:hover {
+  background-color: var(--crm-c-alert);
+  color: var(--crm-c-alert-text);
+  text-decoration: none;
+}
+
+.crm-designer-row,
+.crm-designer-row-placeholder {
+  border: 1px dashed transparent;
+  padding: 0.3em;
+  margin: auto;
+  position: relative;
+}
+
+.crm-designer-row-label {
+  padding: 0.5em 0;
+}
+
+.crm-designer-label {
+  font-weight: bold;
+}
+
+.crm-designer-row-placeholder {
+  visibility: visible !important;
+  height: 2em;
+}
+
+.crm-designer-dialog .description {
+  margin: 0 2em 0 0;
+}
+
+/* Hack for Drupal 8 for some reason was moving it around strange */
+.crm-designer-dialog .ui-resizable {
+  position: absolute;
+}
+
+.crm-designer-dialog .disabled .description {
+  display: none;
+}
+
+.crm-designer-dialog li.crm-designer-row-placeholder,
+.crm-designer-dialog li.ui-draggable-dragging,
+.crm-designer-dialog .bbf-form ul {
+  list-style-image: none;
+  list-style: none;
+}
+
+.ui-dialog .crm-designer-dialog.ui-dialog-content {
+  overflow: auto;
+  padding-right: .25em;
+}
+
+.crm-designer-dialog .full-height {
+  height: 100%;
+}
+
+.crm-designer {
+  position: relative;
+}
+
+.crm-profile-selector-preview-pane,
+.crm-designer-dialog .crm-designer .scroll {
+  overflow-x: auto;
+  overflow-y: scroll;
+}
+
+.ui-dialog {
+  border: 1px solid #444;
+  box-shadow: 0 0 12px rgba(0, 0, 0, 0.3);
+}
+
+/* Hide annoying 'preview' message */
+.crm-profile-selector-preview-pane div.profile-preview-msg {
+  display: none;
+}
+
+/* Adds spacing between form rows */
+
+.crm-designer-field-detail fieldset > ul > li {
+  margin-bottom: var(--crm-s);
+}

ext/riverlea/info.xml

@@ -12,7 +12,7 @@
     <url desc="Licensing">http://www.gnu.org/licenses/agpl-3.0.html</url>
   </urls>
   <releaseDate>[civicrm.releaseDate]</releaseDate>
-  <version>[civicrm.version]</version>
+  <version>1.2-[civicrm.version]</version>
   <develStage>stable</develStage>
   <compatibility>
     <ver>[civicrm.majorVersion]</ver>

ext/riverlea/streams/thames/css/civicrm.css

@@ -382,6 +382,14 @@ div:has(> table) {
   overflow-x: auto;
   max-width: 100%;
 }
+/* When a menu is activated, allow it 20rem height to prevent it causing scroll
+ * when the menu is opened on a row near the bottom of the table and
+ * which the user might not notice / might make the menu hard to access.
+ * https://lab.civicrm.org/extensions/riverlea/-/issues/90
+ */
+div:has(> table .btn-slide-active, > table .dropdown-toggle[aria-expanded="true"]) {
+  padding-bottom: 20rem;
+}
 
 /* ...and adjust the individual row checkboxes to be in line
  * Ah, no we have no way to target these.