sean/manja_dev_ui
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

refactor: replace most external libraries icons with coreui icons

Browse Source 
Not replaced:
- brand buttons,
- payment methods in dashboard
This commit is contained in:
woothu
2019-05-31 16:34:31 +02:00
parent 5fb7be44fa
commit 4ce4b01cae
20 changed files with 251 additions and 208 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/base/Cards.vue
+4 -4
View File
@@ -9,7 +9,7 @@
</CCol>
<CCol sm="6" md="4">
<CCard
headerHtml="<i class='fa fa-check'></i> Card with icon"
headerHtml="<i class='cui-check'></i> Card with icon"
:bodyHtml="loremIpsum"
/>
</CCol>
@@ -221,13 +221,13 @@
Card with header actions
<div class="c-card-header-actions">
<CLink href="#" class="c-card-header-action btn-setting" >
<i class="icon-settings"></i>
<i class="cui-settings"></i>
</CLink>
<CLink class="c-card-header-action btn-minimize" @click="isCollapsed = !isCollapsed">
<i :class="`icon-arrow-${ !isCollapsed ? 'up' : 'down'}`"></i>
<i :class="`cui-chevron-${isCollapsed ? 'bottom' : 'top'}`"></i>
</CLink>
<CLink href="#" class="c-card-header-action c-btn-close" v-on:click="show = false">
<i class="icon-close"></i>
<i class="cui-circle-x"></i>
</CLink>
</div>
</CCardHeader>
src/views/base/Forms.vue
+96 -82
View File
@@ -1,5 +1,5 @@
<template>
<div class="animated fadeIn">
<div class="c-animated c-fadeIn">
<CRow>
<CCol sm="6">
<CCard>
@@ -175,11 +175,11 @@
disabled
/>
<template v-for="(name, key) in checkboxNames">
<div class="form-row form-group" :key="name">
<CCol sm="3">
<div class="c-form-group c-form-row" :key="name">
<CCol tag="label" sm="3" class="c-col-form-label">
{{name}}
</CCol>
<CCol sm="9" :class="key % 2 === 1 ? 'form-inline' : ''">
<CCol sm="9" :class="key % 2 === 1 ? 'c-form-inline' : ''">
<CFormCheckbox
v-for="option in options"
:key="option"
@@ -194,11 +194,11 @@
</div>
</template>
<template v-for="(name, key) in radioNames">
<div class="form-row form-group" :key="name">
<div class="c-form-row c-form-group" :key="name">
<CCol sm="3">
{{name}}
</CCol>
<CCol sm="9" :class="key % 2 === 1 ? 'form-inline' : ''">
<CCol sm="9" :class="key % 2 === 1 ? 'c-form-inline' : ''">
<CFormRadio
v-for="(option, optKey) in options"
:key="option"
@@ -236,8 +236,8 @@
</CForm>
</CCardBody>
<CCardFooter>
<CButton type="submit" size="sm" variant="primary"><i class="fa fa-dot-circle-o"></i> Submit</CButton>
<CButton type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</CButton>
<CButton type="submit" size="sm" variant="primary"><i class="cui-circle-check"></i> Submit</CButton>
<CButton type="reset" size="sm" variant="danger"><i class="cui-ban"></i> Reset</CButton>
</CCardFooter>
</CCard>
<CCard>
@@ -249,20 +249,26 @@
<!-- Bootstrap Vue has some problems with Inline forms that's why we use some standard bootstrap classes -->
<CForm inline>
<CFormInput
class="mr-2"
label="<small>Name:&nbsp;</small>"
class="c-mr-2"
placeholder="Jane Doe"
/>
>
<template #label>
<small>Name:&nbsp;</small>
</template>
</CFormInput>
<CFormInput
label="<small>Email:&nbsp;</small>"
placeholder="jane.doe@example.com"
autocomplete="email"
/>
>
<template #label>
<small>Email:&nbsp;</small>
</template>
</CFormInput>
</CForm>
</CCardBody>
<CCardFooter>
<CButton type="submit" size="sm" variant="primary"><i class="fa fa-dot-circle-o"></i> Submit</CButton>
<CButton type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</CButton>
<CButton type="submit" size="sm" variant="primary"><i class="cui-circle-check"></i> Submit</CButton>
<CButton type="reset" size="sm" variant="danger"><i class="cui-ban"></i> Reset</CButton>
</CCardFooter>
</CCard>
</CCol>
@@ -289,12 +295,12 @@
horizontal
placeholder="Enter Password..."
/>
<CCardFooter>
<CButton type="submit" size="sm" variant="primary"><i class="fa fa-dot-circle-o"></i> Submit</CButton>
<CButton type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</CButton>
</CCardFooter>
</CForm>
</CCardBody>
<CCardFooter>
<CButton type="submit" size="sm" variant="primary"><i class="cui-circle-check"></i> Submit</CButton>
<CButton type="reset" size="sm" variant="danger"><i class="cui-ban"></i> Reset</CButton>
</CCardFooter>
</CCard>
<CCard>
<CCardHeader>
@@ -322,8 +328,8 @@
/>
</CCardBody>
<CCardFooter>
<CButton type="submit" size="sm" variant="primary"><i class="fa fa-dot-circle-o"></i> Submit</CButton>
<CButton type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</CButton>
<CButton type="submit" size="sm" variant="primary"><i class="cui-circle-check"></i> Submit</CButton>
<CButton type="reset" size="sm" variant="danger"><i class="cui-ban"></i> Reset</CButton>
</CCardFooter>
</CForm>
</CCard>
@@ -332,60 +338,60 @@
Input <strong>Grid</strong>
</CCardHeader>
<CCardBody>
<CRow class="form-group">
<CRow class="c-form-group">
<CCol sm="3">
<CFormInput class="mb-0" placeholder=".col-sm-3"/>
<CFormInput class="c-mb-0" placeholder=".col-sm-3"/>
</CCol>
</CRow>
<CRow class="form-group">
<CRow class="c-form-group">
<CCol sm="4">
<CFormInput class="mb-0" placeholder=".col-sm-4"/>
<CFormInput class="c-mb-0" placeholder=".col-sm-4"/>
</CCol>
</CRow>
<CRow class="form-group">
<CRow class="c-form-group">
<CCol sm="5">
<CFormInput class="mb-0" placeholder=".col-sm-5"/>
<CFormInput class="c-mb-0" placeholder=".col-sm-5"/>
</CCol>
</CRow>
<CRow class="form-group">
<CRow class="c-form-group">
<CCol sm="6">
<CFormInput class="mb-0" placeholder=".col-sm-6"/>
<CFormInput class="c-mb-0" placeholder=".col-sm-6"/>
</CCol>
</CRow>
<CRow class="form-group">
<CRow class="c-form-group">
<CCol sm="7">
<CFormInput class="mb-0" placeholder=".col-sm-7"/>
<CFormInput class="c-mb-0" placeholder=".col-sm-7"/>
</CCol>
</CRow>
<CRow class="form-group">
<CRow class="c-form-group">
<CCol sm="8">
<CFormInput class="mb-0" placeholder=".col-sm-8"/>
<CFormInput class="c-mb-0" placeholder=".col-sm-8"/>
</CCol>
</CRow>
<CRow class="form-group">
<CRow class="c-form-group">
<CCol sm="9">
<CFormInput class="mb-0" placeholder=".col-sm-9"/>
<CFormInput class="c-mb-0" placeholder=".col-sm-9"/>
</CCol>
</CRow>
<CRow class="form-group">
<CRow class="c-form-group">
<CCol sm="10">
<CFormInput class="mb-0" placeholder=".col-sm-10"/>
<CFormInput class="c-mb-0" placeholder=".col-sm-10"/>
</CCol>
</CRow>
<CRow class="form-group">
<CRow class="c-form-group">
<CCol sm="11">
<CFormInput class="mb-0" placeholder=".col-sm-11"/>
<CFormInput class="c-mb-0" placeholder=".col-sm-11"/>
</CCol>
</CRow>
<CRow class="form-group">
<CRow class="c-form-group">
<CCol sm="12">
<CFormInput class="mb-0" placeholder=".col-sm-12"/>
<CFormInput class="c-mb-0" placeholder=".col-sm-12"/>
</CCol>
</CRow>
</CCardBody>
<CCardFooter>
<CButton type="submit" size="sm" variant="primary"><i class="fa fa-user"></i> Login</CButton>
<CButton type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</CButton>
<CButton type="submit" size="sm" variant="primary"><i class="cui-user"></i> Login</CButton>
<CButton type="reset" size="sm" variant="danger"><i class="cui-ban"></i> Reset</CButton>
</CCardFooter>
</CCard>
<CCard>
@@ -412,8 +418,8 @@
/>
</CCardBody>
<CCardFooter>
<CButton type="submit" size="sm" variant="primary"><i class="fa fa-dot-circle-o"></i> Submit</CButton>
<CButton type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</CButton>
<CButton type="submit" size="sm" variant="primary"><i class="cui-circle-check"></i> Submit</CButton>
<CButton type="reset" size="sm" variant="danger"><i class="cui-ban"></i> Reset</CButton>
</CCardFooter>
</CCard>
</CCol>
@@ -475,23 +481,23 @@
<CCardBody>
<CFormInput
placeholder="Username"
prependHtml="<i class='fa fa-user'></i>"
prependHtml="<i class='cui-user'></i>"
/>
<CFormInput
type="email"
placeholder="Email"
autocomplete="email"
appendHtml="<i class='fa fa-envelope-o'></i>"
appendHtml="<i class='cui-envelope-open'></i>"
/>
<CFormInput
prependHtml="<i class='fa fa-euro'></i>"
prependHtml="<i class='cui-euro'></i>"
placeholder="ex. $1.000.000"
appendHtml=".00"
/>
</CCardBody>
<CCardFooter>
<CButton type="submit" size="sm" variant="success"><i class="fa fa-dot-circle-o"></i> Submit</CButton>
<CButton type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</CButton>
<CButton type="submit" size="sm" variant="success"><i class="cui-circle-check"></i> Submit</CButton>
<CButton type="reset" size="sm" variant="danger"><i class="cui-ban"></i> Reset</CButton>
</CCardFooter>
</CCard>
</CCol>
@@ -503,7 +509,9 @@
<CCardBody>
<CFormInput placeholder="Username">
<template #prepend>
<CButton variant="primary"><i class="fa fa-search"></i> Search</CButton>
<CButton variant="primary">
<i class="cui-magnifying-glass"></i> Search
</CButton>
</template>
</CFormInput>
<CFormInput
@@ -529,8 +537,8 @@
</CFormInput>
</CCardBody>
<CCardFooter>
<CButton type="submit" size="sm" variant="success"><i class="fa fa-dot-circle-o"></i> Submit</CButton>
<CButton type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</CButton>
<CButton type="submit" size="sm" variant="success"><i class="cui-circle-check"></i> Submit</CButton>
<CButton type="reset" size="sm" variant="danger"><i class="cui-ban"></i> Reset</CButton>
</CCardFooter>
</CCard>
</CCol>
@@ -602,8 +610,8 @@
</CFormInput>
</CCardBody>
<CCardFooter>
<CButton type="submit" size="sm" variant="success"><i class="fa fa-dot-circle-o"></i> Submit</CButton>
<CButton type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</CButton>
<CButton type="submit" size="sm" variant="success"><i class="cui-circle-check"></i> Submit</CButton>
<CButton type="reset" size="sm" variant="danger"><i class="cui-ban"></i> Reset</CButton>
</CCardFooter>
</CCard>
</CCol>
@@ -616,15 +624,15 @@
</CCardHeader>
<CCardBody>
<CRow
class="form-group"
class="c-form-group"
v-for="(number, key) in [4,5,6,7,8]"
:key="key"
>
<CCol :col="12 - number">
<CFormInput class="mb-0" :placeholder="`.col-md-${12 - number}`"/>
<CFormInput class="c-mb-0" :placeholder="`.col-md-${12 - number}`"/>
</CCol>
<CCol :col="number">
<CFormInput class="mb-0" :placeholder="`.col-md-${number}`"/>
<CFormInput class="c-mb-0" :placeholder="`.col-md-${number}`"/>
</CCol>
</CRow>
</CCardBody>
@@ -644,15 +652,15 @@
</CCardHeader>
<CCardBody>
<CRow
class="form-group"
class="c-form-group"
v-for="(number, key) in [4,5,6,7,8]"
:key="key"
>
<CCol :col="number">
<CFormInput class="mb-0" :placeholder="`.col-${number}`"/>
<CFormInput class="c-mb-0" :placeholder="`.col-${number}`"/>
</CCol>
<CCol :col="12 - number">
<CFormInput class="mb-0" :placeholder="`.col-${12 - number}`"/>
<CFormInput class="c-mb-0" :placeholder="`.col-${12 - number}`"/>
</CCol>
</CRow>
</CCardBody>
@@ -676,13 +684,13 @@
<CForm>
<CFormInput
prependHtml="Username"
appendHtml="<i class='fa fa-user'></i>"
appendHtml="<i class='cui-user'></i>"
/>
<CFormInput
prependHtml="Email"
type="email"
autocomplete="email"
appendHtml="<i class='fa fa-envelope'></i>"
appendHtml="<i class='cui-envelope-closed'></i>"
/>
<CFormInput
prependHtml="Password"
@@ -690,8 +698,10 @@
autocomplete="current-password"
appendHtml="<i class='fa fa-asterisk'></i>"
/>
<div class="form-group form-actions">
<CButton type="submit" size="sm" variant="primary">Submit</CButton>
<div class="c-form-group c-form-actions">
<CButton type="submit" size="sm" variant="primary">
Submit
</CButton>
</div>
</CForm>
</CCardBody>
@@ -706,13 +716,13 @@
<CForm>
<CFormInput
placeholder="Username"
appendHtml="<i class='fa fa-user'></i>"
appendHtml="<i class='cui-user'></i>"
/>
<CFormInput
placeholder="Email"
type="email"
autocomplete="email"
appendHtml="<i class='fa fa-envelope'></i>"
appendHtml="<i class='cui-envelope-closed'></i>"
/>
<CFormInput
placeholder="Password"
@@ -720,8 +730,10 @@
autocomplete="current-password"
appendHtml="<i class='fa fa-asterisk'></i>"
/>
<div class="form-group form-actions">
<CButton type="submit" class="btn btn-sm btn-secondary">Submit</CButton>
<div class="c-form-group c-form-actions">
<CButton type="submit" class="c-btn c-btn-sm c-btn-secondary">
Submit
</CButton>
</div>
</CForm>
</CCardBody>
@@ -736,13 +748,13 @@
<CForm>
<CFormInput
placeholder="Username"
prependHtml="<i class='fa fa-user'></i>"
prependHtml="<i class='cui-user'></i>"
/>
<CFormInput
placeholder="Email"
type="email"
autocomplete="email"
prependHtml="<i class='fa fa-envelope'></i>"
prependHtml="<i class='cui-envelope-closed'></i>"
/>
<CFormInput
placeholder="Password"
@@ -750,8 +762,10 @@
autocomplete="current-password"
prependHtml="<i class='fa fa-asterisk'></i>"
/>
<div class="form-group form-actions">
<CButton type="submit" size="sm" variant="success">Submit</CButton>
<div class="c-form-group c-form-actions">
<CButton type="submit" size="sm" variant="success">
Submit
</CButton>
</div>
</CForm>
</CCardBody>
@@ -763,19 +777,19 @@
<transition name="fade">
<CCard v-if="show">
<CCardHeader>
<i class="fa fa-edit"></i> Form Elements
<div class="card-header-actions">
<CLink href="#" class="card-header-action btn-setting">
<i class="icon-settings"></i>
<i class="cui-pencil"></i> Form Elements
<div class="c-card-header-actions">
<CLink href="#" class="c-card-header-action c-btn-setting">
<i class="cui-settings"></i>
</CLink>
<CLink
class="card-header-action btn-minimize"
class="c-card-header-action c-btn-minimize"
@click="formCollapsed=!formCollapsed"
>
<i :class="`icon-arrow-${formCollapsed ? 'down' : 'up'}`"></i>
<i :class="`cui-chevron-${formCollapsed ? 'bottom' : 'top'}`"></i>
</CLink>
<CLink href="#" class="card-header-action btn-close" v-on:click="show = !show">
<i class="icon-close"></i>
<CLink href="#" class="c-card-header-action c-btn-close" v-on:click="show = !show">
<i class="cui-circle-x"></i>
</CLink>
</div>
</CCardHeader>
@@ -813,7 +827,7 @@
<CButton variant="danger">Options</CButton>
</template>
</CFormInput>
<div class="form-actions">
<div class="c-form-actions">
<CButton type="submit" variant="primary">Save changes</CButton>
<CButton variant="secondary">Cancel</CButton>
</div>
src/views/base/Navbars.vue
+3 -3
View File
@@ -20,11 +20,11 @@
</CNavbarNav>
<CNavbarNav class="ml-auto">
<CDropdown right class="nav-item b-nav-dropdown" toggleClasses="nav-link">
<CDropdownItem><i class="fa fa-file" /> Projects
<CDropdownItem><i class="cui-file" /> Projects
<CBadge variant="primary">32</CBadge>
</CDropdownItem>
<CDropdownItem><i class="fa fa-shield" /> Lock Account</CDropdownItem>
<CDropdownItem><i class="fa fa-lock" /> Logout</CDropdownItem>
<CDropdownItem><i class="cui-shield" /> Lock Account</CDropdownItem>
<CDropdownItem><i class="cui-lock-locked" /> Logout</CDropdownItem>
</CDropdown>
</CNavbarNav>
</CCollapse>
src/views/base/Navs.vue
+1 -1
View File
@@ -31,7 +31,7 @@
<CCardBody>
<CNav>
<CNavItem active>
<i class="icon-basket-loaded"></i>
<i class="cui-basket-loaded"></i>
</CNavItem>
<CNavItem>
Link
src/views/base/Tabs.vue
+9 -9
View File
@@ -77,7 +77,7 @@
<CTabs addTabClasses="c-mt-1">
<CTab active>
<template slot="title">
<i class="icon-calculator"></i>
<i class="cui-calculator"></i>
</template>
1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
@@ -87,7 +87,7 @@
</CTab>
<CTab>
<template slot="title">
<i class="icon-basket-loaded"></i>
<i class="cui-basket-loaded"></i>
</template>
2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
@@ -97,7 +97,7 @@
</CTab>
<CTab>
<template slot="title">
<i class="icon-pie-chart"></i>
<i class="cui-pie-chart"></i>
</template>
3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
@@ -118,7 +118,7 @@
<CTabs addTabClasses="c-mt-1">
<CTab active>
<template slot="title">
<i class="icon-calculator"></i> {{tabs[0]}}
<i class="cui-calculator"></i> {{tabs[0]}}
</template>
1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
@@ -128,7 +128,7 @@
</CTab>
<CTab>
<template slot="title">
<i class="icon-basket-loaded"></i> {{tabs[1]}}
<i class="cui-basket-loaded"></i> {{tabs[1]}}
</template>
2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
@@ -138,7 +138,7 @@
</CTab>
<CTab>
<template slot="title">
<i class="icon-pie-chart"></i> {{tabs[2]}}
<i class="cui-pie-chart"></i> {{tabs[2]}}
</template>
3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
@@ -159,7 +159,7 @@
<CTabs pills vertical="4">
<CTab active>
<template slot="title">
<i class="icon-calculator"></i> {{tabs[0]}}
<i class="cui-calculator"></i> {{tabs[0]}}
</template>
1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
@@ -169,7 +169,7 @@
</CTab>
<CTab>
<template slot="title">
<i class="icon-basket-loaded"></i> {{tabs[1]}}
<i class="cui-basket-loaded"></i> {{tabs[1]}}
</template>
2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
@@ -179,7 +179,7 @@
</CTab>
<CTab>
<template slot="title">
<i class="icon-pie-chart"></i> {{tabs[2]}}
<i class="cui-pie-chart"></i> {{tabs[2]}}
</template>
3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut