From c9762919d9509c8aa84dff037526da6bad18a747 Mon Sep 17 00:00:00 2001 From: xidedix Date: Fri, 27 Apr 2018 20:55:55 +0200 Subject: [PATCH] refactor: IE polyfills and import utilities from @coreui/coreui --- package.json | 3 +- src/index.js | 1 + src/polyfill.js | 42 ++++++ src/scss/style.css | 221 ++++++++++++++++++------------- src/views/Dashboard/Dashboard.js | 24 +--- src/views/Theme/Colors/Colors.js | 14 +- 6 files changed, 185 insertions(+), 120 deletions(-) create mode 100644 src/polyfill.js diff --git a/package.json b/package.json index 7fd7c5f..8d90e64 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@coreui/coreui-free-react-admin-template", - "version": "2.0.0-beta.2", + "version": "2.0.0-beta.3", "description": "CoreUI React Open Source Bootstrap 4 Admin Template", "author": "Łukasz Holeczek", "homepage": "https://coreui.io", @@ -27,6 +27,7 @@ "react-router-config": "^1.0.0-beta.4", "react-router-dom": "^4.2.2", "reactstrap": "^5.0.0", + "reflect.ownkeys": "^0.2.0", "simple-line-icons": "^2.4.1" }, "devDependencies": { diff --git a/src/index.js b/src/index.js index fae3e35..74dea6e 100644 --- a/src/index.js +++ b/src/index.js @@ -3,6 +3,7 @@ import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import registerServiceWorker from './registerServiceWorker'; +import './polyfill' ReactDOM.render(, document.getElementById('root')); registerServiceWorker(); diff --git a/src/polyfill.js b/src/polyfill.js new file mode 100644 index 0000000..ee7f8ad --- /dev/null +++ b/src/polyfill.js @@ -0,0 +1,42 @@ +// IE11 polyfills + +import ownKeys from 'reflect.ownkeys' + +const reduce = Function.bind.call(Function.call, Array.prototype.reduce); +const isEnumerable = Function.bind.call(Function.call, Object.prototype.propertyIsEnumerable); +const concat = Function.bind.call(Function.call, Array.prototype.concat); + +if (!Object.values) { + Object.values = function values(O) { + return reduce(ownKeys(O), (v, k) => concat(v, typeof k === 'string' && isEnumerable(O, k) ? [O[k]] : []), []); + }; +} + +if (!Object.entries) { + Object.entries = function entries(O) { + return reduce(ownKeys(O), (e, k) => concat(e, typeof k === 'string' && isEnumerable(O, k) ? [[k, O[k]]] : []), []); + }; +} + +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; + }; +} diff --git a/src/scss/style.css b/src/scss/style.css index 49a472d..b3dc1e8 100644 --- a/src/scss/style.css +++ b/src/scss/style.css @@ -6588,21 +6588,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 +7729,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 +7962,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; } @@ -9874,5 +9879,43 @@ 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; } diff --git a/src/views/Dashboard/Dashboard.js b/src/views/Dashboard/Dashboard.js index 43497df..f5c3eda 100644 --- a/src/views/Dashboard/Dashboard.js +++ b/src/views/Dashboard/Dashboard.js @@ -22,12 +22,13 @@ import { } from 'reactstrap'; import Widget03 from '../../views/Widgets/Widget03' import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'; +import { getStyle, hexToRgba } from '@coreui/coreui/dist/js/utilities' -const brandPrimary = '#20a8d8'; -const brandSuccess = '#4dbd74'; -const brandInfo = '#63c2de'; -const brandWarning = '#f8cb00'; -const brandDanger = '#f86c6b'; +const brandPrimary = getStyle('--primary') +const brandSuccess = getStyle('--success') +const brandInfo = getStyle('--info') +const brandWarning = getStyle('--warning') +const brandDanger = getStyle('--danger') // Card Chart 1 const cardChartData1 = { @@ -359,17 +360,6 @@ const sparklineChartOpts = { // Main Chart -// convert Hex to RGBA -function convertHex(hex, opacity) { - hex = hex.replace('#', ''); - const r = parseInt(hex.substring(0, 2), 16); - var g = parseInt(hex.substring(2, 4), 16); - var b = parseInt(hex.substring(4, 6), 16); - - var result = 'rgba(' + r + ',' + g + ',' + b + ',' + opacity / 100 + ')'; - return result; -} - //Random Numbers function random(min, max) { return Math.floor(Math.random() * (max - min + 1) + min); @@ -391,7 +381,7 @@ const mainChart = { datasets: [ { label: 'My First dataset', - backgroundColor: convertHex(brandInfo, 10), + backgroundColor: hexToRgba(brandInfo, 10), borderColor: brandInfo, pointHoverBackgroundColor: '#fff', borderWidth: 2, diff --git a/src/views/Theme/Colors/Colors.js b/src/views/Theme/Colors/Colors.js index 45d52f9..c8f69a6 100644 --- a/src/views/Theme/Colors/Colors.js +++ b/src/views/Theme/Colors/Colors.js @@ -2,19 +2,7 @@ import React, { Component } from 'react'; import ReactDOM from 'react-dom'; import classNames from 'classnames'; import { Row, Col } from 'reactstrap' -// import { rgbToHex } from '@coreui/coreui/js/src/utilities/' - -const rgbToHex = (color) => { - const rgb = color.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i) - if (rgb) { - const r = `0${parseInt(rgb[1], 10).toString(16)}` - const g = `0${parseInt(rgb[2], 10).toString(16)}` - const b = `0${parseInt(rgb[3], 10).toString(16)}` - - return rgb ? `#${r.slice(-2)}${g.slice(-2)}${b.slice(-2)}` : '' - } - return '' -} +import { rgbToHex } from '@coreui/coreui/dist/js/utilities' class ThemeView extends Component { constructor(props) {