tobi/vue-black-dash
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Cleanup card component

Browse Source 
Work on rtl support
This commit is contained in:
cristij 2018-09-02 14:07:34 +03:00
parent fc8c1ab74e
commit bf08083330
9 changed files with 43 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/index.html
View File

@ -12,6 +12,8 @@
<!-- Fonts and icons --> <!-- Fonts and icons -->
<link href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,600,700,800" rel="stylesheet" /> <link href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,600,700,800" rel="stylesheet" />
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet"> <link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-rtl/3.4.0/css/bootstrap-rtl.css" rel="stylesheet" />
</head> </head>
<body> <body>
<div class="wrapper" id="app"> <div class="wrapper" id="app">

10
src/components/Cards/Card.vue
View File

@ -3,7 +3,7 @@
<div class="card-image" v-if="$slots.image"> <div class="card-image" v-if="$slots.image">
<slot name="image"></slot> <slot name="image"></slot>
</div> </div>
<div class="card-header" :class="{'text-right': isRTL}" v-if="$slots.header || title"> <div class="card-header" v-if="$slots.header || title">
<slot name="header"> <slot name="header">
<h4 class="card-title">{{title}}</h4> <h4 class="card-title">{{title}}</h4>
<p class="card-category" v-if="subTitle">{{subTitle}}</p> <p class="card-category" v-if="subTitle">{{subTitle}}</p>
@ -24,12 +24,8 @@ export default {
props: { props: {
title: String, title: String,
subTitle: String, subTitle: String,
type: String type: String,
}, cardHeaderClasses: [String, Object]
computed: {
isRTL() {
return this.$rtl.isRTL;
}
} }
}; };
</script> </script>

8
src/components/NotificationPlugin/Notification.vue
View File

@ -17,11 +17,11 @@
</button> </button>
<span v-if="icon" data-notify="icon" :class="['alert-icon', icon]"></span> <span v-if="icon" data-notify="icon" :class="['alert-icon', icon]"></span>
<span data-notify="message"> <div data-notify="message">
<span v-if="title" class="title"><b>{{title}}<br/></b></span> <div v-if="title" class="title"><b>{{title}}<br/></b></div>
<span v-if="message" v-html="message"></span> <div v-if="message" v-html="message"></div>
<content-render v-if="!message && component" :component="component"></content-render> <content-render v-if="!message && component" :component="component"></content-render>
</span> </div>
</div> </div>
</template> </template>
<script> <script>

2
src/layout/dashboard/TopNavbar.vue
View File

@ -24,7 +24,7 @@
</button> </button>
<div class="collapse navbar-collapse"> <div class="collapse navbar-collapse">
<ul class="navbar-nav ml-auto "> <ul class="navbar-nav" :class="$rtl.isRTL ? 'mr-auto' : 'ml-auto'">
<div class="search-bar input-group"> <div class="search-bar input-group">
<!-- <input type="text" class="form-control" placeholder="Search..."> <!-- <input type="text" class="form-control" placeholder="Search...">
<div class="input-group-addon"><i class="tim-icons icon-zoom-split"></i></div> --> <div class="input-group-addon"><i class="tim-icons icon-zoom-split"></i></div> -->

3
src/pages/Notifications.vue
View File

@ -109,7 +109,8 @@
icon: "tim-icons icon-bell-55", icon: "tim-icons icon-bell-55",
horizontalAlign: horizontalAlign, horizontalAlign: horizontalAlign,
verticalAlign: verticalAlign, verticalAlign: verticalAlign,
type: this.type[color] type: this.type[color],
timeout: 0
}); });
} }
} }

2
src/pages/Notifications/NotificationTemplate.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<span>Welcome to <b>Black Dashboard</b> - a beautiful freebie for every web developer.</span> <div>Welcome to <b>Black Dashboard</b> - a beautiful freebie for every web developer.</div>
</template> </template>
<script> <script>

32
src/pages/RTLSupport.vue
View File

