Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>tags/v14.0.0beta1
@@ -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%; | |||
} | |||
} | |||
} |
@@ -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' | |||
}) |