Skip to content

More design work & clean up to reduce possible height of room details #562

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
jancborchardt wants to merge 9 commits into from
Closed

More design work & clean up to reduce possible height of room details #562

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
26feb0f
Adjust room name styles to ellipsize and prevent jumping on edit
jancborchardt Jan 10, 2018
881fc12
Fix close icon padding and hover/focus
jancborchardt Jan 10, 2018
f14c4c2
Use variables for border-color
jancborchardt Jan 10, 2018
57375f7
Reduce margin-bottom of participants tab form
jancborchardt Jan 10, 2018
41d4872
Put join call and share link next to each other
jancborchardt Jan 10, 2018
cff87ee
Less default opacity for close icon to separate it from content
jancborchardt Jan 10, 2018
1ebce24
Prevent join call button from growing over 50%
jancborchardt Jan 10, 2018
2bb1b47
Limit bigger text input styles to room name
jancborchardt Jan 10, 2018
fdc5907
Align copy link button for non-moderators
jancborchardt Jan 10, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
106 changes: 88 additions & 18 deletions css/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,12 +16,13 @@
position: absolute;
width: 249px;
top: 0;
border-bottom: 1px solid #eee;
border-bottom: 1px solid $color-border;
}

.oca-spreedme-add-person {
width: 100%;
border: 1px solid #eee;
border: 1px solid $color-border;
border-radius: $border-radius;
}

/**
Expand Down Expand Up @@ -126,9 +127,9 @@
background-color: transparent;
border: none;
position: absolute;
right: 0;
bottom: 3px;
padding: 16px;
right: -6px;
top: -5px;
padding: 22px;
opacity: .5;
}
.icon-confirm.password-confirm:hover,
Expand Down Expand Up @@ -735,13 +736,15 @@ video {
position: absolute;
top: 0;
right: 0;
/* The app uses border-box sizing, so the padding is 15px like in the Files
* app plus 8px of half the size of the icon */
padding: 23px;
opacity: 0.5;
padding: 22px;
opacity: .3;
/* Higher index than the trigger to hide it when the sidebar is open */
z-index: 20;
}
#app-sidebar .close:hover,
#app-sidebar .close:focus {
opacity: 1;
}

#videos .videoContainer.speaking:not(.videoView) .nameIndicator,
#videos .videoContainer.videoView.speaking .nameIndicator .icon-audio {
Expand Down Expand Up @@ -905,44 +908,111 @@ video {

.detailCallInfoContainer .room-name {
display: inline-block;
width: calc(100% - 73px); /* 44px rename/copy + 44px close - 15px padding */
}

.detailCallInfoContainer h3,
.detailCallInfoContainer .guest-name p {
.detailCallInfoContainer h3 {
display: inline-block;
width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}

.detailCallInfoContainer .guest-name {
.label {
display: inline-block;
padding: 9px 0;
}

.edit-button {
height: 0;
}
}

.detailCallInfoContainer .container-call-link {
display: flex;
}
.detailCallInfoContainer .container-call,
.detailCallInfoContainer .container-link {
flex-grow: 1;
flex-basis: 50%;
}
.detailCallInfoContainer .container-call {
flex-grow: 0;
}

.detailCallInfoContainer .guest-name p {
padding: 9px 0;
.detailCallInfoContainer .join-call,
.detailCallInfoContainer .leaveCall {
width: calc(100% - 12px);
}


.detailCallInfoContainer .editable-text-label .edit-button {
display: none;
}

.detailCallInfoContainer .clipboard-button,
.detailCallInfoContainer .editable-text-label:hover .edit-button {
display: inline-block;
vertical-align: top;
}

.detailCallInfoContainer .clipboard-button .icon,
.detailCallInfoContainer .editable-text-label .edit-button .icon {
cursor: pointer;
padding: 22px;
vertical-align: middle;
margin-left: -5px;
margin-top: -5px;
opacity: .5;
}

.detailCallInfoContainer .editable-text-label .input-wrapper,
.detailCallInfoContainer .password-option {
.detailCallInfoContainer .clipboard-button .icon:hover,
.detailCallInfoContainer .clipboard-button .icon:focus,
.detailCallInfoContainer .editable-text-label .edit-button .icon:hover,
.detailCallInfoContainer .editable-text-label .edit-button .icon:focus {
opacity: 1;
}

.detailCallInfoContainer .clipboard-button .icon {
vertical-align: middle;
}

.detailCallInfoContainer .editable-text-label .input-wrapper {
position: relative;
display: inline-block;
width: 100%;
}

.detailCallInfoContainer .password-option {
position: relative;
}

.detailCallInfoContainer .editable-text-label input,
.detailCallInfoContainer .password-input {
width: 100%;
padding-right: 38px; /* 44px for submit button - 6px neg. margin overhang */
text-overflow: ellipsis;
}

/* Fit to h3 and prevent jumping. TODO: convert HTML to be flexbox-capable */
.detailCallInfoContainer .editable-text-label.room-name {
.edit-button {
position: absolute;
right: 44px;
top: 16px;
}

input {
width: calc(100% + 44px);
margin: 3px 0 10px !important;
font-size: 15px;
font-weight: 300;

+ .icon-confirm.confirm-button {
top: 0;
right: -47px;
}
}
}

.detailCallInfoContainer #link-checkbox+label {
Expand Down Expand Up @@ -1065,7 +1135,7 @@ video {
* below the new message input.
*/
#app-sidebar #participantsTabView form {
margin-bottom: 15px;
margin-bottom: 10px;
}

/**
Expand Down
12 changes: 7 additions & 5 deletions js/views/callinfoview.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,17 +36,18 @@
'{{#if isGuest}}' +
' <div class="guest-name"></div>' +
'{{/if}}' +
' <div class="container-call-link">' +
'{{#if participantInCall}}' +
' <div>' +
' <div class="container-call">' +
' <button class="leave-call primary">' + t('spreed', 'Leave call') + '</button>' +
' </div>' +
'{{else}}' +
' <div>' +
' <div class="container-call">' +
' <button class="join-call primary">' + t('spreed', 'Join call') + '</button>' +
' </div>' +
'{{/if}}' +
'{{#if canModerate}}' +
' <div>' +
' <div class="container-link">' +
' <input name="link-checkbox" id="link-checkbox" class="checkbox link-checkbox" value="1" {{#if isPublic}} checked="checked"{{/if}} type="checkbox">' +
' <label for="link-checkbox">' + t('spreed', 'Share link') + '</label>' +
' {{#if isPublic}}' +
Expand All @@ -58,7 +59,8 @@
' </div>' +
' {{/if}}' +
' </div>' +
'{{/if}}';
'{{/if}}' +
'</div>';

var CallInfoView = Marionette.View.extend({

Expand Down Expand Up @@ -207,7 +209,7 @@
this.ui.clipboardButton.tooltip({
placement: 'bottom',
trigger: 'hover',
title: t('spreed', 'Copy')
title: t('spreed', 'Copy link')
});
this.initClipboard();
},
Expand Down