зеркало из https://github.com/nextcloud/spreed.git
Generalize ParticipantView CSS rules
Instead of being based on the "participantTabView" id the CSS rules used by the ParticipantView were modified to be based on its class, "participantWithList". This will make possible to change the parent element of the ParticipantView and keep its style. The rules for links were merged as those links that required a padding due to being shown with an icon were also those shown inside the list items. Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
This commit is contained in:
Родитель
bfc9066137
Коммит
2f25d8abe8
|
@ -63,7 +63,7 @@
|
||||||
display: block !important;
|
display: block !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
#participantTabView .avatar,
|
.participantWithList .avatar,
|
||||||
#app-navigation .avatar,
|
#app-navigation .avatar,
|
||||||
#app-navigation .icon-contacts-dark,
|
#app-navigation .icon-contacts-dark,
|
||||||
#app-navigation .app-navigation-entry-link .icon-public {
|
#app-navigation .app-navigation-entry-link .icon-public {
|
||||||
|
@ -72,7 +72,7 @@
|
||||||
top: 6px;
|
top: 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#participantTabView li > a:first-child img,
|
.participantWithList li > a:first-child img,
|
||||||
#app-navigation li > a:first-child img {
|
#app-navigation li > a:first-child img {
|
||||||
width: 32px !important;
|
width: 32px !important;
|
||||||
height: 32px !important;
|
height: 32px !important;
|
||||||
|
@ -501,7 +501,7 @@ video {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
#participantTabView li > a,
|
.participantWithList li > a,
|
||||||
#app-navigation li > a {
|
#app-navigation li > a {
|
||||||
padding-right: 44px !important;
|
padding-right: 44px !important;
|
||||||
}
|
}
|
||||||
|
@ -692,39 +692,35 @@ video {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
#participantTabView .participant-moderator-indicator {
|
.participantWithList .participant-moderator-indicator {
|
||||||
opacity: .5;
|
opacity: .5;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
padding-left: 5px;
|
padding-left: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#participantTabView .participant-offline > a {
|
.participantWithList .participant-offline > a {
|
||||||
opacity: .5;
|
opacity: .5;
|
||||||
}
|
}
|
||||||
|
|
||||||
#participantTabView li {
|
.participantWithList li {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
#participantTabView .with-icon a, #participantTabView a {
|
.participantWithList li > a {
|
||||||
padding-left: 44px;
|
|
||||||
background-size: 16px 16px;
|
|
||||||
background-position: 14px center;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
}
|
|
||||||
|
|
||||||
#participantTabView li > a {
|
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
line-height: 44px;
|
line-height: 44px;
|
||||||
min-height: 44px;
|
min-height: 44px;
|
||||||
padding: 0 12px;
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
|
padding-left: 44px;
|
||||||
|
background-size: 16px 16px;
|
||||||
|
background-position: 14px center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@ -732,25 +728,25 @@ video {
|
||||||
/**
|
/**
|
||||||
* App navigation utils, buttons and counters for drop down menu
|
* App navigation utils, buttons and counters for drop down menu
|
||||||
*/
|
*/
|
||||||
#participantTabView .participant-entry-utils {
|
.participantWithList .participant-entry-utils {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
z-index: 105;
|
z-index: 105;
|
||||||
}
|
}
|
||||||
|
|
||||||
#participantTabView .active > .participant-entry-utils li {
|
.participantWithList .active > .participant-entry-utils li {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
#participantTabView .participant-entry-utils button {
|
.participantWithList .participant-entry-utils button {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
#participantTabView .participant-entry-utils-menu-button button {
|
.participantWithList .participant-entry-utils-menu-button button {
|
||||||
border: 0;
|
border: 0;
|
||||||
opacity: .5;
|
opacity: .5;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
|
|
|
@ -73,6 +73,7 @@
|
||||||
|
|
||||||
OCA.SpreedMe.Views.ParticipantView = Marionette.CollectionView.extend({
|
OCA.SpreedMe.Views.ParticipantView = Marionette.CollectionView.extend({
|
||||||
tagName: 'ul',
|
tagName: 'ul',
|
||||||
|
className: 'participantWithList',
|
||||||
childView: Marionette.View.extend({
|
childView: Marionette.View.extend({
|
||||||
tagName: 'li',
|
tagName: 'li',
|
||||||
modelEvents: {
|
modelEvents: {
|
||||||
|
|
Загрузка…
Ссылка в новой задаче