Skip to content

Commit c976291

Browse files
xidedixxidedix
committed
refactor: IE polyfills and import utilities from @coreui/coreui
1 parent 5b4bc46 commit c976291

File tree

6 files changed

+185
-120
lines changed

6 files changed

+185
-120
lines changed

‎package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@coreui/coreui-free-react-admin-template",
3-
"version": "2.0.0-beta.2",
3+
"version": "2.0.0-beta.3",
44
"description": "CoreUI React Open Source Bootstrap 4 Admin Template",
55
"author": "Łukasz Holeczek",
66
"homepage": "https://coreui.io",
@@ -27,6 +27,7 @@
2727
"react-router-config": "^1.0.0-beta.4",
2828
"react-router-dom": "^4.2.2",
2929
"reactstrap": "^5.0.0",
30+
"reflect.ownkeys": "^0.2.0",
3031
"simple-line-icons": "^2.4.1"
3132
},
3233
"devDependencies": {

‎src/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom';
33
import './index.css';
44
import App from './App';
55
import registerServiceWorker from './registerServiceWorker';
6+
import './polyfill'
67

78
ReactDOM.render(<App />, document.getElementById('root'));
89
registerServiceWorker();

‎src/polyfill.js

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
// IE11 polyfills
2+
3+
import ownKeys from 'reflect.ownkeys'
4+
5+
const reduce = Function.bind.call(Function.call, Array.prototype.reduce);
6+
const isEnumerable = Function.bind.call(Function.call, Object.prototype.propertyIsEnumerable);
7+
const concat = Function.bind.call(Function.call, Array.prototype.concat);
8+
9+
if (!Object.values) {
10+
Object.values = function values(O) {
11+
return reduce(ownKeys(O), (v, k) => concat(v, typeof k === 'string' && isEnumerable(O, k) ? [O[k]] : []), []);
12+
};
13+
}
14+
15+
if (!Object.entries) {
16+
Object.entries = function entries(O) {
17+
return reduce(ownKeys(O), (e, k) => concat(e, typeof k === 'string' && isEnumerable(O, k) ? [[k, O[k]]] : []), []);
18+
};
19+
}
20+
21+
if (!Array.prototype.find) {
22+
Array.prototype.find = function(predicate) {
23+
if (this == null) {
24+
throw new TypeError('Array.prototype.find called on null or undefined');
25+
}
26+
if (typeof predicate !== 'function') {
27+
throw new TypeError('predicate must be a function');
28+
}
29+
const list = Object(this);
30+
const length = list.length >>> 0;
31+
const thisArg = arguments[1];
32+
let value;
33+
34+
for (let i = 0; i < length; i++) {
35+
value = list[i];
36+
if (predicate.call(thisArg, value, i, list)) {
37+
return value;
38+
}
39+
}
40+
return undefined;
41+
};
42+
}

‎src/scss/style.css

Lines changed: 132 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -6588,21 +6588,26 @@ a.text-dark:hover, a.text-dark:focus {
65886588
margin: -0.375rem -0.75rem;
65896589
line-height: 2.0625rem;
65906590
text-align: center;
6591-
background-color: rgba(0, 0, 0, 0.2); }
6591+
background-color: rgba(0, 0, 0, 0.2);
6592+
border-radius: 0.25rem; }
65926593
.btn-brand i + span {
65936594
margin-left: 1.5rem; }
65946595
.btn-brand.btn-lg i, .btn-group-lg > .btn-brand.btn i {
65956596
width: 2.64063rem;
65966597
margin: -0.5rem -1rem;
6597-
line-height: 2.64063rem; }
6598+
line-height: 2.64063rem;
6599+
border-radius: 0.3rem; }
65986600
.btn-brand.btn-lg i + span, .btn-group-lg > .btn-brand.btn i + span {
65996601
margin-left: 2rem; }
66006602
.btn-brand.btn-sm i, .btn-group-sm > .btn-brand.btn i {
66016603
width: 1.64844rem;
66026604
margin: -0.25rem -0.5rem;
6603-
line-height: 1.64844rem; }
6605+
line-height: 1.64844rem;
6606+
border-radius: 0.2rem; }
66046607
.btn-brand.btn-sm i + span, .btn-group-sm > .btn-brand.btn i + span {
66056608
margin-left: 1rem; }
6609+
.btn-brand.btn-square i {
6610+
border-radius: 0; }
66066611

