Updating to element-ui 2.0

parent 20893b35
...@@ -36,7 +36,7 @@ ...@@ -36,7 +36,7 @@
</el-button-group> </el-button-group>
</div> </div>
<div class="search el-col el-col-5"> <div class="search el-col el-col-5">
<el-input icon="search" @change="performSearch" v-model="searchQuery"> <el-input prefix-icon="el-icon-search" @keyup.native="performSearch" v-model="searchQuery">
</el-input> </el-input>
</div> </div>
</div> </div>
...@@ -105,7 +105,7 @@ ...@@ -105,7 +105,7 @@
v-if="scope.row.is_folder && canEditFolders"> v-if="scope.row.is_folder && canEditFolders">
<i class="fa fa-pencil"></i> <i class="fa fa-pencil"></i>
</el-button> </el-button>
<delete-button :slot-scope="scope" :rows="data"></delete-button> <delete-button :scope="scope" :rows="data"></delete-button>
</el-button-group> </el-button-group>
</div> </div>
</div> </div>
...@@ -231,11 +231,11 @@ ...@@ -231,11 +231,11 @@
this.tableIsLoading = true; this.tableIsLoading = true;
this.queryServer({ order_by: event.prop, order: event.order }); this.queryServer({ order_by: event.prop, order: event.order });
}, },
performSearch(query) { performSearch: _.debounce(function (query) {
console.log(`searching:${query}`); console.log(`searching:${query.target.value}`);
this.tableIsLoading = true; this.tableIsLoading = true;
this.queryServer({ search: query }); this.queryServer({ search: query.target.value });
}, }, 300),
enterFolder(scope) { enterFolder(scope) {
this.tableIsLoading = true; this.tableIsLoading = true;
this.queryServer({ folder_id: scope.row.id }); this.queryServer({ folder_id: scope.row.id });
......
<template> <template>
<div> <div>
<el-dialog title="Move Media" :visible.sync="dialogFormVisible" size="tiny" class="move-media-dialog" @open="fetchFolders"> <el-dialog title="Move Media" :visible.sync="dialogFormVisible" width="30%" class="move-media-dialog" @open="fetchFolders">
<el-form v-loading.body="loading" @submit.native.prevent="onSubmit()"> <el-form v-loading.body="loading" @submit.native.prevent="onSubmit()">
<el-form-item label="To" :class="{'el-form-item is-error': form.errors.has('destinationFolder') }"> <el-form-item label="To" :class="{'el-form-item is-error': form.errors.has('destinationFolder') }">
<el-select v-model="destinationFolder" placeholder="Select"> <el-select v-model="destinationFolder" placeholder="Select">
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
v-text="form.errors.first('destinationFolder')"></div> v-text="form.errors.first('destinationFolder')"></div>
</el-form-item> </el-form-item>
</el-form> </el-form>
<span slot-scope="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
<el-button @click="closeDialog">{{ trans('core.button.cancel') }}</el-button> <el-button @click="closeDialog">{{ trans('core.button.cancel') }}</el-button>
<el-button type="warning" @click="onSubmit()">{{ trans('core.move') }}</el-button> <el-button type="warning" @click="onSubmit()">{{ trans('core.move') }}</el-button>
</span> </span>
......
<template> <template>
<div> <div>
<el-button type="success" class="new-folder" @click="dialogFormVisible = true"> <el-button type="success" class="new-folder" @click="dialogFormVisible = true">
<i class="el-icon-fa-plus"></i> {{ trans('folders.create resource') }} <i class="fa fa-plus"></i> {{ trans('folders.create resource') }}
</el-button> </el-button>
<el-dialog :title="trans('folders.create resource')" :visible.sync="dialogFormVisible" size="tiny"> <el-dialog :title="trans('folders.create resource')" :visible.sync="dialogFormVisible" width="30%">
<el-form :model="folder" v-loading.body="loading" @submit.native.prevent="onSubmit()"> <el-form :model="folder" v-loading.body="loading" @submit.native.prevent="onSubmit()">
<el-form-item :label="trans('folders.folder name')" :class="{'el-form-item is-error': form.errors.has('name') }"> <el-form-item :label="trans('folders.folder name')" :class="{'el-form-item is-error': form.errors.has('name') }">
<el-input v-model="folder.name" auto-complete="off" autofocus></el-input> <el-input v-model="folder.name" auto-complete="off" autofocus></el-input>
...@@ -12,10 +12,10 @@ ...@@ -12,10 +12,10 @@
v-text="form.errors.first('name')"></div> v-text="form.errors.first('name')"></div>
</el-form-item> </el-form-item>
</el-form> </el-form>
<span slot-scope="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
<el-button @click="closeDialog">{{ trans('core.button.cancel') }}</el-button> <el-button @click="closeDialog">{{ trans('core.button.cancel') }}</el-button>
<el-button type="primary" @click="onSubmit()">{{ trans('core.confirm') }}</el-button> <el-button type="primary" @click="onSubmit()">{{ trans('core.confirm') }}</el-button>
</span> </span>
</el-dialog> </el-dialog>
</div> </div>
......
<template> <template>
<div> <div>
<el-dialog title="Rename Folder" :visible.sync="dialogFormVisible" size="tiny"> <el-dialog title="Rename Folder" :visible.sync="dialogFormVisible" width="30%">
<el-form :model="folder" v-loading.body="loading" @submit.native.prevent="onSubmit()"> <el-form :model="folder" v-loading.body="loading" @submit.native.prevent="onSubmit()">
<el-form-item label="Folder name" :class="{'el-form-item is-error': form.errors.has('name') }"> <el-form-item label="Folder name" :class="{'el-form-item is-error': form.errors.has('name') }">
<el-input v-model="folder.name" auto-complete="off" autofocus></el-input> <el-input v-model="folder.name" auto-complete="off" autofocus></el-input>
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
v-text="form.errors.first('name')"></div> v-text="form.errors.first('name')"></div>
</el-form-item> </el-form-item>
</el-form> </el-form>
<span slot-scope="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
<el-button @click="closeDialog">{{ trans('core.button.cancel') }}</el-button> <el-button @click="closeDialog">{{ trans('core.button.cancel') }}</el-button>
<el-button type="primary" @click="onSubmit()">{{ trans('core.confirm') }}</el-button> <el-button type="primary" @click="onSubmit()">{{ trans('core.confirm') }}</el-button>
</span> </span>
......
...@@ -16,12 +16,12 @@ ...@@ -16,12 +16,12 @@
<el-dialog <el-dialog
:visible.sync="dialogVisible" :visible.sync="dialogVisible"
size="full" fullscreen
:before-close="handleClose"> :before-close="handleClose">
<media-list single-modal :event-name="this.eventName"></media-list> <media-list single-modal :event-name="this.eventName"></media-list>
<span slot-scope="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">{{ trans('core.button.cancel') }}</el-button> <el-button @click="dialogVisible = false">{{ trans('core.button.cancel') }}</el-button>
</span> </span>
</el-dialog> </el-dialog>
......
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
:http-request="uploadFile" :http-request="uploadFile"
:multiple="true" :multiple="true"
style="display: inline-block; margin-right: 10px;"> style="display: inline-block; margin-right: 10px;">
<el-button size="small" type="primary" style="padding: 11px 9px;" :loading="fileIsUploading">{{ trans('media.upload file') }}</el-button> <el-button size="small" type="primary" style="padding: 13px 9px;" :loading="fileIsUploading">{{ trans('media.upload file') }}</el-button>
</el-upload> </el-upload>
</template> </template>
......
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
<a class="btn btn-default btn-flat" @click.prevent="goToEdit(scope)"><i <a class="btn btn-default btn-flat" @click.prevent="goToEdit(scope)"><i
class="fa fa-pencil"></i></a> class="fa fa-pencil"></i></a>
<delete-button :slot-scope="scope" :rows="data" :translations="translations"> <delete-button :scope="scope" :rows="data" :translations="translations">
</delete-button> </delete-button>
</template> </template>
</el-table-column> </el-table-column>
......
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
<el-button type="primary"> <el-button type="primary">
{{ trans('core.table.actions') }}<i class="el-icon-caret-bottom el-icon--right"></i> {{ trans('core.table.actions') }}<i class="el-icon-caret-bottom el-icon--right"></i>
</el-button> </el-button>
<el-dropdown-menu slot-slot-scope="dropdown"> <el-dropdown-menu slot="dropdown">
<el-dropdown-item command="mark-online">{{ trans('core.mark as online') }}</el-dropdown-item> <el-dropdown-item command="mark-online">{{ trans('core.mark as online') }}</el-dropdown-item>
<el-dropdown-item command="mark-offline">{{ trans('core.mark as offline') }}</el-dropdown-item> <el-dropdown-item command="mark-offline">{{ trans('core.mark as offline') }}</el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
...@@ -35,7 +35,7 @@ ...@@ -35,7 +35,7 @@
</router-link> </router-link>
</div> </div>
<div class="search el-col el-col-5"> <div class="search el-col el-col-5">
<el-input icon="search" @change="performSearch" v-model="searchQuery"> <el-input prefix-icon="el-icon-search" @keyup.native="performSearch" v-model="searchQuery">
</el-input> </el-input>
</div> </div>
</div> </div>
...@@ -54,7 +54,7 @@ ...@@ -54,7 +54,7 @@
</el-table-column> </el-table-column>
<el-table-column :label="trans('pages.status')" width="100"> <el-table-column :label="trans('pages.status')" width="100">
<template slot-scope="scope"> <template slot-scope="scope">
<i class="el-icon-fa-circle" :class="(scope.row.translations.status === true) ? 'text-success':'text-danger'"></i> <i class="fa fa-circle" :class="(scope.row.translations.status === true) ? 'text-success':'text-danger'"></i>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="id" label="Id" width="75" sortable="custom"> <el-table-column prop="id" label="Id" width="75" sortable="custom">
...@@ -79,7 +79,7 @@ ...@@ -79,7 +79,7 @@
<template slot-scope="scope"> <template slot-scope="scope">
<el-button-group> <el-button-group>
<edit-button :to="{name: 'admin.page.page.edit', params: {pageId: scope.row.id}}"></edit-button> <edit-button :to="{name: 'admin.page.page.edit', params: {pageId: scope.row.id}}"></edit-button>
<delete-button :slot-scope="scope" :rows="data"></delete-button> <delete-button :scope="scope" :rows="data"></delete-button>
</el-button-group> </el-button-group>
</template> </template>
</el-table-column> </el-table-column>
...@@ -176,11 +176,11 @@ ...@@ -176,11 +176,11 @@
this.tableIsLoading = true; this.tableIsLoading = true;
this.queryServer({ order_by: event.prop, order: event.order }); this.queryServer({ order_by: event.prop, order: event.order });
}, },
performSearch(query) { performSearch: _.debounce(function (query) {
console.log(`searching:${query}`); console.log(`searching:${query.target.value}`);
this.tableIsLoading = true; this.tableIsLoading = true;
this.queryServer({ search: query }); this.queryServer({ search: query.target.value });
}, }, 300),
handleExtraActions(action) { handleExtraActions(action) {
const pageIds = _.map(this.selectedPages, elem => elem.id); const pageIds = _.map(this.selectedPages, elem => elem.id);
axios.get(route('api.page.page.mark-status', { action, pageIds: JSON.stringify(pageIds) })) axios.get(route('api.page.page.mark-status', { action, pageIds: JSON.stringify(pageIds) }))
......
...@@ -27,7 +27,7 @@ ...@@ -27,7 +27,7 @@
</router-link> </router-link>
</div> </div>
<div class="search el-col el-col-5"> <div class="search el-col el-col-5">
<el-input icon="search" @change="performSearch" v-model="searchQuery"> <el-input icon="search" @keyup.native="performSearch" v-model="searchQuery">
</el-input> </el-input>
</div> </div>
</div> </div>
...@@ -63,7 +63,7 @@ ...@@ -63,7 +63,7 @@
<el-button-group> <el-button-group>
<edit-button <edit-button
:to="{name: 'admin.user.roles.edit', params: {roleId: scope.row.id}}"></edit-button> :to="{name: 'admin.user.roles.edit', params: {roleId: scope.row.id}}"></edit-button>
<delete-button :slot-scope="scope" :rows="data"></delete-button> <delete-button :scope="scope" :rows="data"></delete-button>
</el-button-group> </el-button-group>
</template> </template>
</el-table-column> </el-table-column>
...@@ -151,11 +151,11 @@ ...@@ -151,11 +151,11 @@
this.tableIsLoading = true; this.tableIsLoading = true;
this.queryServer({ order_by: event.prop, order: event.order }); this.queryServer({ order_by: event.prop, order: event.order });
}, },
performSearch(query) { performSearch: _.debounce(function (query) {
console.log(`searching:${query}`); console.log(`searching:${query.target.value}`);
this.tableIsLoading = true; this.tableIsLoading = true;
this.queryServer({ search: query }); this.queryServer({ search: query.target.value });
}, }, 300),
goToEdit(scope) { goToEdit(scope) {
this.$router.push({ name: 'admin.user.roles.edit', params: { roleId: scope.row.id } }); this.$router.push({ name: 'admin.user.roles.edit', params: { roleId: scope.row.id } });
}, },
......
...@@ -27,7 +27,7 @@ ...@@ -27,7 +27,7 @@
</router-link> </router-link>
</div> </div>
<div class="search el-col el-col-5"> <div class="search el-col el-col-5">
<el-input icon="search" @change="performSearch" v-model="searchQuery"> <el-input icon="search" @keyup.native="performSearch" v-model="searchQuery">
</el-input> </el-input>
</div> </div>
</div> </div>
...@@ -70,7 +70,7 @@ ...@@ -70,7 +70,7 @@
<el-button-group> <el-button-group>
<edit-button <edit-button
:to="{name: 'admin.user.users.edit', params: {userId: scope.row.id}}"></edit-button> :to="{name: 'admin.user.users.edit', params: {userId: scope.row.id}}"></edit-button>
<delete-button :slot-scope="scope" :rows="data"></delete-button> <delete-button :scope="scope" :rows="data"></delete-button>
</el-button-group> </el-button-group>
</template> </template>
</el-table-column> </el-table-column>
...@@ -158,11 +158,11 @@ ...@@ -158,11 +158,11 @@
this.tableIsLoading = true; this.tableIsLoading = true;
this.queryServer({ order_by: event.prop, order: event.order }); this.queryServer({ order_by: event.prop, order: event.order });
}, },
performSearch(query) { performSearch: _.debounce(function (query) {
console.log(`searching:${query}`); console.log(`searching:${query.target.value}`);
this.tableIsLoading = true; this.tableIsLoading = true;
this.queryServer({ search: query }); this.queryServer({ search: query.target.value });
}, }, 300),
goToEdit(scope) { goToEdit(scope) {
this.$router.push({ name: 'admin.user.users.edit', params: { userId: scope.row.id } }); this.$router.push({ name: 'admin.user.users.edit', params: { userId: scope.row.id } });
}, },
......
This source diff could not be displayed because it is too large. You can view the blob instead.
This diff is collapsed.
// Element UI // Element UI
@import "~element-ui/lib/theme-default/index.css"; @import "~element-ui/lib/theme-chalk/index.css";
$fa-font-path: "~font-awesome/fonts"; .el-form-item__label {
$fa-css-prefix: el-icon-fa; line-height: normal;
@import "~font-awesome/scss/font-awesome"; }
[class^="el-icon-fa"], [class*=" el-icon-fa"] { .el-table td, .el-table th {
display: inline-block; padding: 5px 0;
font: normal normal normal 14px/1 FontAwesome!important; }
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
};
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment