You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@couchdb.apache.org by ga...@apache.org on 2017/11/09 14:20:50 UTC
[couchdb-fauxton] branch master updated: Support fauxton on IE10,
IE11 and Edge (#1013)
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é <po...@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" <co...@couchdb.apache.org>'].