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

Move colors to variables. 

Required mixins.

Use mixins and format css.

Color pallete of site to easily compare color values.

Create color variables.

Create font variable.

Improved ordering.

Replace box-shadow instances with mixin.

Compact font and background.

Revert to original color declaration type.

Improved .right .btn

Changed #bar .right/.middle/.left to #bar .bar-right/.bar-middle/.bar-left

Breakup elements in bar-left,bar-middle,bar-right blocks

Use compass vertical rhythm - setup baseline, using relative units.
pull/30/head
Evan Theurer 11 years ago
parent
6252f6fb53
commit
3a848f1444
8 changed files with 305 additions and 162 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. 6
      html/main.html
  2. 100
      src/styles/color-pallete.html
  3. 311
      src/styles/components/_bar.scss
  4. 7
      src/styles/global/_base.scss
  5. 23
      src/styles/global/_mixins.scss
  6. 14
      src/styles/global/_variables.scss
  7. 4
      src/styles/main.scss
  8. 2
      static/partials/statusmessage.html

6
html/main.html
Unescape View File

@ -8,11 +8,11 @@
<div id="loader"><div><i class="fa fa-spinner fa-spin"></i></div></div> <div id="loader"><div><i class="fa fa-spinner fa-spin"></i></div></div>
<page></page> <page></page>
<div id="bar"> <div id="bar">
<div class="left"> <div class="bar-left">
<%template "logo" .%> <%template "logo" .%>
</div> </div>
<status-message></status-message> <status-message></status-message>
<div class="ng-cloak right"> <div class="ng-cloak bar-right">
<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')}}" ng-show="roomstatus" 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">{{chatMessagesUnseen}}</span></button> <button title="{{_('Chat')}}" ng-show="roomstatus" 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">{{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>
@ -42,4 +42,4 @@
<script data-main="<%.Cfg.S%>/js/<%.App%>" data-plugin="<%.Cfg.Plugin%>" src="<%.Cfg.S%>/js/libs/require/require.js"></script> <script data-main="<%.Cfg.S%>/js/<%.App%>" data-plugin="<%.Cfg.Plugin%>" src="<%.Cfg.S%>/js/libs/require/require.js"></script>
<%template "extra-body" .%> <%template "extra-body" .%>
</body> </body>
</html><%end%> </html><%end%>

100
src/styles/color-pallete.html
Unescape View File

@ -0,0 +1,100 @@
<!DOCTYPE html>
<title>CSS site color pallete</title>
<style>
td {
width: 20em;
padding: 0 2%;
}
.color-block {
height: 50px;
border: 10px solid white;
}
.color-desc {
height: 25px;
padding: 5% 0 0 0;
text-align: center;
}
</style>
<table>
<tr>
<td class="color-desc">
$background: #e5e5e5
</td>
<td class="color-desc">
$componentbg: #f5f5f5
</td>
<td class="color-desc">
$componentfg1: #262626
</td>
</tr>
<tr>
<td class="color-block" style="background-color: #e5e5e5;"></td>
<td class="color-block" style="background-color: #f5f5f5;"></td>
<td class="color-block" style="background-color: #262626;"></td>
</tr>
<tr>
<td class="color-desc">
$componentfg2: rgba(0,0,0,.5)
</td>
<td class="color-desc">
$componentfg3: rgba(0,0,0,.2)
</td>
<td class="color-desc">
$componentfg4: #737373
</td>
</tr>
<tr>
<td class="color-block" style="background-color: rgba(0,0,0,.5);"></td>
<td class="color-block" style="background-color: rgba(0,0,0,.2);"></td>
<td class="color-block" style="background-color: #737373;"></td>
</tr>
<tr>
<td class="color-desc">
$sidepanebg: white
</td>
<td class="color-desc">
$bordercolor: #ccc
</td>
<td class="color-desc">
$actioncolor1: rgb(132,184,25)
</td>
</tr>
<tr>
<td class="color-block" style="background-color: white;"></td>
<td class="color-block" style="background-color: #ccc;"></td>
<td class="color-block" style="background-color: rgb(132,184,25);"></td>
</tr>
<tr>
<td class="color-desc">
$actioncolor2: rgb(0,149,52)
</td>
<td class="color-desc">
none: #222
</td>
<td class="color-desc">
none: #db4f39
</td>
</tr>
<tr>
<td class="color-block" style="background-color: rgb(0,149,52);"></td>
<td class="color-block" style="background-color: #222;"></td>
<td class="color-block" style="background-color: #db4f39;"></td>
</tr>
<tr>
<td class="color-desc">
none: #84b819
</td>
<td class="color-desc">
none: rgba(0,0,0,.4)
</td>
<td class="color-desc">
none: rgba(0,0,0,.3)
</td>
</tr>
<tr>
<td class="color-block" style="background-color: #84b819;"></td>
<td class="color-block" style="background-color: rgba(0,0,0,.4);"></td>
<td class="color-block" style="background-color: rgba(0,0,0,.3);"></td>
</tr>
</table>

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