@ -1,16 +1,17 @@
<template> <template>
<div> <div>
<div class="row"> <div class="row">
<div class="col-12"> <div class="col-12">
<card type="chart"> <card type="chart" card-header-classes="text-left">
<template slot="header"> <template slot="header">
<div class="row"> <div class="row">
<div class="col-sm-6 text-left"> <div class="col-sm-6 text-right">
<h5 class="card-category">Total Shipments</h5> <h5 class="card-category">Total Shipments</h5>
<h2 class="card-title">Performance</h2> <h2 class="card-title">Performance</h2>
</div> </div>
<div class="col-sm-6"> <div class="col-sm-6">
<div class="btn-group btn-group-toggle float-right" data-toggle="buttons"> <div class="btn-group btn-group-toggle" data-toggle="buttons">
<label v-for="(option, index) in bigLineChart.categories" <label v-for="(option, index) in bigLineChart.categories"
:key="option" :key="option"
class="btn btn-sm btn-primary btn-simple" class="btn btn-sm btn-primary btn-simple"
@ -39,10 +40,10 @@
</div> </div>
<div class="row"> <div class="row">
<div class="col-lg-4"> <div class="col-lg-4">
<card type="chart"> <card type="chart" class="text-right">
<template slot="header"> <template slot="header">
<h5 class="card-category">Total Shipments</h5> <h5 class="card-category">Total Shipments</h5>
<h3 class="card-title"><i class="tim-icons icon-bell-55 text-primary "></i> 763,215</h3> <h3 class="card-title"><i class="tim-icons icon-bell-55 text-primary"></i> 763,215</h3>
</template> </template>
<div class="chart-area"> <div class="chart-area">
<line-chart style="height: 100%" <line-chart style="height: 100%"
@ -55,7 +56,7 @@
</card> </card>
</div> </div>
<div class="col-lg-4"> <div class="col-lg-4">
<card type="chart"> <card type="chart" class="text-right">
<template slot="header"> <template slot="header">
<h5 class="card-category">Daily Sales</h5> <h5 class="card-category">Daily Sales</h5>
<h3 class="card-title"><i class="tim-icons icon-delivery-fast text-info "></i> 3,500€</h3> <h3 class="card-title"><i class="tim-icons icon-delivery-fast text-info "></i> 3,500€</h3>
@ -71,7 +72,7 @@
</card> </card>
</div> </div>
<div class="col-lg-4"> <div class="col-lg-4">
<card type="chart"> <card type="chart" class="text-right">
<template slot="header"> <template slot="header">
<h5 class="card-category">Completed Tasks</h5> <h5 class="card-category">Completed Tasks</h5>
<h3 class="card-title"><i class="tim-icons icon-send text-success "></i> 12,100K</h3> <h3 class="card-title"><i class="tim-icons icon-send text-success "></i> 12,100K</h3>
@ -89,11 +90,11 @@
</div> </div>
<div class="row"> <div class="row">
<div class="col-lg-6 col-md-12"> <div class="col-lg-6 col-md-12">
<card type="tasks"> <card type="tasks" class="text-right">
<template slot="header"> <template slot="header">
<h6 class="title d-inline">Tasks(5)</h6> <h6 class="title d-inline">Tasks(5)</h6>
<p class="card-category d-inline">today</p> <p class="card-category d-inline">today</p>
<div class="dropdown"> <div class="dropdown float-left">
<button type="button" class="btn btn-link dropdown-toggle btn-icon" data-toggle="dropdown"> <button type="button" class="btn btn-link dropdown-toggle btn-icon" data-toggle="dropdown">
<i class="tim-icons icon-settings-gear-63"></i> <i class="tim-icons icon-settings-gear-63"></i>
</button> </button>
@ -110,16 +111,12 @@
</card> </card>
</div> </div>
<div class="col-lg-6 col-md-12"> <div class="col-lg-6 col-md-12">
<div class="card "> <card class="text-right">
<div class="card-header"> <h4 slot="header" class="card-title"> Simple Table</h4>
<h4 class="card-title"> Simple Table</h4>
</div>
<div class="card-body">
<div class="table-responsive"> <div class="table-responsive">
<user-table></user-table> <user-table></user-table>
</div> </div>
</div> </card>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -247,6 +244,9 @@
mounted() { mounted() {
this.$rtl.enableRTL(); this.$rtl.enableRTL();
this.initBigChart(0); this.initBigChart(0);
},
beforeDestroy() {
this.$rtl.disableRTL();
} }
}; };
</script> </script>

4
src/plugins/RTLPlugin.js
View File

@ -17,8 +17,8 @@ export default {
}, },
disableRTL() { disableRTL() {
this.isRTL = false; this.isRTL = false;
this.getDocClasses().add('rtl'); this.getDocClasses().remove('rtl');
this.getDocClasses().add('menu-on-right'); this.getDocClasses().remove('menu-on-right');
} }
} }
}); });

10
yarn.lock
View File

@ -1393,6 +1393,16 @@ boom@5.x.x:
dependencies: dependencies:
hoek "4.x.x" hoek "4.x.x"
bootstrap-rtl@^3.3.4:
version "3.3.4"
resolved "https://registry.yarnpkg.com/bootstrap-rtl/-/bootstrap-rtl-3.3.4.tgz#4f813e6fce91aa9f47ad47f48172355af61c1b11"
dependencies:
bootstrap "^3.3.4"
bootstrap@^3.3.4:
version "3.3.7"
resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-3.3.7.tgz#5a389394549f23330875a3b150656574f8a9eb71"
bootstrap@^4.0.0: bootstrap@^4.0.0:
version "4.0.0" version "4.0.0"
resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.0.0.tgz#ceb03842c145fcc1b9b4e15da2a05656ba68469a" resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.0.0.tgz#ceb03842c145fcc1b9b4e15da2a05656ba68469a"