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:
Daniel Calviño Sánchez 2017-10-13 06:22:38 +02:00
Родитель bfc9066137
Коммит 2f25d8abe8
2 изменённых файлов: 16 добавлений и 19 удалений

Просмотреть файл

@ -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: {