@ -18,167 +18,170 @@
* along with this program. If not, see <http://www.gnu.org/licenses/>. * along with this program. If not, see <http://www.gnu.org/licenses/>.
* *
*/ */
#bar { #bar {
-webkit-box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.2); background-color: $componentbg;
box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.2); color: $componentfg1;
position: absolute; left: 0;
top: 0; min-height: 44px;
left: 0; position: absolute;
right: 0; right: 0;
min-height: 44px; top: 0;
background-color: $componentbg; text-align: center;
color: $componentfg1; z-index: 5;
font-size: 1em; @include adjust-leading-to(2);
font-weight: bold; @include box-shadow(0 2px 10px 0 $componentfg3);
line-height: 40px; // @include debug-vertical-alignment();
text-align: center; @include touch-callout(none);
-webkit-touch-callout: none; @include user-select(none);
-webkit-user-select: none; @include breakpt($breakpoint-medium) {
-khtml-user-select: none; z-index: 40;
-moz-user-select: none; @include box-shadow(none);
-ms-user-select: none; }
user-select: none; .btn {
z-index:5; position: relative;
} }
#bar > .left {
position: absolute;
left:0px;
top:0px;
bottom:0px;
padding-left:12px;
}
#bar .logo {
font-size:11px;
line-height:11px;
font-weight:normal;
color:black;
width:90px;
height:32px;
background-size:100%;
background-repeat:no-repeat;
background-image:url(../img/logo-small.png);
display:inline-block;
text-align:left;
}
#bar .logo > span {
position: relative;
left: 38px;
top: 26px;
font-style: italic;
}
#bar .logo > span a {
color:#222;
}
#bar > .right {
position: absolute;
right:0px;
top:1px;
bottom:1px;
padding-right:8px;
}
#bar > .left > *, #bar > .right > * {
vertical-align: middle;
}
#bar > .right .btn {
border-color:transparent;
background:transparent;
color:rgba(0,0,0,0.3);
height:42px;
width:42px;
display: inline-block;
font-size:24px;
padding:0px;
line-height:40px;
text-align:center;
margin-left:-4px;
}
#bar > .right .btn:focus {
border: none;
box-shadow: 0;
outline: none;
}
#bar > .right .btn:hover {
border-color: #ccc;
background-color:none;
color:rgba(0,0,0,0.4);
}
#bar > .right .btn.active {
border-color: #ccc;
background-color:none;
color:rgba(0,0,0,0.4);
}
#bar > .right .btn.active.amutebtn {
background-color: #db4f39;
border-color: #db4f39;
color: white;
}
#bar > .right .btn.active.aenablebtn {
background-color: #84b819;
border-color: #84b819;
color: white;
}
#bar .btn {
position:relative;
} }
#bar .badge {
background-color: #84b819; .bar-left {
font-size:.4em; bottom: 0;
position:absolute; left: 0;
right:0px; top: 0;
top:2px; padding-left: 12px;
border:1px solid white; position: absolute;
} .logo {
#bar .userpicture { background: url(../img/logo-small.png) no-repeat;
margin:-5px 0.5em 0px 0.5em; background-size: 100%;
width:46px; display: inline-block;
height:46px; color: black;
border-radius:2px; height: 32px;
display:inline-block; text-align: left;
} width: 90px;
#bar > .middle { vertical-align: middle;
z-index:5; @include adjust-font-size-to(11px,0.4);
background-color: $componentbg; span {
display:inline-block; font-style: italic;
padding:0 1em; left: 38px;
position:relative; position: relative;
min-height: 44px; top: 26px;
vertical-align:middle; }
margin-left:-70px; span a {
color: $dgrey;
}
}
} }
@media all and (max-width: 700px) { .bar-middle {
#bar { background-color: $componentbg;
z-index:40; display: inline-block;
-webkit-box-shadow: none; font-weight: bold;
box-shadow: none; min-height: 44px;
padding: 0 1em;
position: relative;
margin-left: -70px;
z-index: 5;
@include breakpt($breakpoint-medium) {
display: block;
margin-left: 0px;
max-width: 40%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.userpicture {
border-radius: 2px;
display: inline-block;
height: 46px;
margin: -5px .5em 0 .5em;
width: 46px;
}
img {
@include breakpt($breakpoint-medium) {
display: none;
} }
#bar > .middle.status-connecting, #bar > .middle.status-closed, #bar > .middle.status-reconnecting, #bar > .middle.status-error, #bar > .middle.status-ringing { }
max-width:100%; &.status-connected,
border-bottom:1px solid $bordercolor; &.status-conference {
.actions { @include breakpt($breakpoint-medium) {
display: block; max-width: 100%;
padding:.2em 0 .8em 0; left: 0;
} position: absolute;
min-height: 45px; right: 0;
} }
#bar > .middle.status-connected, #bar > .middle.status-conference { }
position:absolute; &.status-connecting,
left:0px; &.status-closed,
right:0px; &.status-reconnecting,
max-width:100%; &.status-error,
&.status-ringing {
@include breakpt($breakpoint-medium) {
border-bottom: 1px solid $bordercolor;
max-width: 100%;
min-height: 45px;
} }
#bar > .middle { }
display:block; // TODO(theurere): cleanup
max-width:40%; &.status-connecting .actions,
overflow:hidden; &.status-closed .actions,
text-overflow:ellipsis; &.status-reconnecting .actions,
white-space:nowrap; &.status-error .actions,
margin-left:0px; &.status-ringing .actions {
@include breakpt($breakpoint-medium) {
img { display: block;
display:none; padding: .2em 0 .8em 0;
}
} }
}
} }
.bar-right {
bottom: 1px;
padding-right: 8px;
position: absolute;
right: 0;
top: 1px;
.badge {
background-color: $actioncolor1;
border: 1px solid white;
font-size: .4em;
position: absolute;
right: 0;
top: 2px;
}
.btn {
background: transparent;
border-color: transparent;
color: $grey3;
display: inline-block;
height: 42px;
margin-left: -4px;
padding: 0;
text-align: center;
width: 42px;
@include adjust-font-size-to(24px);
&:focus {
border: none;
outline: none;
@include box-shadow(0);
}
&:hover {
background-color: none;
border-color: #ccc;
color: $grey4;
}
&.active {
background-color: none;
border-color: #ccc;
color: $grey4;
}
&.active.amutebtn {
background-color: $red;
border-color: $red;
color: white;
}
&.active.aenablebtn {
background-color: $actioncolor1;
border-color: $actioncolor1;
color: white;
}
}
}

