couchdb-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From gar...@apache.org
Subject [couchdb-fauxton] branch master updated: Support fauxton on IE10, IE11 and Edge (#1013)
Date Thu, 09 Nov 2017 14:20:50 GMT
This is an automated email from the ASF dual-hosted git repository.

garren pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/couchdb-fauxton.git


The following commit(s) were added to refs/heads/master by this push:
     new 6960440  Support fauxton on IE10,IE11 and Edge (#1013)
6960440 is described below

commit 696044096e615c2b7bc8f010f4b920206d23a807
Author: Alexis Côté <popojargo@users.noreply.github.com>
AuthorDate: Thu Nov 9 09:20:48 2017 -0500

    Support fauxton on IE10,IE11 and Edge (#1013)
    
    Add polyfills to Fix issues with IE10,IE11 and Edge
---
 app/addons/activetasks/assets/less/activetasks.less | 4 ++++
 app/addons/activetasks/components.js                | 7 ++++++-
 app/addons/components/__tests__/polling.test.js     | 4 ++--
 app/addons/components/assets/less/jsonlink.less     | 2 +-
 app/addons/components/assets/less/layouts.less      | 4 ++++
 app/addons/components/components/polling.js         | 6 ++++--
 app/addons/components/layouts.js                    | 7 ++++++-
 app/addons/replication/assets/less/replication.less | 1 +
 app/addons/replication/controller.js                | 7 ++++++-
 app/helpers.js                                      | 8 ++++++++
 assets/less/layouts.less                            | 2 +-
 package.json                                        | 2 ++
 webpack.config.dev.js                               | 2 +-
 webpack.config.release.js                           | 2 +-
 14 files changed, 47 insertions(+), 11 deletions(-)

diff --git a/app/addons/activetasks/assets/less/activetasks.less b/app/addons/activetasks/assets/less/activetasks.less
index 1041fe6..5b4cb7a 100644
--- a/app/addons/activetasks/assets/less/activetasks.less
+++ b/app/addons/activetasks/assets/less/activetasks.less
@@ -148,4 +148,8 @@
   align-items: center;
   flex-direction: row;
   height: 100%;
+
+  &--ie1X {
+      align-items: stretch;
+  }
 }
diff --git a/app/addons/activetasks/components.js b/app/addons/activetasks/components.js
index 91b477e..c63927a 100644
--- a/app/addons/activetasks/components.js
+++ b/app/addons/activetasks/components.js
@@ -17,6 +17,7 @@ import Stores from "./stores";
 import Resources from "./resources";
 import Actions from "./actions";
 import Components from "../components/react-components";
+import Helpers from '../../helpers';
 
 const {TabElement, TabElementWrapper, Polling} = Components;
 
@@ -388,8 +389,12 @@ export class ActiveTasksPollingWidgetController extends React.Component
{
   state = this.getStoreState();
 
   render() {
+    let activePollingClass = "active-tasks__polling-wrapper";
+    if (Helpers.isIE1X()) {
+      activePollingClass += " " + activePollingClass + "--ie1X";
+    }
     return (
-      <div className="active-tasks__polling-wrapper">
+      <div className={activePollingClass}>
         <Polling
           min={1}
           max={30}
diff --git a/app/addons/components/__tests__/polling.test.js b/app/addons/components/__tests__/polling.test.js
index 32a891e..c676b7b 100644
--- a/app/addons/components/__tests__/polling.test.js
+++ b/app/addons/components/__tests__/polling.test.js
@@ -63,7 +63,7 @@ describe("Polling", () => {
         onPoll={() => {}}
                             />);
 
-      const props = wrapper.find('input').props();
+      const props = wrapper.find('Range').props();
 
       assert.deepEqual(props.value, 10);
       assert.deepEqual(props.step, 1);
@@ -80,7 +80,7 @@ describe("Polling", () => {
         onPoll={() => {}}
                             />);
 
-      wrapper.find('input').simulate('change', {target: {value: 21}});
+      wrapper.find('input').simulate('mouseMove', {buttons:1, which:1, target: {value: 21}});
       const isOff = wrapper.find('.faux__polling-info-value--off').text();
       assert.deepEqual(isOff.toLowerCase(), "off");
     });
diff --git a/app/addons/components/assets/less/jsonlink.less b/app/addons/components/assets/less/jsonlink.less
index 071b538..a93f19e 100644
--- a/app/addons/components/assets/less/jsonlink.less
+++ b/app/addons/components/assets/less/jsonlink.less
@@ -11,7 +11,7 @@
 // the License.
 
 .faux__jsonlink {
-  width: 76px;
+  /*width: 76px; Static width cause rendering problems on Edge */
   border-left: 1px solid #ccc;
   padding: 16px 12px 12px 12px !important;
   height: 64px;
diff --git a/app/addons/components/assets/less/layouts.less b/app/addons/components/assets/less/layouts.less
index 4f020cf..8d72807 100644
--- a/app/addons/components/assets/less/layouts.less
+++ b/app/addons/components/assets/less/layouts.less
@@ -18,6 +18,10 @@
   align-items: center;
   flex-direction: row;
   height: 100%;
+
+  &--ie1X{
+     align-items:stretch;
+  }
 }
 
 //yes !important!!! We have to overridde some styles I can't override any other way for now
diff --git a/app/addons/components/components/polling.js b/app/addons/components/components/polling.js
index 245806e..513ebf5 100644
--- a/app/addons/components/components/polling.js
+++ b/app/addons/components/components/polling.js
@@ -14,6 +14,7 @@ import PropTypes from 'prop-types';
 
 import React from 'react';
 import ReactDOM from 'react-dom';
+import Range from 'react-range';
 
 let pollIntervalId;
 
@@ -51,6 +52,7 @@ export class Polling extends React.Component {
     this.state = {
       value: this.props.startValue
     };
+    this.updatePollingFreq = this.updatePollingFreq.bind(this);
   }
 
   componentDidMount () {
@@ -101,8 +103,8 @@ export class Polling extends React.Component {
           <span className='faux__polling-info-text'>Polling Interval</span>
           <span className={`faux__polling-info-value faux__polling-info-value ${pollStyle}`}>{pollValue}</span>
         </div>
-        <input
-          onChange={this.updatePollingFreq.bind(this)}
+        <Range
+          onChange={this.updatePollingFreq}
           className='faux__polling-info-slider'
           type='range'
           value={value}
diff --git a/app/addons/components/layouts.js b/app/addons/components/layouts.js
index 6010e11..fe85680 100644
--- a/app/addons/components/layouts.js
+++ b/app/addons/components/layouts.js
@@ -17,6 +17,7 @@ import ReactDOM from 'react-dom';
 import {NotificationCenterButton} from '../fauxton/notifications/notifications';
 import {JSONLink, DocLink} from './components/apibar';
 import {Breadcrumbs} from './header-breadcrumbs';
+import Helpers from '../../helpers';
 
 export const ApiBarWrapper = ({docURL, endpoint}) => {
   return (
@@ -40,6 +41,10 @@ export const OnePane = ({children}) => {
 };
 
 export const OnePaneHeader = ({showApiUrl, docURL, endpoint, crumbs, children}) => {
+  let rightHeaderClass = "right-header-flex";
+  if (Helpers.isIE1X()) {
+      rightHeaderClass += " " + rightHeaderClass + "--ie1X";
+  }
   return (
     <header>
       <div className='flex-layout flex-row'>
@@ -47,7 +52,7 @@ export const OnePaneHeader = ({showApiUrl, docURL, endpoint, crumbs, children})
           <Breadcrumbs crumbs={crumbs}/>
         </div>
         <div id='right-header'>
-          <div className="right-header-flex">
+          <div className={rightHeaderClass}>
             {children}
           </div>
         </div>
diff --git a/app/addons/replication/assets/less/replication.less b/app/addons/replication/assets/less/replication.less
index 87ba4ef..c1a56de 100644
--- a/app/addons/replication/assets/less/replication.less
+++ b/app/addons/replication/assets/less/replication.less
@@ -149,6 +149,7 @@ div.replication__page {
 
 .replication__activity {
   padding: 0 10px 0 10px !important;
+  width:100%;
 }
 
 .replication__table-row {
diff --git a/app/addons/replication/controller.js b/app/addons/replication/controller.js
index 40e9813..8de28db 100644
--- a/app/addons/replication/controller.js
+++ b/app/addons/replication/controller.js
@@ -12,6 +12,7 @@
 import React from 'react';
 import Stores from './stores';
 import Actions from './actions';
+import Helpers from '../../helpers';
 import {showPasswordModal} from '../auth/actions';
 import Components from '../components/react-components';
 import NewReplication from './components/newreplication';
@@ -200,9 +201,13 @@ export default class ReplicationController extends React.Component {
     if (this.state.tabSection === 'new replication') {
       return null;
     }
+    let rightHeaderclass = "right-header-flex";
+    if (Helpers.isIE1X()) {
+      rightHeaderclass += " " + rightHeaderclass + "--ie1X";
+    }
 
     return (
-      <div className="right-header-flex">
+      <div className={rightHeaderclass}>
         <Polling
           min={60}
           max={600}
diff --git a/app/helpers.js b/app/helpers.js
index f242722..93c750c 100644
--- a/app/helpers.js
+++ b/app/helpers.js
@@ -61,4 +61,12 @@ Helpers.escapeJQuerySelector = function (selector) {
   return selector && selector.replace(/[!"#$%&'()*+,.\/:;<=>?@[\\\]^`{|}~]/g,
"\\$&");
 };
 
+/**
+ * Determine if the current application is running on IE10 or IE11
+ * @returns {boolean} True if on IE10 or IE11. Otherwise false.
+ */
+Helpers.isIE1X = function() {
+    return document.documentMode == 11 || document.documentMode == 10;
+};
+
 export default Helpers;
diff --git a/assets/less/layouts.less b/assets/less/layouts.less
index 93e248c..2316819 100644
--- a/assets/less/layouts.less
+++ b/assets/less/layouts.less
@@ -27,7 +27,7 @@ body #notification-center .flex-layout {
   contain at least one .flex-body to indicate that's the one that expands
   */
   &>* {
-    .flex(0);
+    .flex(0,1,auto);
   }
 
   /* notice we don't set heights. Flex will expand to fill the content but no more */
diff --git a/package.json b/package.json
index e3c400b..66afce8 100644
--- a/package.json
+++ b/package.json
@@ -53,6 +53,7 @@
     "classnames": "^2.2.5",
     "clean-css": "^4.0.5",
     "clipboard": "^1.5.16",
+    "core-js": "^2.5.1",
     "couchapp": "~0.11.0",
     "css-loader": "^0.26.1",
     "d3": "^3.4.11",
@@ -92,6 +93,7 @@
     "react-dom": "~15.4.1",
     "react-motion": "^0.5.0",
     "react-overlays": "^0.7.0",
+    "react-range": "0.0.7",
     "react-redux": "^5.0.0",
     "react-select": "1.0.0-rc.2",
     "redux": "^3.6.0",
diff --git a/webpack.config.dev.js b/webpack.config.dev.js
index 9bf7b1b..2ba72f9 100644
--- a/webpack.config.dev.js
+++ b/webpack.config.dev.js
@@ -20,7 +20,7 @@ const settings = require('./tasks/helper')
 
 module.exports = {
   entry: {
-    bundle: './app/main.js' //Our starting point for our development.
+    bundle: ['core-js/fn/array', 'core-js/fn/symbol', 'core-js/fn/promise', './app/main.js']
//Our starting point for our development.
   },
 
   output: {
diff --git a/webpack.config.release.js b/webpack.config.release.js
index 872f032..4490598 100644
--- a/webpack.config.release.js
+++ b/webpack.config.release.js
@@ -22,7 +22,7 @@ const settings = require('./tasks/helper')
 module.exports = {
   // Entry point for static analyzer:
   entry: {
-    bundle: './app/main.js'
+      bundle: ['core-js/fn/array', 'core-js/fn/symbol', 'core-js/fn/promise', './app/main.js']
   },
 
   output: {

-- 
To stop receiving notification emails like this one, please contact
['"commits@couchdb.apache.org" <commits@couchdb.apache.org>'].

Mime
View raw message