66076612
.btn-facebook {
66086613
color: #fff;
@@ -7724,6 +7729,92 @@ canvas {
77247729
.main .container-fluid {
77257730
padding: 0 30px; }
77267731

7732+
.app-header {
7733+
position: relative;
7734+
flex-direction: row;
7735+
height: 55px;
7736+
padding: 0;
7737+
margin: 0;
7738+
background-color: #fff;
7739+
border-bottom: 1px solid #c8ced3; }
7740+
.app-header .navbar-brand {
7741+
display: inline-flex;
7742+
align-items: center;
7743+
justify-content: center;
7744+
width: 155px;
7745+
height: 55px;
7746+
padding: 0;
7747+
margin-right: 0;
7748+
background-color: transparent; }
7749+
.app-header .navbar-brand .navbar-brand-minimized {
7750+
display: none; }
7751+
.app-header .navbar-toggler {
7752+
min-width: 50px;
7753+
padding: 0.25rem 0; }
7754+
.app-header .navbar-toggler:hover .navbar-toggler-icon {
7755+
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"); }
7756+
.app-header .navbar-toggler-icon {
7757+
height: 23px;
7758+
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"); }
7759+
.app-header .navbar-nav {
7760+
flex-direction: row;
7761+
align-items: center; }
7762+
.app-header .nav-item {
7763+
position: relative;
7764+
min-width: 50px;
7765+
margin: 0;
7766+
text-align: center; }
7767+
.app-header .nav-item button {
7768+
margin: 0 auto; }
7769+
.app-header .nav-item .nav-link {
7770+
padding-top: 0;
7771+
padding-bottom: 0;
7772+
background: 0;
7773+
border: 0; }
7774+
.app-header .nav-item .nav-link .badge {
7775+
position: absolute;
7776+
top: 50%;
7777+
left: 50%;
7778+
margin-top: -16px;
7779+
margin-left: 0; }
7780+
.app-header .nav-item .nav-link > .img-avatar, .app-header .nav-item .avatar.nav-link > img {
7781+
height: 35px;
7782+
margin: 0 10px; }
7783+
.app-header .dropdown-menu {
7784+
padding-bottom: 0;
7785+
line-height: 1.5; }
7786+
.app-header .dropdown-item {
7787+
min-width: 180px; }
7788+
7789+
.navbar-nav .nav-link {
7790+
color: #73818f; }
7791+
.navbar-nav .nav-link:hover, .navbar-nav .nav-link:focus {
7792+
color: #2f353a; }
7793+
7794+
.navbar-nav .open > .nav-link, .navbar-nav .open > .nav-link:hover, .navbar-nav .open > .nav-link:focus,
7795+
.navbar-nav .active > .nav-link,
7796+
.navbar-nav .active > .nav-link:hover,
7797+
.navbar-nav .active > .nav-link:focus,
7798+
.navbar-nav .nav-link.open,
7799+
.navbar-nav .nav-link.open:hover,
7800+
.navbar-nav .nav-link.open:focus,
7801+
.navbar-nav .nav-link.active,
7802+
.navbar-nav .nav-link.active:hover,
7803+
.navbar-nav .nav-link.active:focus {
7804+
color: #2f353a; }
7805+
7806+
.navbar-divider {
7807+
background-color: rgba(0, 0, 0, 0.075); }
7808+
7809+
@media (min-width: 992px) {
7810+
.brand-minimized .app-header .navbar-brand {
7811+
width: 50px;
7812+
background-color: transparent; }
7813+
.brand-minimized .app-header .navbar-brand .navbar-brand-full {
7814+
display: none; }
7815+
.brand-minimized .app-header .navbar-brand .navbar-brand-minimized {
7816+
display: block; } }
7817+
77277818
.input-group-prepend,
77287819
.input-group-append {
77297820
white-space: nowrap;
@@ -7871,92 +7962,6 @@ canvas {
78717962
*[dir="rtl"] .nav {
78727963
padding-right: 0; }
78737964

7874-
.app-header {
7875-
position: relative;
7876-
flex-direction: row;
7877-
height: 55px;
7878-
padding: 0;
7879-
margin: 0;
7880-
background-color: #fff;
7881-
border-bottom: 1px solid #c8ced3; }
7882-
.app-header .navbar-brand {
7883-
display: inline-flex;
7884-
align-items: center;
7885-
justify-content: center;
7886-
width: 155px;
7887-
height: 55px;
7888-
padding: 0;
7889-
margin-right: 0;
7890-
background-color: transparent; }
7891-
.app-header .navbar-brand .navbar-brand-minimized {
7892-
display: none; }
7893-
.app-header .navbar-toggler {
7894-
min-width: 50px;
7895-
padding: 0.25rem 0; }
7896-
.app-header .navbar-toggler:hover .navbar-toggler-icon {
7897-
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"); }
7898-
.app-header .navbar-toggler-icon {
7899-
height: 23px;
7900-
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"); }
7901-
.app-header .navbar-nav {
7902-
flex-direction: row;
7903-
align-items: center; }
7904-
.app-header .nav-item {
7905-
position: relative;
7906-
min-width: 50px;
7907-
margin: 0;
7908-
text-align: center; }
7909-
.app-header .nav-item button {
7910-
margin: 0 auto; }
7911-
.app-header .nav-item .nav-link {
7912-
padding-top: 0;
7913-
padding-bottom: 0;
7914-
background: 0;
7915-
border: 0; }
7916-
.app-header .nav-item .nav-link .badge {
7917-
position: absolute;
7918-
top: 50%;
7919-
left: 50%;
7920-
margin-top: -16px;
7921-
margin-left: 0; }
7922-
.app-header .nav-item .nav-link > .img-avatar, .app-header .nav-item .avatar.nav-link > img {
7923-
height: 35px;
7924-
margin: 0 10px; }
7925-
.app-header .dropdown-menu {
7926-
padding-bottom: 0;
7927-
line-height: 1.5; }
7928-
.app-header .dropdown-item {
7929-
min-width: 180px; }
7930-
7931-
.navbar-nav .nav-link {
7932-
color: #73818f; }
7933-
.navbar-nav .nav-link:hover, .navbar-nav .nav-link:focus {
7934-
color: #2f353a; }
7935-
7936-
.navbar-nav .open > .nav-link, .navbar-nav .open > .nav-link:hover, .navbar-nav .open > .nav-link:focus,
7937-
.navbar-nav .active > .nav-link,
7938-
.navbar-nav .active > .nav-link:hover,
7939-
.navbar-nav .active > .nav-link:focus,
7940-
.navbar-nav .nav-link.open,
7941-
.navbar-nav .nav-link.open:hover,
7942-
.navbar-nav .nav-link.open:focus,
7943-
.navbar-nav .nav-link.active,
7944-
.navbar-nav .nav-link.active:hover,
7945-
.navbar-nav .nav-link.active:focus {
7946-
color: #2f353a; }
7947-
7948-
.navbar-divider {
7949-
background-color: rgba(0, 0, 0, 0.075); }
7950-
7951-
@media (min-width: 992px) {
7952-
.brand-minimized .app-header .navbar-brand {
7953-
width: 50px;
7954-
background-color: transparent; }
7955-
.brand-minimized .app-header .navbar-brand .navbar-brand-full {
7956-
display: none; }
7957-
.brand-minimized .app-header .navbar-brand .navbar-brand-minimized {
7958-
display: block; } }
7959-
79607965
.progress-xs {
79617966
height: 4px; }
79627967

@@ -9874,5 +9879,43 @@ body {
98749879
right: auto;
98759880
left: 10px; }
98769881

9882+
.ie-custom-properties {
9883+
blue: #20a8d8;
9884+
indigo: #6610f2;
9885+
purple: #6f42c1;
9886+
pink: #e83e8c;
9887+
red: #f86c6b;
9888+
orange: #f8cb00;
9889+
yellow: #ffc107;
9890+
green: #4dbd74;
9891+
teal: #20c997;
9892+
cyan: #17a2b8;
9893+
white: #fff;
9894+
gray: #73818f;
9895+
gray-dark: #2f353a;
9896+
light-blue: #63c2de;
9897+
gray-100: #f0f3f5;
9898+
gray-200: #e4e7ea;
9899+
gray-300: #c8ced3;
9900+
gray-400: #acb4bc;
9901+
gray-500: #8f9ba6;
9902+
gray-600: #73818f;
9903+
gray-700: #5c6873;
9904+
gray-800: #2f353a;
9905+
gray-900: #23282c;
9906+
primary: #20a8d8;
9907+
secondary: #c8ced3;
9908+
success: #4dbd74;
9909+
info: #63c2de;
9910+
warning: #ffc107;
9911+
danger: #f86c6b;
9912+
light: #f0f3f5;
9913+
dark: #2f353a;
9914+
breakpoint-xs: 0;
9915+
breakpoint-sm: 576px;
9916+
breakpoint-md: 768px;
9917+
breakpoint-lg: 992px;
9918+
breakpoint-xl: 1200px; }
9919+
98779920
.app-header .navbar-nav .dropdown-menu-right {
98789921
right: auto; }

‎src/views/Dashboard/Dashboard.js

Lines changed: 7 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -22,12 +22,13 @@ import {
2222
} from 'reactstrap';
2323
import Widget03 from '../../views/Widgets/Widget03'
2424
import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips';
25+
import { getStyle, hexToRgba } from '@coreui/coreui/dist/js/utilities'
2526

26-
const brandPrimary = '#20a8d8';
27-
const brandSuccess = '#4dbd74';
28-
const brandInfo = '#63c2de';
29-
const brandWarning = '#f8cb00';
30-
const brandDanger = '#f86c6b';
27+
const brandPrimary = getStyle('--primary')
28+
const brandSuccess = getStyle('--success')
29+
const brandInfo = getStyle('--info')
30+
const brandWarning = getStyle('--warning')
31+
const brandDanger = getStyle('--danger')
3132

3233
// Card Chart 1
3334
const cardChartData1 = {
@@ -359,17 +360,6 @@ const sparklineChartOpts = {
359360

360361
// Main Chart
361362

362-
// convert Hex to RGBA
363-
function convertHex(hex, opacity) {
364-
hex = hex.replace('#', '');
365-
const r = parseInt(hex.substring(0, 2), 16);
366-
var g = parseInt(hex.substring(2, 4), 16);
367-
var b = parseInt(hex.substring(4, 6), 16);
368-
369-
var result = 'rgba(' + r + ',' + g + ',' + b + ',' + opacity / 100 + ')';
370-
return result;
371-
}
372-
373363
//Random Numbers
374364
function random(min, max) {
375365
return Math.floor(Math.random() * (max - min + 1) + min);
@@ -391,7 +381,7 @@ const mainChart = {
391381
datasets: [
392382
{
393383
label: 'My First dataset',
394-
backgroundColor: convertHex(brandInfo, 10),
384+
backgroundColor: hexToRgba(brandInfo, 10),
395385
borderColor: brandInfo,
396386
pointHoverBackgroundColor: '#fff',
397387
borderWidth: 2,

‎src/views/Theme/Colors/Colors.js

Lines changed: 1 addition & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,7 @@ import React, { Component } from 'react';
22
import ReactDOM from 'react-dom';
33
import classNames from 'classnames';
44
import { Row, Col } from 'reactstrap'
5-
// import { rgbToHex } from '@coreui/coreui/js/src/utilities/'
6-
7-
const rgbToHex = (color) => {
8-
const rgb = color.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i)
9-
if (rgb) {
10-
const r = `0${parseInt(rgb[1], 10).toString(16)}`
11-
const g = `0${parseInt(rgb[2], 10).toString(16)}`
12-
const b = `0${parseInt(rgb[3], 10).toString(16)}`
13-
14-
return rgb ? `#${r.slice(-2)}${g.slice(-2)}${b.slice(-2)}` : ''
15-
}
16-
return ''
17-
}
5+
import { rgbToHex } from '@coreui/coreui/dist/js/utilities'
186

197
class ThemeView extends Component {
208
constructor(props) {

0 commit comments

Comments
 (0)