7
src/styles/global/_base.scss
Unescape View File

@ -18,11 +18,14 @@
* along with this program. If not, see <http://www.gnu.org/licenses/>. * along with this program. If not, see <http://www.gnu.org/licenses/>.
* *
*/ */
@include establish-baseline();
html, body { html, body {
background-color: $background; background-color: $background;
background-clip: padding-box; background-clip: padding-box;
height: 100%; height: 100%;
font: normal 13px "Helvetica Neue",Helvetica,Arial,sans-serif; font: normal $base-font-size $font-sans-serif;
} }
body { body {
margin: 0; margin: 0;
@ -125,4 +128,4 @@ z-index:0;
text-shadow: 0 0 5px black; text-shadow: 0 0 5px black;
font-size:1.1em; font-size:1.1em;
margin-top:80px; margin-top:80px;
} }

23
src/styles/global/_mixins.scss
Unescape View File

@ -0,0 +1,23 @@
@mixin breakpt($pt) {
@media (max-width: $pt) {
@content;
}
}
@mixin user-select($select) {
-khtml-user-select: $select;
-moz-user-select: $select;
-ms-user-select: $select;
-webkit-user-select: $select;
user-select: $select;
}
@mixin touch-callout($callout) {
-webkit-touch-callout: $callout;
}
@mixin box-shadow($shadow) {
-webkit-box-shadow: $shadow;
box-shadow: $shadow;
}

