Merge pull request #22317 from nextcloud/bugfix/noid/status_ellipsis

Change color of displayname and ellipsis status message
This commit is contained in:
Georg Ehrke 2020-08-21 14:52:11 +02:00 committed by GitHub
commit e212862773
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 15 additions and 6 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -31,7 +31,8 @@
<Actions <Actions
id="user-status-menu-item__subheader" id="user-status-menu-item__subheader"
:default-icon="statusIcon" :default-icon="statusIcon"
:menu-title="visibleMessage"> :menu-title="visibleMessage"
:title="visibleMessage">
<ActionButton <ActionButton
v-for="status in statuses" v-for="status in statuses"
:key="status.type" :key="status.type"
@ -244,15 +245,18 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
$max-width-user-status: 200px;
li:not(.inline) #user-status-menu-item { li:not(.inline) #user-status-menu-item {
&__header { &__header {
display: block; display: block;
color: var(--color-main-text); box-sizing: border-box;
color: var(--color-text-maxcontrast);
padding: 10px 12px 5px 38px; padding: 10px 12px 5px 38px;
opacity: 1; opacity: 1;
white-space: nowrap; white-space: nowrap;
text-align: left; text-align: left;
max-width: 150px; max-width: $max-width-user-status;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
@ -261,6 +265,8 @@ li:not(.inline) #user-status-menu-item {
width: 100%; width: 100%;
> button { > button {
display: block;
box-sizing: border-box;
background-color: var(--color-main-background); background-color: var(--color-main-background);
background-position: 12px center; background-position: 12px center;
background-size: 16px; background-size: 16px;
@ -269,6 +275,9 @@ li:not(.inline) #user-status-menu-item {
font-weight: normal; font-weight: normal;
padding-left: 38px; padding-left: 38px;
opacity: 1; opacity: 1;
max-width: $max-width-user-status;
overflow: hidden;
text-overflow: ellipsis;
&:hover, &:hover,
&:focus { &:focus {