pimhwang
/
spreed-webrtc
mirror of https://github.com/strukturag/spreed-webrtc.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Refactored status bar to be outside of header bar for better flexibility.

pull/75/head
Simon Eisenmann 11 years ago
parent
8dfb0838d6
commit
8775e09a3b
11 changed files with 42 additions and 100 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 26
      html/main.html
  2. 4
      src/styles/components/_audiolevel.scss
  3. 3
      src/styles/components/_audiovideo.scss
  4. 76
      src/styles/components/_bar.scss
  5. 3
      src/styles/components/_buddylist.scss
  6. 3
      src/styles/components/_chat.scss
  7. 3
      src/styles/components/_settings.scss
  8. 3
      src/styles/global/_pages.scss
  9. 18
      src/styles/global/_variables.scss
  10. 1
      src/styles/global/_views.scss
  11. 2
      static/css/main.min.css

26
html/main.html
Unescape View File

@ -7,7 +7,6 @@
<div id="background"></div> <div id="background"></div>
<div id="loader"><div><i class="fa fa-circle-o-notch fa-spin"></i><div class="loader-message"></div></div></div> <div id="loader"><div><i class="fa fa-circle-o-notch fa-spin"></i><div class="loader-message"></div></div></div>
<page></page> <page></page>
<div class="navbar navbar-default navbar-fixed-top bar"> <div class="navbar navbar-default navbar-fixed-top bar">
<div class="container-fluid"> <div class="container-fluid">
<div class="navbar-header"> <div class="navbar-header">
@ -19,26 +18,23 @@
<div class="navbar-brand left"> <div class="navbar-brand left">
<%template "logo" .%> <%template "logo" .%>
</div> </div>
<div class="nav navbar-nav middle visible-xs">
<status-message></status-message>
</div>
</div> </div>
<div class="navbar-collapse collapse" collapse="isCollapsed"> <div class="navbar-collapse collapse" collapse="isCollapsed">
<ul class="nav navbar-nav middle hidden-xs">
<status-message></status-message>
</ul>
<ul class="nav navbar-nav navbar-right right"> <ul class="nav navbar-nav navbar-right right">
<div class="ng-cloak"> <li class="ng-cloak">
<button title="{{_('Present a file')}}" class="btn aenablebtn" ng-show="status=='connected' || status=='conference' || layout.presentation" ng-model="layout.presentation" btn-checkbox><i class="fa fa-folder-open-o"></i></button> <button title="{{_('Present a file')}}" class="btn aenablebtn" ng-show="status=='connected' || status=='conference' || layout.presentation" ng-model="layout.presentation" btn-checkbox><i class="fa fa-folder-open-o"></i></button>
<button title="{{_('Share your screen')}}" class="btn aenablebtn" ng-show="isChrome && webrtcDetectedVersion >= 32 && (status=='connected' || status=='conference' || layout.screenshare)" ng-model="layout.screenshare" btn-checkbox><i class="fa fa-desktop"></i></button> <button title="{{_('Share your screen')}}" class="btn aenablebtn" ng-show="isChrome && webrtcDetectedVersion >= 32 && (status=='connected' || status=='conference' || layout.screenshare)" ng-model="layout.screenshare" btn-checkbox><i class="fa fa-desktop"></i></button>
<button title="{{_('Chat')}}" class="btn" ng-class="{messagesunseen: chatMessagesUnseen>0}" ng-model="layout.chat" btn-checkbox btn-checkbox-true="true" btn-checkbox-false="false"><i class="fa fa-comments-o"></i><span class="badge" ng-show="chatMessagesUnseen" ng-bind="chatMessagesUnseen"></span></button> <button title="{{_('Chat')}}" class="btn" ng-class="{messagesunseen: chatMessagesUnseen>0}" ng-model="layout.chat" btn-checkbox btn-checkbox-true="true" btn-checkbox-false="false"><i class="fa fa-comments-o"></i><span class="badge" ng-show="chatMessagesUnseen" ng-bind="chatMessagesUnseen"></span></button>
<button title="{{_('Mute microphone')}}" class="btn amutebtn" ng-model="microphoneMute" btn-checkbox btn-checkbox-true="true" btn-checkbox-false="false"><i class="fa fa-microphone-slash"></i></button> <button title="{{_('Mute microphone')}}" class="btn amutebtn" ng-model="microphoneMute" btn-checkbox btn-checkbox-true="true" btn-checkbox-false="false"><i class="fa fa-microphone-slash"></i></button>
<button title="{{_('Turn camera off')}}" class="btn amutebtn" ng-model="cameraMute" btn-checkbox btn-checkbox-true="true" btn-checkbox-false="false"><i class="fa fa-eye-slash"></i></button> <button title="{{_('Turn camera off')}}" class="btn amutebtn" ng-model="cameraMute" btn-checkbox btn-checkbox-true="true" btn-checkbox-false="false"><i class="fa fa-eye-slash"></i></button>
<button title="{{_('Settings')}}" class="btn" ng-model="layout.settings" btn-checkbox btn-checkbox-true="true" btn-checkbox-false="false"><i class="fa fa-cog"></i></button> <button title="{{_('Settings')}}" class="btn" ng-model="layout.settings" btn-checkbox btn-checkbox-true="true" btn-checkbox-false="false"><i class="fa fa-cog"></i></button>
</div> </li>
</ul> </ul>
</div> </div>
</div> </div>
<div class="callbar middle">
<status-message></status-message>
</div>
</div> </div>
<div id="roombar" class="ng-cloak"> <div id="roombar" class="ng-cloak">
<room-bar/> <room-bar/>

