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 diff is collapsed.
// 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