fixes ui upgrade

claroline · Jul 28, 2023 · 1507b28 · 1507b28
1 parent d06d064
commit 1507b28
Show file tree

Hide file tree

Showing 27 changed files with 354 additions and 372 deletions.
diff --git a/src/main/app/Resources/modules/content/components/restriction.jsx b/src/main/app/Resources/modules/content/components/restriction.jsx
@@ -3,6 +3,7 @@ import {PropTypes as T} from 'prop-types'
 import classes from 'classnames'
 
 import {Alert} from '#/main/app/components/alert'
+import {ContentHtml} from '#/main/app/content/components/html'
 
 const ContentRestriction = props => {
   let title, help
@@ -24,7 +25,7 @@ const ContentRestriction = props => {
       icon={props.icon}
       title={title}
     >
-      {help}
+      <ContentHtml>{help}</ContentHtml>
 
       {props.failed && props.children}
     </Alert>

diff --git a/src/main/app/Resources/modules/content/form/parameters/components/main.jsx b/src/main/app/Resources/modules/content/form/parameters/components/main.jsx
@@ -19,7 +19,6 @@ const SectionParameters = props =>
     icon={props.icon ? `fa fa-fw fa-${props.icon}` : undefined}
     title={props.title || trans('facet_section')}
     subtitle={props.description}
-    className="embedded-form-section"
     fill={true}
     actions={[
       {

diff --git a/src/main/app/Resources/modules/data/components/display.jsx b/src/main/app/Resources/modules/data/components/display.jsx
@@ -82,11 +82,19 @@ class DataDisplay extends Component {
 
   renderInput() {
     if (!this.state.loaded) {
-      return trans('loading')
+      return (
+        <div role="presentation" className="text-secondary">
+          {trans('loading')}
+        </div>
+      )
     }
 
     if (this.state.error) {
-      return trans('error')
+      return (
+        <div role="presentation" className="text-danger">
+          {trans('error')}
+        </div>
+      )
     }
 
     if (this.props.children) {
@@ -103,7 +111,8 @@ class DataDisplay extends Component {
         merge({}, this.props.options, {
           id: this.props.id,
           label: this.props.label,
-          data: this.props.value, // todo rename into `value` in implementations later
+          data: this.props.value, // deprecated
+          value: this.props.value,
           error: this.props.error,
           placeholder: this.props.placeholder,
           size: this.props.size
@@ -113,16 +122,24 @@ class DataDisplay extends Component {
 
     if (!this.props.value && false !== this.props.value && 0 !== this.props.value) {
       return (
-        <span className="text-secondary d-block">{trans('empty_value')}</span>
+        <div role="presentation" className="text-secondary">{trans('empty_value')}</div>
       )
     }
 
     if (this.state.render) {
       // type render method
-      return this.state.render(this.props.value, this.props.options || {})
+      return (
+        <div role="presentation">
+          {this.state.render(this.props.value, this.props.options || {})}
+        </div>
+      )
     }
 
-    return this.props.value
+    return (
+      <div role="presentation">
+        {this.props.value}
+      </div>
+    )
   }
 
   render() {

diff --git a/src/main/app/Resources/modules/data/components/input.jsx b/src/main/app/Resources/modules/data/components/input.jsx
@@ -1,4 +1,4 @@
-import {createElement, Component} from 'react'
+import React, {createElement, Component} from 'react'
 import {PropTypes as T} from 'prop-types'
 import get from 'lodash/get'
 import merge from 'lodash/merge'
@@ -97,11 +97,19 @@ class DataInput extends Component {
 
   renderInput() {
     if (!this.state.loaded) {
-      return trans('loading')
+      return (
+        <div role="presentation" className="text-secondary">
+          {trans('loading')}
+        </div>
+      )
     }
 
     if (this.state.error) {
-      return trans('error')
+      return (
+        <div role="presentation" className="text-danger">
+          {trans('error')}
+        </div>
+      )
     }
 
     if (this.props.children) {

diff --git a/src/main/app/Resources/modules/modals/selection/components/modal.jsx b/src/main/app/Resources/modules/modals/selection/components/modal.jsx
@@ -9,6 +9,7 @@ import {GridSelection} from '#/main/app/content/grid/components/selection'
 const SelectionModal = props =>
   <Modal
     {...omit(props, 'items', 'handleSelect', 'selectAction')}
+    size="lg"
   >
     <GridSelection
       items={props.items}

diff --git a/src/main/app/Resources/styles/_variables.old.scss b/src/main/app/Resources/styles/_variables.old.scss
@@ -152,7 +152,7 @@ $top-bar-max-width:           100%; // max width for the top bar content (do not
 $top-bar-height:              60px + $top-bar-border-bottom-size !default;
 
 $top-bar-brand-color:           $top-bar-color !default;
-$top-bar-brand-secondary-color: $primary !default;
+$top-bar-brand-secondary-color: color-contrast($menu, $primary, $top-bar-brand-color) !default;
 $top-bar-brand-font-size:       $font-size-lg !default;
 $top-bar-brand-font-weight:     $font-weight-medium !default;
 
@@ -217,7 +217,7 @@ $page-action-primary-color:  color-contrast($primary);
 $page-action-primary-bg:     $primary;
 $page-action-primary-border: transparent;
 
-$page-action-default-color:  $gray-dark;
+$page-action-default-color:  $body-color;
 $page-action-default-bg:     transparent;
 $page-action-default-border: transparent;
 

diff --git a/src/main/app/Resources/styles/data/_cards.scss b/src/main/app/Resources/styles/data/_cards.scss
@@ -99,21 +99,6 @@
     .btn {
         padding: $data-grid-gutter;
     }
-
-    .dropdown.open {
-        /*.btn {
-            position: relative;
-            background: $gray-lighter;
-            border-color: $dropdown-border;
-            border-bottom-color: $dropdown-bg;
-            box-shadow: $dropdown-menu-box-shadow;
-            background-clip: padding-box;
-        }*/
-    }
-
-    .dropdown-menu {
-        //margin-top: -1px;
-    }
 }
 
 // clickable variant

diff --git a/src/main/app/Resources/styles/data/types/_choice.scss b/src/main/app/Resources/styles/data/types/_choice.scss
@@ -2,82 +2,6 @@
  * Styles for `choice` data type.
  */
 
-/*.choice-control {
-    .radio,
-    .radio-inline,
-    .checkbox,
-    .checkbox-inline {
-        margin: 0;
-
-        // simulate a .form-control
-        @include input-size('label', $input-height-base, $padding-base-vertical, $padding-base-horizontal, $font-size-base, $line-height-base, $input-border-radius);
-        label {
-            width: 100%;
-            border: 1px solid transparent;
-            background: $gray-lighter;
-
-            @include transition("border-color ease-in-out .15s, background ease-in-out .15s");
-        }
-
-        &.selected label {
-            color: $state-selected-text;
-            border: 1px solid $state-selected-border;
-            background: $state-selected-bg;
-            font-weight: bold;
-        }
-
-        &.disabled {
-            opacity: 0.9;
-        }
-
-        &:not(.disabled) {
-            label:hover {
-                background: darken($gray-lighter, 10%);
-            }
-
-            // todo : merge with list selected
-            &.selected label:hover {
-                color: darken($state-selected-text, 10%);
-                background: darken($state-selected-bg, 10%);
-                border-color: darken($state-selected-border, 10%);
-            }
-        }
-    }
-
-    .radio,
-    .checkbox {
-        label {
-            // reset fixed height added by .input-size() to allow long text to expand properly
-            min-height: $input-height-base;
-            height: auto;
-        }
-    }
-
-    .radio + .radio,
-    .checkbox + .checkbox {
-        margin-top: 5px;
-    }
-
-    // sizing variants
-    &.sm {
-        .radio,
-        .radio-inline,
-        .checkbox,
-        .checkbox-inline {
-            @include input-size('label', $input-height-small, $padding-small-vertical, $padding-small-horizontal, $font-size-sm, $line-height-small, $input-border-radius-sm);
-        }
-    }
-
-    &.lg {
-        .radio,
-        .radio-inline,
-        .checkbox,
-        .checkbox-inline {
-            @include input-size('label', $input-height-large, $padding-large-vertical, $padding-large-horizontal, $font-size-lg, $line-height-large, $input-border-radius-lg);
-        }
-    }
-}*/
-
 .choice-cell {
     .label {
         display: inline-block;