Bump webpack, config, deps, fixes groups selects, improved design and added tooltip to groups +x indicator
Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
This commit is contained in:
John Molakvoæ (skjnldsv)
parent
746f3c9053
commit
38b1020f52
|
|
@ -626,8 +626,8 @@ input {
|
|||
margin: 1px 2px;
|
||||
padding: 0 !important;
|
||||
display: inline-block;
|
||||
min-width: 160px;
|
||||
width: 160px;
|
||||
/* min-width: 160px; */
|
||||
/* width: 160px; */
|
||||
position: relative;
|
||||
background-color: $color-main-background;
|
||||
&.multiselect--active {
|
||||
|
|
@ -642,6 +642,9 @@ input {
|
|||
background-color: nc-darken($color-main-background, 8%) !important;
|
||||
}
|
||||
.multiselect__tags {
|
||||
/* space between tags and limit tag */
|
||||
$space-between: 5px;
|
||||
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
overflow: hidden;
|
||||
|
|
@ -657,7 +660,8 @@ input {
|
|||
overflow: hidden;
|
||||
max-width: 100%;
|
||||
position: relative;
|
||||
padding: 3px 5px;
|
||||
padding: 3px $space-between;
|
||||
flex-grow: 1;
|
||||
/* no tags or simple select? Show input directly
|
||||
input is used to display single value */
|
||||
&:empty ~ input.multiselect__input {
|
||||
|
|
@ -669,7 +673,7 @@ input {
|
|||
}
|
||||
/* selected tag */
|
||||
.multiselect__tag {
|
||||
flex: 0 0 auto;
|
||||
flex: 1 0 calc(50% - 5px);;
|
||||
line-height: 20px;
|
||||
padding: 1px 5px;
|
||||
background-image: none;
|
||||
|
|
@ -677,8 +681,25 @@ input {
|
|||
border: 1px solid nc-darken($color-main-background, 14%);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
border-radius: 3px;
|
||||
margin-right: 5px;
|
||||
border-radius: 3px;
|
||||
/* require to override the default width
|
||||
and force the tag to shring properly */
|
||||
min-width: 0;
|
||||
/* css hack, detect if more than two tags
|
||||
if so, flex-basis is set to half */
|
||||
&:only-child {
|
||||
flex: 0 1 auto;
|
||||
}
|
||||
&:not(:last-child) {
|
||||
margin-right: $space-between;
|
||||
}
|
||||
/* ellipsis the groups to be sure
|
||||
we display at least two of them */
|
||||
> span {
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* Single select default value */
|
||||
|
|
@ -690,13 +711,17 @@ input {
|
|||
cursor: pointer;
|
||||
}
|
||||
/* displayed text if tag limit reached */
|
||||
.multiselect__strong {
|
||||
.multiselect__strong,
|
||||
.multiselect__limit {
|
||||
flex: 0 0 auto;
|
||||
line-height: 20px;
|
||||
color: nc-lighten($color-main-text, 33%);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
opacity: .7;
|
||||
opacity: .7;
|
||||
margin-right: $space-between;
|
||||
/* above the input */
|
||||
z-index: 5;
|
||||
}
|
||||
/* default multiselect input for search and placeholder */
|
||||
input.multiselect__input {
|
||||
|
|
|
|||
|
|
@ -75,8 +75,9 @@ ul.multiselectoptions {
|
|||
}
|
||||
}
|
||||
|
||||
div.multiselect,
|
||||
select.multiselect {
|
||||
/* TODO drop old legacy multiselect! */
|
||||
div.multiselect:not(.multiselect-vue),
|
||||
select.multiselect:not(.multiselect-vue) {
|
||||
display: inline-block;
|
||||
max-width: 200px;
|
||||
min-width: 150px !important;
|
||||
|
|
|
|||
|
|
@ -1299,19 +1299,16 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
|
|||
.password {
|
||||
width: 150px;
|
||||
}
|
||||
.mailAddress{
|
||||
.mailAddress,
|
||||
.groups,
|
||||
.subadmins {
|
||||
width: 200px;
|
||||
}
|
||||
.groups,
|
||||
.subadmins,
|
||||
.quota {
|
||||
width: 170px;
|
||||
width: 150px;
|
||||
}
|
||||
.languages {
|
||||
width: 200px;
|
||||
.multiselect {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.storageLocation {
|
||||
width: 250px;
|
||||
|
|
@ -1379,7 +1376,7 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
|
|||
}
|
||||
progress {
|
||||
position: absolute;
|
||||
width: 160px;
|
||||
width: calc(100% - 4px); /* minus left and right */
|
||||
left: 2px;
|
||||
bottom: 2px;
|
||||
height: 3px;
|
||||
|
|
@ -1415,24 +1412,9 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
|
|||
}
|
||||
}
|
||||
}
|
||||
.v-select {
|
||||
&.open .selected-tag-wrap {
|
||||
display: none;
|
||||
}
|
||||
.dropdown-toggle .selected-tag {
|
||||
padding-right: 5px;
|
||||
.close {
|
||||
/* no delete on tags*/
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.dropdown-menu li a .icon-add {
|
||||
position: absolute;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
opacity: .5;
|
||||
left: 7px;
|
||||
}
|
||||
/* Fill the grid cell */
|
||||
.multiselect.multiselect-vue {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
|
|
@ -6,17 +6,17 @@
|
|||
"license": "AGPL3",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "cross-env NODE_ENV=development webpack",
|
||||
"watch": "cross-env NODE_ENV=development webpack --progress --watch",
|
||||
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
|
||||
"dev": "webpack --config webpack.dev.js",
|
||||
"watch": "webpack --progress --watch --config webpack.dev.js",
|
||||
"build": "webpack --progress --hide-modules --config webpack.prod.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^0.18.0",
|
||||
"babel-polyfill": "^6.26.0",
|
||||
"v-tooltip": "^2.0.0-rc.31",
|
||||
"vue": "^2.5.11",
|
||||
"v-tooltip": "^2.0.0-rc.32",
|
||||
"vue": "^2.5.16",
|
||||
"vue-click-outside": "^1.0.7",
|
||||
"vue-infinite-loading": "^2.2.3",
|
||||
"vue-infinite-loading": "^2.3.1",
|
||||
"vue-localstorage": "^0.6.2",
|
||||
"vue-multiselect": "^2.1.0",
|
||||
"vue-router": "^3.0.1",
|
||||
|
|
@ -28,17 +28,18 @@
|
|||
"ie >= 11"
|
||||
],
|
||||
"devDependencies": {
|
||||
"babel-core": "^6.26.0",
|
||||
"babel-loader": "^7.1.2",
|
||||
"babel-preset-env": "^1.6.0",
|
||||
"babel-core": "^6.26.3",
|
||||
"babel-loader": "^7.1.4",
|
||||
"babel-preset-env": "^1.7.0",
|
||||
"babel-preset-stage-3": "^6.24.1",
|
||||
"cross-env": "^5.0.5",
|
||||
"css-loader": "^0.28.7",
|
||||
"file-loader": "^1.1.4",
|
||||
"node-sass": "^4.5.3",
|
||||
"sass-loader": "^6.0.6",
|
||||
"vue-loader": "^13.0.5",
|
||||
"vue-template-compiler": "^2.4.4",
|
||||
"webpack": "^3.6.0"
|
||||
"css-loader": "^0.28.11",
|
||||
"file-loader": "^1.1.11",
|
||||
"node-sass": "^4.9.0",
|
||||
"sass-loader": "^7.0.1",
|
||||
"vue-loader": "^14.2.2",
|
||||
"vue-template-compiler": "^2.5.16",
|
||||
"webpack": "^4.8.3",
|
||||
"webpack-cli": "^2.1.3",
|
||||
"webpack-merge": "^4.1.2"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -32,20 +32,20 @@
|
|||
<div class="groups" :class="{'icon-loading-small': loading.groups}">
|
||||
<multiselect :value="userGroups" :options="groups" :disabled="loading.groups||loading.all"
|
||||
tag-placeholder="create" :placeholder="t('settings', 'Add user in group')"
|
||||
label="name" track-by="id" class="multiselect-vue"
|
||||
:limit="2" :limitText="limitGroups"
|
||||
label="name" track-by="id" class="multiselect-vue" :limit="2"
|
||||
:multiple="true" :taggable="settings.isAdmin" :closeOnSelect="false"
|
||||
@tag="createGroup" @select="addUserGroup" @remove="removeUserGroup">
|
||||
<span slot="limit" class="multiselect__limit" v-tooltip.auto="formatGroupsTitle(userGroups)">+{{userGroups.length-2}}</span>
|
||||
<span slot="noResult">{{t('settings', 'No results')}}</span>
|
||||
</multiselect>
|
||||
</div>
|
||||
<div class="subadmins" v-if="subAdminsGroups.length>0 && settings.isAdmin" :class="{'icon-loading-small': loading.subadmins}">
|
||||
<multiselect :value="userSubAdminsGroups" :options="subAdminsGroups" :disabled="loading.subadmins||loading.all"
|
||||
:placeholder="t('settings', 'Set user as admin for')"
|
||||
label="name" track-by="id" class="multiselect-vue"
|
||||
:limit="2" :limitText="limitGroups"
|
||||
label="name" track-by="id" class="multiselect-vue" :limit="2"
|
||||
:multiple="true" :closeOnSelect="false"
|
||||
@select="addUserSubAdmin" @remove="removeUserSubAdmin">
|
||||
<span slot="limit" class="multiselect__limit" v-tooltip.auto="formatGroupsTitle(userSubAdminsGroups)">+{{userSubAdminsGroups.length-2}}</span>
|
||||
<span slot="noResult">{{t('settings', 'No results')}}</span>
|
||||
</multiselect>
|
||||
</div>
|
||||
|
|
@ -222,15 +222,14 @@ export default {
|
|||
);
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* Format the limit text in the selected options
|
||||
* Format array of groups objects to a string for the popup
|
||||
*
|
||||
* @param {int} count elements left
|
||||
* @param {array} groups The groups
|
||||
* @returns {string}
|
||||
*/
|
||||
limitGroups(count) {
|
||||
return '+'+count;
|
||||
formatGroupsTitle(groups) {
|
||||
return groups.map(group => group.name).join(', ');
|
||||
},
|
||||
|
||||
deleteUser() {
|
||||
|
|
|
|||
|
|
@ -1,12 +1,11 @@
|
|||
var path = require('path')
|
||||
var webpack = require('webpack')
|
||||
const path = require('path')
|
||||
|
||||
module.exports = {
|
||||
entry: './src/main.js',
|
||||
output: {
|
||||
path: path.resolve(__dirname, './js'),
|
||||
path: path.resolve(__dirname, './dist'),
|
||||
publicPath: '/dist/',
|
||||
filename: 'main.js'
|
||||
filename: 'build.js'
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
|
|
@ -74,35 +73,5 @@ module.exports = {
|
|||
'vue$': 'vue/dist/vue.esm.js'
|
||||
},
|
||||
extensions: ['*', '.js', '.vue', '.json']
|
||||
},
|
||||
devServer: {
|
||||
historyApiFallback: true,
|
||||
noInfo: true,
|
||||
overlay: true
|
||||
},
|
||||
performance: {
|
||||
hints: false
|
||||
},
|
||||
devtool: '#eval-source-map'
|
||||
}
|
||||
|
||||
if (process.env.NODE_ENV === 'production') {
|
||||
module.exports.devtool = '#source-map'
|
||||
// http://vue-loader.vuejs.org/en/workflow/production.html
|
||||
module.exports.plugins = (module.exports.plugins || []).concat([
|
||||
new webpack.DefinePlugin({
|
||||
'process.env': {
|
||||
NODE_ENV: '"production"'
|
||||
}
|
||||
}),
|
||||
new webpack.optimize.UglifyJsPlugin({
|
||||
sourceMap: true,
|
||||
compress: {
|
||||
warnings: false
|
||||
}
|
||||
}),
|
||||
new webpack.LoaderOptionsPlugin({
|
||||
minimize: true
|
||||
})
|
||||
])
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
const merge = require('webpack-merge');
|
||||
const common = require('./webpack.common.js');
|
||||
|
||||
module.exports = merge(common, {
|
||||
mode: 'development',
|
||||
devServer: {
|
||||
historyApiFallback: true,
|
||||
noInfo: true,
|
||||
overlay: true
|
||||
},
|
||||
devtool: '#eval-source-map',
|
||||
})
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
const merge = require('webpack-merge')
|
||||
const common = require('./webpack.common.js')
|
||||
|
||||
module.exports = merge(common, {
|
||||
mode: 'production',
|
||||
devtool: '#source-map'
|
||||
})
|
||||
Loading…
Reference in New Issue