gitadmin/admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: IE polyfills and import utilities from @coreui/coreui

Browse Source
This commit is contained in:
xidedix 2018-04-27 20:55:55 +02:00
parent 5b4bc4621d
commit c9762919d9
6 changed files with 185 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
package.json
View File

@ -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": {

1
src/index.js
View File

@ -3,6 +3,7 @@ import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import './polyfill'
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

42
src/polyfill.js Normal file
View File

@ -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;
};
}

221
src/scss/style.css
View File

@ -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; }

24
src/views/Dashboard/Dashboard.js
View File

@ -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,

14
src/views/Theme/Colors/Colors.js
View File

@ -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) {