4
src/styles/components/_audiolevel.scss
Unescape View File

@ -27,10 +27,6 @@
top: $audiolevel-top; top: $audiolevel-top;
width: 400px; width: 400px;
z-index: 6; z-index: 6;
@include breakpt($breakpoint-medium) {
z-index: 60;
top: $mobile-audiolevel-top;
}
.audio-level { .audio-level {
background: $audiovideolevel; /* Old browsers */ background: $audiovideolevel; /* Old browsers */
background: gradient(linear, left top, left bottom, color-stop(0%,$audiovideolevel), color-stop(50%,#a1d54f), color-stop(51%,#80c217), color-stop(100%,#7cbc0a)); /* Chrome,Safari4+ */ background: gradient(linear, left top, left bottom, color-stop(0%,$audiovideolevel), color-stop(50%,#a1d54f), color-stop(51%,#80c217), color-stop(100%,#7cbc0a)); /* Chrome,Safari4+ */

3
src/styles/components/_audiovideo.scss
Unescape View File

@ -27,9 +27,6 @@
right: 0; right: 0;
top: $minbarheight; top: $minbarheight;
user-select: none; user-select: none;
@include breakpt($breakpoint-medium) {
top: $mobile-audiovideo-top;
}
} }
#audiovideo { #audiovideo {

76
src/styles/components/_bar.scss
Unescape View File

@ -22,23 +22,11 @@
.bar { .bar {
background: $bar-background; background: $bar-background;
color: $componentfg1; color: $componentfg1;
font: bold 1em/40px $font-sans-serif; font: bold 1em/50px $font-sans-serif;
text-align: center; text-align: center;
touch-callout: none; touch-callout: none;
user-select: none; user-select: none;
z-index: 5; z-index: 10;
@include breakpt($breakpoint-medium) {
height: auto;
z-index: 60;
box-shadow: none;
}
.btn {
position: relative;
}
.navbar-nav {
display: inline-block;
vertical-align: middle;
}
} }
.bar .left { .bar .left {
@ -66,25 +54,38 @@
} }
.bar .middle { .bar .middle {
float: none; position: absolute;
margin-top: 5px; left: 0px;
@include breakpt($breakpoint-medium) { right: 0px;
overflow: hidden; top: 0px;
text-overflow: ellipsis; pointer-events: none;
white-space: nowrap; text-align: center;
> span {
display: inline-block;
background: $bar-background;
min-height: 50px;
pointer-events: auto;
} }
.userpicture { .userpicture {
border-radius: 2px; border-radius: 2px;
display: inline-block; display: inline-block;
height: 46px;
margin: -5px .5em 0 .5em;
width: 46px; width: 46px;
height: 46px;
margin: -8px .5em 0 .5em;
@include breakpt($breakpoint-medium) { @include breakpt($breakpoint-medium) {
display: none; display: none;
} }
} }
&.status-connected,
&.status-conference { .status-connected,
.status-conference,
.status-connecting,
.status-closed,
.status-reconnecting,
.status-error,
.status-ringing {
@include breakpt($breakpoint-medium) { @include breakpt($breakpoint-medium) {
max-width: 100%; max-width: 100%;
left: 0; left: 0;
@ -92,32 +93,15 @@
right: 0; right: 0;
} }
} }
&.status-connecting, .status-connecting .actions,
&.status-closed, .status-closed .actions,
&.status-reconnecting, .status-reconnecting .actions,
&.status-error, .status-error .actions,
&.status-ringing { .status-ringing .actions {
@include breakpt($breakpoint-medium) {
border-bottom: 1px solid $bordercolor;
max-width: 100%;
min-height: 45px;
}
}
// TODO(theurere): cleanup
&.status-connecting .actions,
&.status-closed .actions,
&.status-reconnecting .actions,
&.status-error .actions,
&.status-ringing .actions {
@include breakpt($breakpoint-medium) {
display: block;
padding: .2em 0 .8em 0;
}
} }
} }
.bar .right { .bar .right {
margin-top: 3px;
padding-right: 8px; padding-right: 8px;
.badge { .badge {
background-color: $actioncolor1; background-color: $actioncolor1;

3
src/styles/components/_buddylist.scss
Unescape View File

@ -26,9 +26,6 @@
top: 0; top: 0;
width: 285px; width: 285px;
z-index: 50; z-index: 50;
@include breakpt($breakpoint-medium) {
top: $mobile-buddylist-top;
}
} }
#buddylist:before { #buddylist:before {

3
src/styles/components/_chat.scss
Unescape View File

@ -28,9 +28,6 @@
top: 0px; top: 0px;
width: 260px; width: 260px;
z-index: 45; z-index: 45;
@include breakpt($breakpoint-medium) {
top: $mobile-chat-top;
}
} }
.withChat { .withChat {

3
src/styles/components/_settings.scss
Unescape View File

@ -30,9 +30,6 @@
transition: right 200ms ease-in-out; transition: right 200ms ease-in-out;
width: 520px; width: 520px;
z-index: 50; z-index: 50;
@include breakpt($breakpoint-medium) {
top: $mobile-settings-top;
}
} }
#settings.show { #settings.show {

3
src/styles/global/_pages.scss
Unescape View File

@ -25,9 +25,6 @@
position: absolute; position: absolute;
right: 0; right: 0;
top: $minbarheight; top: $minbarheight;
@include breakpt($breakpoint-medium) {
top: $mobile-pages-top;
}
} }
.welcome { .welcome {

18
src/styles/global/_variables.scss
Unescape View File

@ -34,9 +34,6 @@ $sidepanebg: white !default;
$bordercolor: #e7e7e7 !default; $bordercolor: #e7e7e7 !default;
$actioncolor1: rgb(132,184,25) !default; $actioncolor1: rgb(132,184,25) !default;
$actioncolor2: rgb(0,149,52) !default; $actioncolor2: rgb(0,149,52) !default;
$mobile-top-1: 48px !default;
$mobile-top-2: 153px !default;
$mobile-top-3: 99px !default;
// branding // branding
$logo: url("../img/logo-small.png") !default; $logo: url("../img/logo-small.png") !default;
@ -66,22 +63,11 @@ $base-line-height: 1.53846156; // compass vertical_rhythm mixin
$font-color: lighten(#000, 20%) !default; $font-color: lighten(#000, 20%) !default;
$font-color-accent: lighten($font-color, 50%) !default; $font-color-accent: lighten($font-color, 50%) !default;
//pages
$mobile-pages-top: $mobile-top-1;
//view
$mobile-view-top: $mobile-top-3;
//presensation
$mobile-presentation-top: $mobile-top-3;
// audio video // audio video
$audiovideolevel: $action-enable !default; $audiovideolevel: $action-enable !default;
$mobile-audiovideo-top: $mobile-top-3;
//audiolevel //audiolevel
$audiolevel-top: 43px !default; $audiolevel-top: 43px !default;
$mobile-audiolevel-top: 88px !default;
// main navigation bar // main navigation bar
$minbarheight: 51px !default; $minbarheight: 51px !default;
@ -114,7 +100,6 @@ $buddylist-tab-background: $componentbg !default;
$buddylist-action-background: rgba(255,255,255,0.5) !default; $buddylist-action-background: rgba(255,255,255,0.5) !default;
$buddylist-buddy1: $componentfg1 !default; $buddylist-buddy1: $componentfg1 !default;
$buddylist-buddy2: $componentfg2 !default; $buddylist-buddy2: $componentfg2 !default;
$mobile-buddylist-top: $mobile-top-1;
// chat // chat
$chat-background: #e7e7e7 !default; $chat-background: #e7e7e7 !default;
@ -149,8 +134,6 @@ $chat-bottom-background: $chat-background !default;
$chat-typing: $chat-meta !default; $chat-typing: $chat-meta !default;
$chat-input-border-color: #66afe9 !default; $chat-input-border-color: #66afe9 !default;
$mobile-chat-top: $mobile-top-1;
// fileinfo // fileinfo
$fileinfo-background: white !default; $fileinfo-background: white !default;
$fileinfo-border: #ddd !default; $fileinfo-border: #ddd !default;
@ -164,7 +147,6 @@ $fileinfo-icon-background-color-remote: $fileinfo-icon-background-color !default
$settings-version: #ccc !default; $settings-version: #ccc !default;
$form-help-text: #737373 !default; $form-help-text: #737373 !default;
$settings-background: white !default; $settings-background: white !default;
$mobile-settings-top: $mobile-top-2;
// social // social
$social-email-color: #aaa !default; $social-email-color: #aaa !default;

1
src/styles/global/_views.scss
Unescape View File

@ -27,7 +27,6 @@
right: 0; right: 0;
top: $minbarheight; top: $minbarheight;
@include breakpt($breakpoint-medium) { @include breakpt($breakpoint-medium) {
top: $mobile-view-top;
left: 0px; left: 0px;
} }
} }

2
static/css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long
Write Preview
Loading…
Cancel
Save