14
src/styles/global/_colors.scss → src/styles/global/_variables.scss
Unescape View File

@ -22,10 +22,22 @@ $background: #e5e5e5;
$componentbg: #f5f5f5; $componentbg: #f5f5f5;
$componentfg1: #262626; $componentfg1: #262626;
$componentfg2: rgba(0,0,0,.5); $componentfg2: rgba(0,0,0,.5);
$componentfg3: rgba(0,0,0,.2); $componentfg3: rgba(0,0,0,.2); //#ccc
$componentfg4: #737373; $componentfg4: #737373;
$sidepanebg: white; $sidepanebg: white;
$bordercolor: #ccc; $bordercolor: #ccc;
$actioncolor1: rgb(132,184,25); $actioncolor1: rgb(132,184,25);
$actioncolor2: rgb(0,149,52); $actioncolor2: rgb(0,149,52);
$grey3: rgba(0,0,0,.3);
$grey4: rgba(0,0,0,.4);
$dgrey: rgb(34,34,34);
$red: rgb(219,79,57);
$breakpoint-small: 480px;
$breakpoint-medium: 700px;
$breakpoint-large: 1280px;
$font-sans-serif: "Helvetica Neue",Helvetica,Arial,sans-serif;
$base-font-size: 13px;
$base-line-height: 19px;

4
src/styles/main.scss
Unescape View File

@ -19,11 +19,13 @@
* *
*/ */
@import "global/variables";
// @import "compass";
@import "compass"; @import "compass";
@import "libs/libs"; @import "libs/libs";
@import "global/colors"; @import "global/mixins";
@import "global/base"; @import "global/base";
@import "global/angular"; @import "global/angular";

2
static/partials/statusmessage.html
Unescape View File

@ -1,4 +1,4 @@
<span class="middle status-{{status}}" ng-switch on="status"> <span class="bar-middle status-{{status}}" ng-switch on="status">
<span ng-switch-when="initializing">{{_("Initializing")}} <i class="fa fa-spinner fa-spin"></i></span> <span ng-switch-when="initializing">{{_("Initializing")}} <i class="fa fa-spinner fa-spin"></i></span>
<span ng-switch-when="waiting"><span class="msg">{{_("Online")}} </span><i style="color:rgb(132,184,25)" class="fa fa-bullseye"></i> {{id|displayName}} <img class="userpicture" ng-show="master.buddyPicture" ng-src="{{master.buddyPicture}}" alt="" /></span> <span ng-switch-when="waiting"><span class="msg">{{_("Online")}} </span><i style="color:rgb(132,184,25)" class="fa fa-bullseye"></i> {{id|displayName}} <img class="userpicture" ng-show="master.buddyPicture" ng-src="{{master.buddyPicture}}" alt="" /></span>
<span ng-switch-when="connecting"><span class="msg">{{_("Calling")}} {{dialing|displayName}}</span> <a class="btn btn-small btn-danger" ng-click="doAbort()"><i class="fa fa-spinner fa-spin"></i> {{_("Hangup")}}</a></span> <span ng-switch-when="connecting"><span class="msg">{{_("Calling")}} {{dialing|displayName}}</span> <a class="btn btn-small btn-danger" ng-click="doAbort()"><i class="fa fa-spinner fa-spin"></i> {{_("Hangup")}}</a></span>

Write Preview
Loading…
Cancel
Save