From 4bfb70482aae6577972cda3cba787e976bedfc04 Mon Sep 17 00:00:00 2001 From: xidedix Date: Tue, 8 May 2018 18:14:11 +0200 Subject: [PATCH 1/3] refactor(demo): sync with CoreUI-React template --- demo/src/App.js | 2 +- .../DefaultLayout.js} | 11 +- demo/src/index.js | 2 +- demo/src/polyfill.js | 68 +++-- demo/src/routes.js | 4 +- demo/src/scss/style.css | 275 +++++++++++------- 6 files changed, 224 insertions(+), 138 deletions(-) rename demo/src/containers/{Full/Full.js => DefaultLayout/DefaultLayout.js} (94%) diff --git a/demo/src/App.js b/demo/src/App.js index 0adb693e..0d1a07d4 100644 --- a/demo/src/App.js +++ b/demo/src/App.js @@ -13,7 +13,7 @@ import './scss/style.css' // import '../node_modules/@coreui/styles/scss/_dropdown-menu-right.scss'; // Containers -import Full from './containers/Full/Full.js'; +import Full from './containers/DefaultLayout/DefaultLayout.js'; // import { renderRoutes } from 'react-router-config'; diff --git a/demo/src/containers/Full/Full.js b/demo/src/containers/DefaultLayout/DefaultLayout.js similarity index 94% rename from demo/src/containers/Full/Full.js rename to demo/src/containers/DefaultLayout/DefaultLayout.js index 6b285875..079560cb 100644 --- a/demo/src/containers/Full/Full.js +++ b/demo/src/containers/DefaultLayout/DefaultLayout.js @@ -1,6 +1,6 @@ import React, { Component } from 'react'; import { Redirect, Route, Switch } from 'react-router-dom'; -import { Container, Nav, NavItem, NavLink, Badge, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap'; +import { Container, Nav, NavItem, NavLink, Badge, DropdownToggle, DropdownMenu } from 'reactstrap'; import { AppAside, @@ -27,7 +27,7 @@ import logo from '../../assets/img/brand/logo.svg' import sygnet from '../../assets/img/brand/sygnet.svg' import avatar from '../../assets/img/avatars/6.jpg' -class Full extends Component { +class DefaultLayout extends Component { render() { return (
@@ -88,12 +88,13 @@ class Full extends Component { Aside
- + CoreUI © 2018 creativeLabs. - Powered by CoreUI for React + Powered by CoreUI for React + ); } } -export default Full; +export default DefaultLayout; diff --git a/demo/src/index.js b/demo/src/index.js index c4d41e34..a2fbd4a5 100644 --- a/demo/src/index.js +++ b/demo/src/index.js @@ -1,8 +1,8 @@ +import './polyfill' import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; // import registerServiceWorker from './registerServiceWorker'; -import './polyfill' ReactDOM.render(, document.querySelector('#demo')) // ReactDOM.render(, document.getElementById('root')); diff --git a/demo/src/polyfill.js b/demo/src/polyfill.js index 4dda5837..4826bf56 100644 --- a/demo/src/polyfill.js +++ b/demo/src/polyfill.js @@ -1,24 +1,44 @@ -// IE11 polyfills - -if (!Array.prototype.find) { - Array.prototype.find = function(predicate) { - if (this == null) { - throw new TypeError('Array.prototype.find called on null or undefined'); - } - if (typeof predicate !== 'function') { - throw new TypeError('predicate must be a function'); - } - const list = Object(this); - const length = list.length >>> 0; - const thisArg = arguments[1]; - let value; - - for (let i = 0; i < length; i++) { - value = list[i]; - if (predicate.call(thisArg, value, i, list)) { - return value; - } - } - return undefined; - }; -} +/* +* required polyfills +*/ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol' +// import 'core-js/es6/object' +// import 'core-js/es6/function' +// import 'core-js/es6/parse-int' +// import 'core-js/es6/parse-float' +// import 'core-js/es6/number' +// import 'core-js/es6/math' +// import 'core-js/es6/string' +// import 'core-js/es6/date' +import 'core-js/es6/array' +// import 'core-js/es6/regexp' +import 'core-js/es6/map' +// import 'core-js/es6/weak-map' +import 'core-js/es6/set' +import 'core-js/es7/object' + +/** IE10 and IE11 requires the following for the Reflect API. */ +// import 'core-js/es6/reflect' + +/** Evergreen browsers require these. **/ +// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove. +// import 'core-js/es7/reflect' + +// CustomEvent() constructor functionality in IE9, IE10, IE11 +(function () { + + if ( typeof window.CustomEvent === "function" ) return false + + function CustomEvent ( event, params ) { + params = params || { bubbles: false, cancelable: false, detail: undefined } + var evt = document.createEvent( 'CustomEvent' ) + evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail ) + return evt + } + + CustomEvent.prototype = window.Event.prototype + + window.CustomEvent = CustomEvent +})() diff --git a/demo/src/routes.js b/demo/src/routes.js index 86e70030..844c90d8 100644 --- a/demo/src/routes.js +++ b/demo/src/routes.js @@ -1,5 +1,5 @@ import Dashboard from './views/Dashboard/Dashboard.js'; -import Full from './containers/Full/Full.js'; +import Full from './containers/DefaultLayout/DefaultLayout.js'; // https://github.com/ReactTraining/react-router/tree/master/packages/react-router-config const routes = [ @@ -7,4 +7,4 @@ const routes = [ { path: '/dashboard', name: 'Dashboard', component: Dashboard }, ]; -export default routes; \ No newline at end of file +export default routes; diff --git a/demo/src/scss/style.css b/demo/src/scss/style.css index 3b2fa6fc..b4ed1dd6 100644 --- a/demo/src/scss/style.css +++ b/demo/src/scss/style.css @@ -1,13 +1,13 @@ @charset "UTF-8"; /*! * CoreUI - Open Source Dashboard UI Kit - * @version v2.0.0-beta.9 + * @version v2.0.0-rc.2 * @link https://coreui.io * Copyright (c) 2018 creativeLabs Łukasz Holeczek * Licensed under MIT (https://coreui.io/license) */ /*! - * Bootstrap v4.1.0 (https://getbootstrap.com/) + * Bootstrap v4.1.1 (https://getbootstrap.com/) * Copyright 2011-2018 The Bootstrap Authors * Copyright 2011-2018 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) @@ -68,7 +68,7 @@ html { @-ms-viewport { width: device-width; } -article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section { +article, aside, figcaption, figure, footer, header, hgroup, main, nav, section { display: block; } body { @@ -176,7 +176,7 @@ pre, code, kbd, samp { - font-family: monospace, monospace; + font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 1em; } pre { @@ -431,12 +431,6 @@ mark, font-size: 90%; color: #73818f; } -code, -kbd, -pre, -samp { - font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } - code { font-size: 87.5%; color: #e83e8c; @@ -1473,6 +1467,11 @@ select.form-control-lg:not([size]):not([multiple]), .input-group-lg > select.for .custom-select.is-valid ~ .valid-tooltip { display: block; } +.was-validated .form-control-file:valid ~ .valid-feedback, +.was-validated .form-control-file:valid ~ .valid-tooltip, .form-control-file.is-valid ~ .valid-feedback, +.form-control-file.is-valid ~ .valid-tooltip { + display: block; } + .was-validated .form-check-input:valid ~ .form-check-label, .form-check-input.is-valid ~ .form-check-label { color: #4dbd74; } @@ -1550,6 +1549,11 @@ select.form-control-lg:not([size]):not([multiple]), .input-group-lg > select.for .custom-select.is-invalid ~ .invalid-tooltip { display: block; } +.was-validated .form-control-file:invalid ~ .invalid-feedback, +.was-validated .form-control-file:invalid ~ .invalid-tooltip, .form-control-file.is-invalid ~ .invalid-feedback, +.form-control-file.is-invalid ~ .invalid-tooltip { + display: block; } + .was-validated .form-check-input:invalid ~ .form-check-label, .form-check-input.is-invalid ~ .form-check-label { color: #f86c6b; } @@ -2405,8 +2409,7 @@ input[type="button"].btn-block { .input-group > .custom-file:not(:last-child) .custom-file-label::after { border-top-right-radius: 0; border-bottom-right-radius: 0; } - .input-group > .custom-file:not(:first-child) .custom-file-label, - .input-group > .custom-file:not(:first-child) .custom-file-label::after { + .input-group > .custom-file:not(:first-child) .custom-file-label { border-top-left-radius: 0; border-bottom-left-radius: 0; } @@ -2497,11 +2500,12 @@ input[type="button"].btn-block { background-color: #e4e7ea; } .custom-control-label { + position: relative; margin-bottom: 0; } .custom-control-label::before { position: absolute; top: 0.25rem; - left: 0; + left: -1.5rem; display: block; width: 1rem; height: 1rem; @@ -2512,7 +2516,7 @@ input[type="button"].btn-block { .custom-control-label::after { position: absolute; top: 0.25rem; - left: 0; + left: -1.5rem; display: block; width: 1rem; height: 1rem; @@ -2638,7 +2642,7 @@ input[type="button"].btn-block { bottom: 0; z-index: 3; display: block; - height: calc(calc(2.0625rem + 2px) - 1px * 2); + height: 2.0625rem; padding: 0.375rem 0.75rem; line-height: 1.5; color: #5c6873; @@ -4211,6 +4215,7 @@ button.close { margin-right: 3px; margin-left: 3px; text-indent: -999px; + cursor: pointer; background-color: rgba(255, 255, 255, 0.5); } .carousel-indicators li::before { position: absolute; @@ -6283,7 +6288,17 @@ a.text-dark:hover, a.text-dark:focus { background-color: #fff !important; } .table-bordered th, .table-bordered td { - border: 1px solid #c8ced3 !important; } } + border: 1px solid #c8ced3 !important; } + .table-dark { + color: inherit; } + .table-dark th, + .table-dark td, + .table-dark thead th, + .table-dark tbody + tbody { + border-color: #c8ced3; } + .table .thead-dark th { + color: inherit; + border-color: #c8ced3; } } .animated { animation-duration: 1s; } @@ -6562,6 +6577,7 @@ a.text-dark:hover, a.text-dark:focus { .brand-card-header .chart-wrapper { position: absolute; top: 0; + left: 0; width: 100%; height: 100%; } @@ -6588,21 +6604,26 @@ a.text-dark:hover, a.text-dark:focus { margin: -0.375rem -0.75rem; line-height: 2.0625rem; text-align: center; - background-color: rgba(0, 0, 0, 0.2); } + background-color: rgba(0, 0, 0, 0.2); + border-radius: 0.25rem; } .btn-brand i + span { margin-left: 1.5rem; } .btn-brand.btn-lg i, .btn-group-lg > .btn-brand.btn i { width: 2.64063rem; margin: -0.5rem -1rem; - line-height: 2.64063rem; } + line-height: 2.64063rem; + border-radius: 0.3rem; } .btn-brand.btn-lg i + span, .btn-group-lg > .btn-brand.btn i + span { margin-left: 2rem; } .btn-brand.btn-sm i, .btn-group-sm > .btn-brand.btn i { width: 1.64844rem; margin: -0.25rem -0.5rem; - line-height: 1.64844rem; } + line-height: 1.64844rem; + border-radius: 0.2rem; } .btn-brand.btn-sm i + span, .btn-group-sm > .btn-brand.btn i + span { margin-left: 1rem; } + .btn-brand.btn-square i { + border-radius: 0; } .btn-facebook { color: #fff; @@ -7724,6 +7745,92 @@ canvas { .main .container-fluid { padding: 0 30px; } +.app-header { + position: relative; + flex-direction: row; + height: 55px; + padding: 0; + margin: 0; + background-color: #fff; + border-bottom: 1px solid #c8ced3; } + .app-header .navbar-brand { + display: inline-flex; + align-items: center; + justify-content: center; + width: 155px; + height: 55px; + padding: 0; + margin-right: 0; + background-color: transparent; } + .app-header .navbar-brand .navbar-brand-minimized { + display: none; } + .app-header .navbar-toggler { + min-width: 50px; + padding: 0.25rem 0; } + .app-header .navbar-toggler:hover .navbar-toggler-icon { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%232f353a' stroke-width='2.25' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); } + .app-header .navbar-toggler-icon { + height: 23px; + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%2373818f' stroke-width='2.25' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); } + .app-header .navbar-nav { + flex-direction: row; + align-items: center; } + .app-header .nav-item { + position: relative; + min-width: 50px; + margin: 0; + text-align: center; } + .app-header .nav-item button { + margin: 0 auto; } + .app-header .nav-item .nav-link { + padding-top: 0; + padding-bottom: 0; + background: 0; + border: 0; } + .app-header .nav-item .nav-link .badge { + position: absolute; + top: 50%; + left: 50%; + margin-top: -16px; + margin-left: 0; } + .app-header .nav-item .nav-link > .img-avatar, .app-header .nav-item .avatar.nav-link > img { + height: 35px; + margin: 0 10px; } + .app-header .dropdown-menu { + padding-bottom: 0; + line-height: 1.5; } + .app-header .dropdown-item { + min-width: 180px; } + +.navbar-nav .nav-link { + color: #73818f; } + .navbar-nav .nav-link:hover, .navbar-nav .nav-link:focus { + color: #2f353a; } + +.navbar-nav .open > .nav-link, .navbar-nav .open > .nav-link:hover, .navbar-nav .open > .nav-link:focus, +.navbar-nav .active > .nav-link, +.navbar-nav .active > .nav-link:hover, +.navbar-nav .active > .nav-link:focus, +.navbar-nav .nav-link.open, +.navbar-nav .nav-link.open:hover, +.navbar-nav .nav-link.open:focus, +.navbar-nav .nav-link.active, +.navbar-nav .nav-link.active:hover, +.navbar-nav .nav-link.active:focus { + color: #2f353a; } + +.navbar-divider { + background-color: rgba(0, 0, 0, 0.075); } + +@media (min-width: 992px) { + .brand-minimized .app-header .navbar-brand { + width: 50px; + background-color: transparent; } + .brand-minimized .app-header .navbar-brand .navbar-brand-full { + display: none; } + .brand-minimized .app-header .navbar-brand .navbar-brand-minimized { + display: block; } } + .input-group-prepend, .input-group-append { white-space: nowrap; @@ -7871,92 +7978,6 @@ canvas { *[dir="rtl"] .nav { padding-right: 0; } -.app-header { - position: relative; - flex-direction: row; - height: 55px; - padding: 0; - margin: 0; - background-color: #fff; - border-bottom: 1px solid #c8ced3; } - .app-header .navbar-brand { - display: inline-flex; - align-items: center; - justify-content: center; - width: 155px; - height: 55px; - padding: 0; - margin-right: 0; - background-color: transparent; } - .app-header .navbar-brand .navbar-brand-minimized { - display: none; } - .app-header .navbar-toggler { - min-width: 50px; - padding: 0.25rem 0; } - .app-header .navbar-toggler:hover .navbar-toggler-icon { - background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%232f353a' stroke-width='2.25' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); } - .app-header .navbar-toggler-icon { - height: 23px; - background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%2373818f' stroke-width='2.25' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); } - .app-header .navbar-nav { - flex-direction: row; - align-items: center; } - .app-header .nav-item { - position: relative; - min-width: 50px; - margin: 0; - text-align: center; } - .app-header .nav-item button { - margin: 0 auto; } - .app-header .nav-item .nav-link { - padding-top: 0; - padding-bottom: 0; - background: 0; - border: 0; } - .app-header .nav-item .nav-link .badge { - position: absolute; - top: 50%; - left: 50%; - margin-top: -16px; - margin-left: 0; } - .app-header .nav-item .nav-link > .img-avatar, .app-header .nav-item .avatar.nav-link > img { - height: 35px; - margin: 0 10px; } - .app-header .dropdown-menu { - padding-bottom: 0; - line-height: 1.5; } - .app-header .dropdown-item { - min-width: 180px; } - -.navbar-nav .nav-link { - color: #73818f; } - .navbar-nav .nav-link:hover, .navbar-nav .nav-link:focus { - color: #2f353a; } - -.navbar-nav .open > .nav-link, .navbar-nav .open > .nav-link:hover, .navbar-nav .open > .nav-link:focus, -.navbar-nav .active > .nav-link, -.navbar-nav .active > .nav-link:hover, -.navbar-nav .active > .nav-link:focus, -.navbar-nav .nav-link.open, -.navbar-nav .nav-link.open:hover, -.navbar-nav .nav-link.open:focus, -.navbar-nav .nav-link.active, -.navbar-nav .nav-link.active:hover, -.navbar-nav .nav-link.active:focus { - color: #2f353a; } - -.navbar-divider { - background-color: rgba(0, 0, 0, 0.075); } - -@media (min-width: 992px) { - .brand-minimized .app-header .navbar-brand { - width: 50px; - background-color: transparent; } - .brand-minimized .app-header .navbar-brand .navbar-brand-full { - display: none; } - .brand-minimized .app-header .navbar-brand .navbar-brand-minimized { - display: block; } } - .progress-xs { height: 4px; } @@ -8231,6 +8252,8 @@ canvas { width: 150px; } .sidebar-compact .sidebar .nav { width: 150px; } + .sidebar-compact .sidebar .d-compact-none { + display: none; } .sidebar-compact .sidebar .nav-title { text-align: center; } .sidebar-compact .sidebar .nav-item { @@ -8256,6 +8279,7 @@ canvas { width: 50px; } .sidebar-minimized .sidebar .nav { width: 50px; } + .sidebar-minimized .sidebar .d-minimized-none, .sidebar-minimized .sidebar .nav-divider, .sidebar-minimized .sidebar .nav-label, .sidebar-minimized .sidebar .nav-title, @@ -9874,5 +9898,46 @@ body { right: auto; left: 10px; } +.ie-custom-properties { + blue: #20a8d8; + indigo: #6610f2; + purple: #6f42c1; + pink: #e83e8c; + red: #f86c6b; + orange: #f8cb00; + yellow: #ffc107; + green: #4dbd74; + teal: #20c997; + cyan: #17a2b8; + white: #fff; + gray: #73818f; + gray-dark: #2f353a; + light-blue: #63c2de; + gray-100: #f0f3f5; + gray-200: #e4e7ea; + gray-300: #c8ced3; + gray-400: #acb4bc; + gray-500: #8f9ba6; + gray-600: #73818f; + gray-700: #5c6873; + gray-800: #2f353a; + gray-900: #23282c; + primary: #20a8d8; + secondary: #c8ced3; + success: #4dbd74; + info: #63c2de; + warning: #ffc107; + danger: #f86c6b; + light: #f0f3f5; + dark: #2f353a; + breakpoint-xs: 0; + breakpoint-sm: 576px; + breakpoint-md: 768px; + breakpoint-lg: 992px; + breakpoint-xl: 1200px; } + .app-header .navbar-nav .dropdown-menu-right { right: auto; } + +html body .app.flex-row.align-items-center { + height: 100vh; } From efa7c66712c273debf10e1f20b721d497ccf9085 Mon Sep 17 00:00:00 2001 From: xidedix Date: Tue, 8 May 2018 18:15:00 +0200 Subject: [PATCH 2/3] chore: dependencies update --- package.json | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 734eb8ba..0afd29ec 100644 --- a/package.json +++ b/package.json @@ -24,12 +24,13 @@ "@coreui/coreui": "^2.0.0-rc.2", "bootstrap": "^4.1.1", "classnames": "^2.2.5", + "core-js": "^2.5.6", "prop-types": "^15.6.1", "flag-icon-css": "^3.0.0", "font-awesome": "^4.7.0", "react-perfect-scrollbar": "^1.1.1", "react-router-dom": "^4.2.2", - "reactstrap": "^5.0.0", + "reactstrap": "^6.0.1", "simple-line-icons": "^2.4.1" }, "peerDependencies": { @@ -45,7 +46,7 @@ "nwb": "^0.21.5", "react": "^16.3.2", "react-dom": "^16.3.2", - "sinon": "^5.0.2" + "sinon": "^5.0.7" }, "author": "Łukasz Holeczek", "homepage": "http://coreui.io", From abc09d562db45001d5cce1729ec1b80c361a6ad1 Mon Sep 17 00:00:00 2001 From: xidedix Date: Tue, 8 May 2018 18:16:15 +0200 Subject: [PATCH 3/3] chore: v2.0.0-rc.0 version bump --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 0afd29ec..93956ba7 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@coreui/react", - "version": "2.0.0-beta.3", + "version": "2.0.0-rc.0", "description": "CoreUI React Bootstrap 4 components", "main": "lib/index.js", "module": "es/index.js",