From 704ac64f635082b3367e5c17ed29469eacb92877 Mon Sep 17 00:00:00 2001 From: Pierre de La Morinerie Date: Wed, 4 Dec 2019 14:03:39 +0000 Subject: [PATCH 1/4] stylesheet: move all browser banner styles into site-banner.scss --- app/assets/stylesheets/application.scss | 2 +- ...outdated_browser_banner.scss => site_banner.scss} | 12 +++++++++--- ...outdated_browser_banner.scss => site_banner.scss} | 7 ++++--- app/views/layouts/_outdated_browser_banner.html.haml | 11 +++++------ 4 files changed, 19 insertions(+), 13 deletions(-) rename app/assets/stylesheets/new_design/{outdated_browser_banner.scss => site_banner.scss} (64%) rename app/assets/stylesheets/{outdated_browser_banner.scss => site_banner.scss} (72%) diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 84ef7d75e..e9254da3e 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -28,7 +28,7 @@ // = require print // = require procedure // = require search -// = require outdated_browser_banner +// = require site_banner // = require switch_menu // = require autocomplete // = require users diff --git a/app/assets/stylesheets/new_design/outdated_browser_banner.scss b/app/assets/stylesheets/new_design/site_banner.scss similarity index 64% rename from app/assets/stylesheets/new_design/outdated_browser_banner.scss rename to app/assets/stylesheets/new_design/site_banner.scss index 7b94f8a79..db86d4938 100644 --- a/app/assets/stylesheets/new_design/outdated_browser_banner.scss +++ b/app/assets/stylesheets/new_design/site_banner.scss @@ -1,21 +1,27 @@ @import "colors"; @import "constants"; -#outdated-browser-banner { +.site-banner { width: 100%; margin: 0; padding: $default-padding; color: $black; background-color: $yellow; + border-bottom: 1px dashed rgba(0, 0, 0, 0.6); + + .container { + display: flex; + align-items: center; + } } -.outdated-browser-icon { +.site-banner-icon { margin-right: $default-padding; font-size: 30px; opacity: 0.7; } -.outdated-browser-buttons { +.site-banner-actions { display: flex; margin-left: auto; diff --git a/app/assets/stylesheets/outdated_browser_banner.scss b/app/assets/stylesheets/site_banner.scss similarity index 72% rename from app/assets/stylesheets/outdated_browser_banner.scss rename to app/assets/stylesheets/site_banner.scss index c4b2eb089..d4b20a9a1 100644 --- a/app/assets/stylesheets/outdated_browser_banner.scss +++ b/app/assets/stylesheets/site_banner.scss @@ -1,9 +1,10 @@ -#outdated-browser-banner { +.site-banner { width: 100%; margin: 0; color: #333333; background-color: #FEF3B8; + border-bottom: 1px dashed rgba(0, 0, 0, 0.6); .container { display: flex; @@ -13,13 +14,13 @@ } } -.outdated-browser-icon { +.site-banner-icon { margin-right: 16px; font-size: 30px; opacity: 0.7; } -.outdated-browser-buttons { +.site-banner-actions { display: flex; margin-left: auto; } diff --git a/app/views/layouts/_outdated_browser_banner.html.haml b/app/views/layouts/_outdated_browser_banner.html.haml index d60b38661..ee39e191d 100644 --- a/app/views/layouts/_outdated_browser_banner.html.haml +++ b/app/views/layouts/_outdated_browser_banner.html.haml @@ -1,15 +1,14 @@ -# See config/browser.rb - if !browser.modern? && !has_dismissed_outdated_browser_banner? - #outdated-browser-banner - .container.flex.align-center - .outdated-browser-icon - ⚠️ - .outdated-browser-test + #outdated-browser-banner.site-banner + .container + .site-banner-icon ⚠️ + .site-banner-text %strong #{browser.name} #{browser.version} est trop ancien pour utiliser demarches-simplifiees.fr. %br Certaines parties du site ne fonctionneront pas correctement. - .outdated-browser-buttons + .site-banner-actions = button_to 'Ignorer', dismiss_outdated_browser_path, method: :post, remote: true, class: 'button btn', title: 'Ne plus afficher cet avertissement pendant une semaine' %a.btn.button.primary{ href: "https://browser-update.org/fr/update.html", target: "_blank", rel: "noopener" } Mettre à jour mon navigateur From 7f2d5f6248d70ab1b1e837f55231750d9ffff5a0 Mon Sep 17 00:00:00 2001 From: Pierre de La Morinerie Date: Wed, 4 Dec 2019 14:28:42 +0000 Subject: [PATCH 2/4] app: unify pre-maintenance banner with other site-wide banners --- app/assets/stylesheets/_maintenance.scss | 15 --------------- app/assets/stylesheets/application.scss | 1 - .../stylesheets/new_design/_maintenance.scss | 8 -------- .../stylesheets/new_design/site_banner.scss | 4 ++++ app/assets/stylesheets/site_banner.scss | 4 ++++ app/views/layouts/_main_container.html.haml | 1 + app/views/layouts/_pre_maintenance.html.haml | 11 ++++++++--- app/views/layouts/application_old.html.haml | 1 - 8 files changed, 17 insertions(+), 28 deletions(-) delete mode 100644 app/assets/stylesheets/_maintenance.scss delete mode 100644 app/assets/stylesheets/new_design/_maintenance.scss diff --git a/app/assets/stylesheets/_maintenance.scss b/app/assets/stylesheets/_maintenance.scss deleted file mode 100644 index dd59c31d6..000000000 --- a/app/assets/stylesheets/_maintenance.scss +++ /dev/null @@ -1,15 +0,0 @@ -.maintenance { - width: 100%; - position: fixed; - top: 0; - z-index: 100; - display: flex; - flex-direction: column; - justify-content: center; - - span { - margin: auto; - background: #FFD8A6; - padding: 0 4px; - } -} diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index e9254da3e..e9dd51d18 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -9,7 +9,6 @@ // defined in the other CSS/SCSS files in this directory. It is generally better to create a new // file per style scope. // -// = require _maintenance // = require _card // = require _helpers // = require _turbolinks diff --git a/app/assets/stylesheets/new_design/_maintenance.scss b/app/assets/stylesheets/new_design/_maintenance.scss deleted file mode 100644 index 153a5f685..000000000 --- a/app/assets/stylesheets/new_design/_maintenance.scss +++ /dev/null @@ -1,8 +0,0 @@ -@import "colors"; - -.maintenance { - padding: 20px; - text-align: center; - width: 100%; - background: $orange-bg; -} diff --git a/app/assets/stylesheets/new_design/site_banner.scss b/app/assets/stylesheets/new_design/site_banner.scss index db86d4938..6b4448781 100644 --- a/app/assets/stylesheets/new_design/site_banner.scss +++ b/app/assets/stylesheets/new_design/site_banner.scss @@ -9,6 +9,10 @@ background-color: $yellow; border-bottom: 1px dashed rgba(0, 0, 0, 0.6); + &.warning { + background-color: $orange-bg; + } + .container { display: flex; align-items: center; diff --git a/app/assets/stylesheets/site_banner.scss b/app/assets/stylesheets/site_banner.scss index d4b20a9a1..9db9b754f 100644 --- a/app/assets/stylesheets/site_banner.scss +++ b/app/assets/stylesheets/site_banner.scss @@ -6,6 +6,10 @@ background-color: #FEF3B8; border-bottom: 1px dashed rgba(0, 0, 0, 0.6); + &.warning { + background-color: #FFD8A6; + } + .container { display: flex; width: auto; diff --git a/app/views/layouts/_main_container.html.haml b/app/views/layouts/_main_container.html.haml index ff74bc38d..bd4d39896 100644 --- a/app/views/layouts/_main_container.html.haml +++ b/app/views/layouts/_main_container.html.haml @@ -1,6 +1,7 @@ #main-container{ class: "col-xs-#{main_container_size}" } .row = render partial: 'layouts/outdated_browser_banner' + = render partial: 'layouts/pre_maintenance' .row = render partial: 'layouts/flash_messages' .row diff --git a/app/views/layouts/_pre_maintenance.html.haml b/app/views/layouts/_pre_maintenance.html.haml index c14ca1e61..28327f13d 100644 --- a/app/views/layouts/_pre_maintenance.html.haml +++ b/app/views/layouts/_pre_maintenance.html.haml @@ -1,4 +1,9 @@ - if feature_enabled?(:pre_maintenance_mode) - .maintenance - %span - Une opération de maintenance est prévue sur demarches-simplifiees.fr à 23 h 00. La plateforme sera inaccessible pendant une vingtaine de minutes. + .site-banner.warning + .container + .site-banner-icon 🕚 + .site-banner-text + %strong + Une opération de maintenance est prévue sur demarches-simplifiees.fr à 23 h 00. + %br + La plateforme sera inaccessible pendant une vingtaine de minutes. diff --git a/app/views/layouts/application_old.html.haml b/app/views/layouts/application_old.html.haml index 80fd1109e..96217b370 100644 --- a/app/views/layouts/application_old.html.haml +++ b/app/views/layouts/application_old.html.haml @@ -19,7 +19,6 @@ = Gon::Base.render_data(camel_case: true, init: true) %body{ class: browser.platform.ios? ? 'ios' : nil } - = render partial: 'layouts/pre_maintenance' - if staging? #beta Env Test From 03326169c58025e9f1322792b7b2c3976e66d92f Mon Sep 17 00:00:00 2001 From: Paul Chavard Date: Wed, 4 Dec 2019 15:57:50 +0100 Subject: [PATCH 3/4] Always load IntersectionObserver to fix old browsers fix #4614 --- app/javascript/shared/polyfills.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/app/javascript/shared/polyfills.js b/app/javascript/shared/polyfills.js index 91124f495..24b086ccc 100644 --- a/app/javascript/shared/polyfills.js +++ b/app/javascript/shared/polyfills.js @@ -6,6 +6,4 @@ import 'dom4'; import './polyfills/insertAdjacentElement'; import './polyfills/dataset'; -if (typeof window.IntersectionObserver === 'undefined') { - import('intersection-observer'); -} +import('intersection-observer'); From 3a142fea40e6894ccf02ac267c5fd3c8287ad593 Mon Sep 17 00:00:00 2001 From: Paul Chavard Date: Wed, 4 Dec 2019 16:20:26 +0100 Subject: [PATCH 4/4] Isolate react components from react loaders --- .../TypesDeChampEditor/TypesDeChampEditor.js | 62 ------------------ .../components/TypesDeChampEditor/index.js | 63 ++++++++++++++++++- app/javascript/loaders/TypesDeChampEditor.js | 3 + app/javascript/packs/application.js | 2 +- 4 files changed, 65 insertions(+), 65 deletions(-) delete mode 100644 app/javascript/components/TypesDeChampEditor/TypesDeChampEditor.js create mode 100644 app/javascript/loaders/TypesDeChampEditor.js diff --git a/app/javascript/components/TypesDeChampEditor/TypesDeChampEditor.js b/app/javascript/components/TypesDeChampEditor/TypesDeChampEditor.js deleted file mode 100644 index b5fdba47f..000000000 --- a/app/javascript/components/TypesDeChampEditor/TypesDeChampEditor.js +++ /dev/null @@ -1,62 +0,0 @@ -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; -import { library } from '@fortawesome/fontawesome-svg-core'; -import { - faArrowCircleDown, - faArrowDown, - faArrowsAltV, - faArrowUp, - faPlus, - faTrash -} from '@fortawesome/free-solid-svg-icons'; - -import Flash from './Flash'; -import OperationsQueue from './OperationsQueue'; -import TypeDeChamps from './components/TypeDeChamps'; - -library.add( - faArrowCircleDown, - faArrowDown, - faArrowsAltV, - faArrowUp, - faPlus, - faTrash -); - -class TypesDeChampEditor extends Component { - constructor(props) { - super(props); - const defaultTypeDeChampAttributes = { - type_champ: 'text', - types_de_champ: [], - private: props.isAnnotation, - libelle: `${ - props.isAnnotation ? 'Nouvelle annotation' : 'Nouveau champ' - } ${props.typeDeChampsTypes[0][0]}` - }; - this.state = { - flash: new Flash(props.isAnnotation), - queue: new OperationsQueue(props.baseUrl), - defaultTypeDeChampAttributes, - typeDeChampsTypes: props.typeDeChampsTypes, - directUploadUrl: props.directUploadUrl, - isAnnotation: props.isAnnotation - }; - } - - render() { - return ( - - ); - } -} - -TypesDeChampEditor.propTypes = { - baseUrl: PropTypes.string, - directUploadUrl: PropTypes.string, - isAnnotation: PropTypes.bool, - typeDeChamps: PropTypes.array, - typeDeChampsTypes: PropTypes.array -}; - -export default TypesDeChampEditor; diff --git a/app/javascript/components/TypesDeChampEditor/index.js b/app/javascript/components/TypesDeChampEditor/index.js index 8cb4f529e..b5fdba47f 100644 --- a/app/javascript/components/TypesDeChampEditor/index.js +++ b/app/javascript/components/TypesDeChampEditor/index.js @@ -1,3 +1,62 @@ -import Loadable from '../Loadable'; +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import { library } from '@fortawesome/fontawesome-svg-core'; +import { + faArrowCircleDown, + faArrowDown, + faArrowsAltV, + faArrowUp, + faPlus, + faTrash +} from '@fortawesome/free-solid-svg-icons'; -export default Loadable(() => import('./TypesDeChampEditor')); +import Flash from './Flash'; +import OperationsQueue from './OperationsQueue'; +import TypeDeChamps from './components/TypeDeChamps'; + +library.add( + faArrowCircleDown, + faArrowDown, + faArrowsAltV, + faArrowUp, + faPlus, + faTrash +); + +class TypesDeChampEditor extends Component { + constructor(props) { + super(props); + const defaultTypeDeChampAttributes = { + type_champ: 'text', + types_de_champ: [], + private: props.isAnnotation, + libelle: `${ + props.isAnnotation ? 'Nouvelle annotation' : 'Nouveau champ' + } ${props.typeDeChampsTypes[0][0]}` + }; + this.state = { + flash: new Flash(props.isAnnotation), + queue: new OperationsQueue(props.baseUrl), + defaultTypeDeChampAttributes, + typeDeChampsTypes: props.typeDeChampsTypes, + directUploadUrl: props.directUploadUrl, + isAnnotation: props.isAnnotation + }; + } + + render() { + return ( + + ); + } +} + +TypesDeChampEditor.propTypes = { + baseUrl: PropTypes.string, + directUploadUrl: PropTypes.string, + isAnnotation: PropTypes.bool, + typeDeChamps: PropTypes.array, + typeDeChampsTypes: PropTypes.array +}; + +export default TypesDeChampEditor; diff --git a/app/javascript/loaders/TypesDeChampEditor.js b/app/javascript/loaders/TypesDeChampEditor.js new file mode 100644 index 000000000..8862e5ae9 --- /dev/null +++ b/app/javascript/loaders/TypesDeChampEditor.js @@ -0,0 +1,3 @@ +import Loadable from '../components/Loadable'; + +export default Loadable(() => import('../components/TypesDeChampEditor')); diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js index a0e320c3a..5a7e995cf 100644 --- a/app/javascript/packs/application.js +++ b/app/javascript/packs/application.js @@ -73,6 +73,6 @@ window.Turbolinks = Turbolinks; // Now that Turbolinks is globally exposed,configure ReactRailsUJS // eslint-disable-next-line no-undef -ReactRailsUJS.useContext(require.context('components', true)); +ReactRailsUJS.useContext(require.context('loaders', true)); // Remove previous event handlers and add new ones: ReactRailsUJS.detectEvents();