Updating to element-ui 2.0

parent 20893b35
......@@ -36,7 +36,7 @@
</el-button-group>
</div>
<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>
</div>
</div>
......@@ -105,7 +105,7 @@
v-if="scope.row.is_folder && canEditFolders">
<i class="fa fa-pencil"></i>
</el-button>
<delete-button :slot-scope="scope" :rows="data"></delete-button>
<delete-button :scope="scope" :rows="data"></delete-button>
</el-button-group>
</div>
</div>
......@@ -231,11 +231,11 @@
this.tableIsLoading = true;
this.queryServer({ order_by: event.prop, order: event.order });
},
performSearch(query) {
console.log(`searching:${query}`);
performSearch: _.debounce(function (query) {
console.log(`searching:${query.target.value}`);
this.tableIsLoading = true;
this.queryServer({ search: query });
},
this.queryServer({ search: query.target.value });
}, 300),
enterFolder(scope) {
this.tableIsLoading = true;
this.queryServer({ folder_id: scope.row.id });
......
<template>
<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-item label="To" :class="{'el-form-item is-error': form.errors.has('destinationFolder') }">
<el-select v-model="destinationFolder" placeholder="Select">
......@@ -17,7 +17,7 @@
v-text="form.errors.first('destinationFolder')"></div>
</el-form-item>
</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 type="warning" @click="onSubmit()">{{ trans('core.move') }}</el-button>
</span>
......
<template>
<div>
<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-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-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>
......@@ -12,10 +12,10 @@
v-text="form.errors.first('name')"></div>
</el-form-item>
</el-form>
<span slot-scope="footer" class="dialog-footer">
<el-button @click="closeDialog">{{ trans('core.button.cancel') }}</el-button>
<el-button type="primary" @click="onSubmit()">{{ trans('core.confirm') }}</el-button>
</span>
<span slot="footer" class="dialog-footer">
<el-button @click="closeDialog">{{ trans('core.button.cancel') }}</el-button>
<el-button type="primary" @click="onSubmit()">{{ trans('core.confirm') }}</el-button>
</span>
</el-dialog>
</div>
......
<template>
<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-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>
......@@ -8,7 +8,7 @@
v-text="form.errors.first('name')"></div>
</el-form-item>
</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 type="primary" @click="onSubmit()">{{ trans('core.confirm') }}</el-button>
</span>
......
......@@ -16,12 +16,12 @@
<el-dialog
:visible.sync="dialogVisible"
size="full"
fullscreen
:before-close="handleClose">
<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>
</span>
</el-dialog>
......
......@@ -8,7 +8,7 @@
:http-request="uploadFile"
:multiple="true"
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>
</template>
......
......@@ -17,7 +17,7 @@
<a class="btn btn-default btn-flat" @click.prevent="goToEdit(scope)"><i
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>
</template>
</el-table-column>
......
......@@ -23,7 +23,7 @@
<el-button type="primary">
{{ trans('core.table.actions') }}<i class="el-icon-caret-bottom el-icon--right"></i>
</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-offline">{{ trans('core.mark as offline') }}</el-dropdown-item>
</el-dropdown-menu>
......@@ -35,7 +35,7 @@
</router-link>
</div>
<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>
</div>
</div>
......@@ -54,7 +54,7 @@
</el-table-column>
<el-table-column :label="trans('pages.status')" width="100">
<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>
</el-table-column>
<el-table-column prop="id" label="Id" width="75" sortable="custom">
......@@ -79,7 +79,7 @@
<template slot-scope="scope">
<el-button-group>
<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>
</template>
</el-table-column>
......@@ -176,11 +176,11 @@
this.tableIsLoading = true;
this.queryServer({ order_by: event.prop, order: event.order });
},
performSearch(query) {
console.log(`searching:${query}`);
performSearch: _.debounce(function (query) {
console.log(`searching:${query.target.value}`);
this.tableIsLoading = true;
this.queryServer({ search: query });
},
this.queryServer({ search: query.target.value });
}, 300),
handleExtraActions(action) {
const pageIds = _.map(this.selectedPages, elem => elem.id);
axios.get(route('api.page.page.mark-status', { action, pageIds: JSON.stringify(pageIds) }))
......
......@@ -27,7 +27,7 @@
</router-link>
</div>
<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>
</div>
</div>
......@@ -63,7 +63,7 @@
<el-button-group>
<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>
</template>
</el-table-column>
......@@ -151,11 +151,11 @@
this.tableIsLoading = true;
this.queryServer({ order_by: event.prop, order: event.order });
},
performSearch(query) {
console.log(`searching:${query}`);
performSearch: _.debounce(function (query) {
console.log(`searching:${query.target.value}`);
this.tableIsLoading = true;
this.queryServer({ search: query });
},
this.queryServer({ search: query.target.value });
}, 300),
goToEdit(scope) {
this.$router.push({ name: 'admin.user.roles.edit', params: { roleId: scope.row.id } });
},
......
......@@ -27,7 +27,7 @@
</router-link>
</div>
<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>
</div>
</div>
......@@ -70,7 +70,7 @@
<el-button-group>
<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>
</template>
</el-table-column>
......@@ -158,11 +158,11 @@
this.tableIsLoading = true;
this.queryServer({ order_by: event.prop, order: event.order });
},
performSearch(query) {
console.log(`searching:${query}`);
performSearch: _.debounce(function (query) {
console.log(`searching:${query.target.value}`);
this.tableIsLoading = true;
this.queryServer({ search: query });
},
this.queryServer({ search: query.target.value });
}, 300),
goToEdit(scope) {
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 source diff could not be displayed because it is too large. You can view the blob instead.
// Element UI
@import "~element-ui/lib/theme-default/index.css";
@import "~element-ui/lib/theme-chalk/index.css";
$fa-font-path: "~font-awesome/fonts";
$fa-css-prefix: el-icon-fa;
@import "~font-awesome/scss/font-awesome";
[class^="el-icon-fa"], [class*=" el-icon-fa"] {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome!important;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
};
.el-form-item__label {
line-height: normal;
}
.el-table td, .el-table th {
padding: 5px 0;
}
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