Skip to content

Commit

Permalink
Customize messenger styling
Browse files Browse the repository at this point in the history
fix bug Bug 1203949 to correct sidebar display in ie
and resized logo to fix ie issue
  • Loading branch information
sg00dwin committed Apr 7, 2015
1 parent dc9bff9 commit d57966b
Show file tree
Hide file tree
Showing 9 changed files with 613 additions and 100 deletions.
4 changes: 2 additions & 2 deletions assets/Gruntfile.js
Original file line number Diff line number Diff line change
Expand Up @@ -178,12 +178,12 @@ module.exports = function (grunt) {
'bower_components/uri.js/src/URI.min.js',
'bower_components/uri.js/src/jquery.URI.min.js',
'bower_components/uri.js/src/URI.fragmentQuery.js',
'bower_components/messenger/build/css/messenger.css',
'bower_components/messenger/build/css/messenger-theme-future.css',
'bower_components/messenger/build/css/messenger-theme-flat.css',
'bower_components/messenger/build/css/messenger-theme-block.css',
'bower_components/messenger/build/css/messenger-theme-air.css',
'bower_components/messenger/build/css/messenger-theme-ice.css',
'bower_components/messenger/build/js/messenger-theme-future.js',
'bower_components/messenger/build/js/messenger-theme-flat.js',
'bower_components/fontawesome/css/font-awesome.css'
]
}
Expand Down
89 changes: 46 additions & 43 deletions assets/app/images/logo-origin-thin.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions assets/app/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,7 @@
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css(.) styles/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/messenger/build/css/messenger.css" />
<link rel="stylesheet" href="bower_components/messenger/build/css/messenger-theme-block.css" />
<link rel="stylesheet" href="bower_components/messenger/build/css/messenger-theme-flat.css" />
<link rel="stylesheet" href="bower_components/kubernetes-label-selector/labelFilter.css" />
<!-- endbower -->
<!-- endbuild -->
Expand Down Expand Up @@ -108,6 +107,7 @@
<script src="bower_components/selectize/dist/js/selectize.js"></script>
<script src="bower_components/zeroclipboard/dist/ZeroClipboard.js"></script>
<script src="bower_components/messenger/build/js/messenger.js"></script>
<script src="bower_components/messenger/build/js/messenger-theme-flat.js"></script>
<script src="bower_components/kubernetes-label-selector/labelSelector.js"></script>
<script src="bower_components/kubernetes-label-selector/labelFilter.js"></script>
<!-- endbower -->
Expand Down
4 changes: 2 additions & 2 deletions assets/app/scripts/services/notification.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@ angular.module('openshiftConsole')
.factory('Notification', function($rootScope) {
function Notification() {
this.messenger = Messenger({
extraClasses: 'messenger-fixed messenger-on-top messenger-on-right',
theme: 'block',
extraClasses: 'messenger-fixed messenger-on-bottom messenger-on-right',
theme: 'flat',
messageDefaults: {
showCloseButton: true,
hideAfter: 10
Expand Down
3 changes: 3 additions & 0 deletions assets/app/styles/_core.less
Original file line number Diff line number Diff line change
Expand Up @@ -270,6 +270,9 @@ html, body {
.btn-lg, .btn-group-lg > .btn {
line-height: 1.334; // needed to make same height as inputs
}
code {
white-space: normal;
}
.gutter-top-bottom {
padding: 15px 0;
}
Expand Down
195 changes: 195 additions & 0 deletions assets/app/styles/_messages.less
Original file line number Diff line number Diff line change
@@ -0,0 +1,195 @@
//
// Default messenger included here instead of including messenger.css
// -------------------------------------------------

ul.messenger.messenger-theme-flat {
margin: 0;
padding: 0;
opacity: 1;
.transition(all .2s ease .2s);
> li {
list-style: none;
margin: 0;
padding: 0;
&.messenger-shown {
}
}
.messenger-message {
.clearfix();
&.messenger-hidden {
display: none;
}
.messenger-phrase, .messenger-actions a {
// padding-right: 5px;
}
.messenger-actions {
float: right;
a {
cursor: pointer;
text-decoration: underline;
}
}
ul, ol {
margin: 10px 18px 0;
}
}
&.messenger-fixed {
position: fixed;
z-index: 10000;
.messenger-message {
min-width: 0;
.box-sizing(border-box);
}
.message .messenger-actions {
float: left;
}
&.messenger-on-top {
top: 20px;
}
&.messenger-on-bottom {
bottom: 20px;
}
&.messenger-on-top, &.messenger-on-bottom {
left: 50%;
width: 800px;
margin-left: -400px;
&.messenger-on-right {
right: 20px;
left: auto;
box-shadow: 2px 2px 6px rgba(0,0,0,.3);
}
&.messenger-on-left {
left: 20px;
margin-left: 0px;
box-shadow: 2px 2px 6px rgba(0,0,0,.3);
}
}
&.messenger-on-right, &.messenger-on-left {
width: 90%;
.messenger-actions {
float: left;
}
}
@media (min-width: @screen-sm-min) {
&.messenger-on-right {
width: 45%;
}
}
@media (min-width: @screen-lg-min) {
&.messenger-on-right {
width: 35%;
}
}
&.messenger-empty.messenger-fixed.messenger-on-bottom.messenger-on-right {
display: block;
opacity: 0;
bottom: 20%;
}
}
.messenger-spinner {
display: none;
}
.messenger-clickable {
cursor: pointer;
}
}


//
// Messenger Flat Theme modifications
// -------------------------------------------------

ul.messenger-theme-flat {
background-color: transparent;
border-radius: 4px;
&.messenger-empty {
display: none;
}
}

@insetBackgroundColor: darken(@gray-darker, 10%);

ul.messenger-theme-flat .messenger-message {
-webkit-box-shadow: inset 0px 1px rgba(255, 255, 255, 0.13), inset 50px 0px 0px @insetBackgroundColor;
-moz-box-shadow: inset 0px 1px rgba(255, 255, 255, 0.13), inset 50px 0px 0px @insetBackgroundColor;
box-shadow: inset 0px 1px rgba(255, 255, 255, 0.13), inset 50px 0px 0px @insetBackgroundColor;
border-radius: 0px;
position: relative;
border: 0px;
margin-bottom: 0px;
font-size: @font-size-base;
background: @gray-darker;
color: #f0f0f0;
font-weight: 500;
padding: 10px 30px 13px 65px;
&:before,
.messenger-message-inner:before {
font-size: 20px;
position: absolute;
left: 15px;
top: 50%;
margin-top: -10px;
font-family: 'PatternFlyIcons-webfont';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
}
ul.messenger-theme-flat {
.messenger-message-slot.messenger-last .messenger-message,
.messenger-message-slot.messenger-first.messenger-last .messenger-message {
.box-shadow(inset 50px 0px 0px @insetBackgroundColor);
}
.messenger-message-slot.messenger-first .messenger-message {
-webkit-box-shadow: inset 0px 1px rgba(255, 255, 255, 0.13), inset 50px 0px 0px @insetBackgroundColor;
-moz-box-shadow: inset 0px 1px rgba(255, 255, 255, 0.13), inset 50px 0px 0px @insetBackgroundColor;
box-shadow: inset 0px 1px rgba(255, 255, 255, 0.13), inset 50px 0px 0px @insetBackgroundColor;
}
}
ul.messenger-theme-flat .messenger-message .messenger-actions a {
text-decoration: none;
color: #aaaaaa;
background: lighten(@gray-darker, 5%);
}

ul.messenger-theme-flat {
.messenger-message.alert-error {
&:before {
content: "\e609";
color: @brand-danger;
}
.messenger-message-inner:before {
color: #fff;
content: "\e608";
background-color: transparent;
}
}
.messenger-message.alert-warning {
&:before {
content: "\e60c";
color: @brand-warning;
left: 14px;
margin-top: -11px;
}
.messenger-message-inner:before {
color: #fff;
content: "\e608";
background-color: transparent;
}
}
.messenger-message.alert-success .messenger-message-inner:before {
color: @brand-success;
content: "\e602";
background-color: transparent;
}
.messenger-message.alert-info .messenger-message-inner:before {
color: @brand-info;
content: "\e604";
background-color: transparent;
}
}
2 changes: 1 addition & 1 deletion assets/app/styles/_sidebar.less
Original file line number Diff line number Diff line change
Expand Up @@ -142,7 +142,7 @@
display: none;
}
ul.nav-sidenav > li {
position: initial;
position: static;
&.active > a {
border-bottom: 0;
}
Expand Down
Loading

0 comments on commit d57966b

Please sign in to comment.