Congegni/sintonia
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Big style update for the new show builder screen

Browse source 
* Restyled the tables
* Blue currently playing track
* Labels for library view buttons
This commit is contained in:
Albert Santoni 2015-08-07 19:08:17 -04:00
parent 133db1c6a6
commit cdc9f88c1c
8 changed files with 1661 additions and 60 deletions
Download patch file Download diff file Expand all files Collapse all files

2
airtime_mvc/application/controllers/ShowBuilderController.php
View file

@ -13,6 +13,8 @@ class ShowBuilderController extends Zend_Controller_Action {
$this->view->headScript()->appendScript("localStorage.setItem( 'user-type', '$userType' );"); $this->view->headScript()->appendScript("localStorage.setItem( 'user-type', '$userType' );");
$this->view->headScript()->appendScript(Application_Common_GoogleAnalytics::generateGoogleTagManagerDataLayerJavaScript()); $this->view->headScript()->appendScript(Application_Common_GoogleAnalytics::generateGoogleTagManagerDataLayerJavaScript());
$this->view->headLink()->appendStylesheet($baseUrl . 'css/redmond/_jquery-ui-1.8.8.custom.css?' . $CC_CONFIG['airtime_version']);
$this->view->headScript()->appendFile($baseUrl.'js/contextmenu/jquery.contextMenu.js?'.$CC_CONFIG['airtime_version'],'text/javascript'); $this->view->headScript()->appendFile($baseUrl.'js/contextmenu/jquery.contextMenu.js?'.$CC_CONFIG['airtime_version'],'text/javascript');
$this->view->headScript()->appendFile($baseUrl.'js/datatables/js/jquery.dataTables.js?'.$CC_CONFIG['airtime_version'],'text/javascript'); $this->view->headScript()->appendFile($baseUrl.'js/datatables/js/jquery.dataTables.js?'.$CC_CONFIG['airtime_version'],'text/javascript');
$this->view->headScript()->appendFile($baseUrl.'js/datatables/plugin/dataTables.pluginAPI.js?'.$CC_CONFIG['airtime_version'],'text/javascript'); $this->view->headScript()->appendFile($baseUrl.'js/datatables/plugin/dataTables.pluginAPI.js?'.$CC_CONFIG['airtime_version'],'text/javascript');

100
airtime_mvc/public/css/_showbuilder.css
View file

@ -211,6 +211,16 @@ div.ColVis_collectionBackground {
color: #efefef; color: #efefef;
} }
#library_content .icon-white {
margin-right: 4px;
}
div.btn > span
{
color: red;
}
.fg-toolbar.ui-toolbar.ui-widget-header.ui-corner-bl.ui-corner-br.ui-helper-clearfix { .fg-toolbar.ui-toolbar.ui-widget-header.ui-corner-bl.ui-corner-br.ui-helper-clearfix {
position: absolute; position: absolute;
right: 0; right: 0;
@ -559,7 +569,7 @@ textarea {
width: 130px; width: 130px;
flex: 1 auto; flex: 1 auto;
padding: 4px; padding: 0px;
/*margin-right: 10px;*/ /*margin-right: 10px;*/
/*text-align: center;*/ /*text-align: center;*/
@ -572,9 +582,10 @@ textarea {
box-shadow: 0 2px 5px rgba(0,0,0,.35); box-shadow: 0 2px 5px rgba(0,0,0,.35);
z-index: 100; z-index: 100;
text-align: left;
} }
#media_type_nav div { #media_type_nav .btn-group {
padding: 4px; padding: 4px;
} }
@ -589,28 +600,31 @@ textarea {
font-family: Roboto, "Open Sans", sans-serif; font-family: Roboto, "Open Sans", sans-serif;
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
margin: 10px 10px 0 0; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
/*margin: 20px 20px 0 5px;*/
padding: 10px 10px 10px 10px;
-webkit-transition: color 0.2s linear; -webkit-transition: color 0.1s linear;
-moz-transition: color 0.2s linear; -moz-transition: color 0.1s linear;
-o-transition: color 0.2s linear; -o-transition: color 0.1s linear;
transition: color 0.2s linear; transition: color 0.1s linear;
} }
.media_type_selector.selected { .media_type_selector.selected {
color: #fff; color: #fff;
-webkit-transition: color 0.2s linear; background-color: #444;
-moz-transition: color 0.2s linear; -webkit-transition: color 0.1s linear;
-o-transition: color 0.2s linear; -moz-transition: color 0.1s linear;
transition: color 0.2s linear; -o-transition: color 0.1s linear;
transition: color 0.1s linear;
} }
.media_type_selector:hover { .media_type_selector:hover {
color: #fff; color: #fff;
-webkit-transition: color 0.2s linear; -webkit-transition: color 0.1s linear;
-moz-transition: color 0.2s linear; -moz-transition: color 0.1s linear;
-o-transition: color 0.2s linear; -o-transition: color 0.1s linear;
transition: color 0.2s linear; transition: color 0.1s linear;
} }
/* DataTables */ /* DataTables */
@ -657,8 +671,9 @@ textarea {
} }
/* ~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~ */
.datatable tr, .datatable td { .datatable tr, .datatable td {
border: none !important; border: none;
} }
/* This is so dragged items show up above the layout */ /* This is so dragged items show up above the layout */
@ -687,4 +702,57 @@ textarea {
.dropzone .dz-message { .dropzone .dz-message {
margin: 0; margin: 0;
}
/* jQuery UI overrides */
.ui-widget {
font-family: Helvetica, Arial, sans-serif;
font-size: 1.2em;
}
.ui-widget .ui-widget {
font-size: 1em;
}
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
}
.ui-widget-content {
border: 1px solid #5b5b5b;
background: #aaaaaa url(images/ui-bg_default_aaaaaa.png) repeat-x 0 0;
color: #1c1c1c;
}
.ui-widget-content a {
color: #444444;
}
.ui-widget-header {
border: 1px solid #5b5b5b;
background: #4a4a4a url(images/ui-bg_highlight.png) 0 0 repeat-x;
color: #CCC;
font-weight: bold;
}
.ui-widget-header a {
color: #444444;
}
/* Bootstrap.css overrides */
.btn {
border-color: rgba(0, 0, 0, 0.35) rgba(0, 0, 0, 0.35) rgba(0, 0, 0, 0.55)
}
/* showbuilder.css overrides */
.sb-now-playing, tr.sb-now-playing > td {
background-color: #1adeff;/* #1aff60; */ /* #5b1aff; */
color: #000;
}
tr.ui-state-error > td {
color: #d00000;
}
tr.ui-state-highlight > td {
color: #65a539;
}
#show_builder_table tr.sb-footer {
border-top: 10px solid #000;
} }

1527
airtime_mvc/public/css/redmond/_jquery-ui-1.8.8.custom.css Normal file
View file

File diff suppressed because it is too large Load diff

22
airtime_mvc/public/css/redmond/jquery-ui-1.8.8.custom.css vendored
View file

@ -116,7 +116,7 @@
} }
.ui-widget-header { .ui-widget-header {
border: 1px solid #5b5b5b; border: 1px solid #5b5b5b;
background: #9a9a9a url(images/ui-bg_highlight.png) 0 0 repeat-x; background: #4a4a4a url(images/ui-bg_highlight.png) 0 0 repeat-x;
color: #444444; color: #444444;
font-weight: bold; font-weight: bold;
} }
@ -130,8 +130,8 @@
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
border: 1px solid #5b5b5b; border: 1px solid #5b5b5b;
background-color: #6e6e6e; background-color: #6e6e6e;
background: -moz-linear-gradient(top, #868686 0, #6e6e6e 100%); background: -moz-linear-gradient(top, #868686 0, #6e6e6e 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #868686), color-stop(100%, #6e6e6e)); background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #868686), color-stop(100%, #6e6e6e));
color: #ffffff; color: #ffffff;
} }
.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { .ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited {
@ -141,8 +141,8 @@
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {
border: 1px solid #242424; border: 1px solid #242424;
background-color: #292929; background-color: #292929;
background: -moz-linear-gradient(top, #3b3b3b 0, #292929 100%); background: -moz-linear-gradient(top, #3b3b3b 0, #292929 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #3b3b3b), color-stop(100%, #292929)); background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #3b3b3b), color-stop(100%, #292929));
color: #ffffff; color: #ffffff;
} }
.ui-state-hover a, .ui-state-hover a:hover { .ui-state-hover a, .ui-state-hover a:hover {
@ -215,7 +215,7 @@
background-image: url(images/ui-icons_ffffff_256x240.png); background-image: url(images/ui-icons_ffffff_256x240.png);
} }
.ui-widget-content .ui-icon-alert { .ui-widget-content .ui-icon-alert {
background-image: url(images/ui-icons_ff5d1a_256x240.png); background-image: url(images/ui-icons_ff5d1a_256x240.png);
} }
.ui-widget-header .ui-icon { .ui-widget-header .ui-icon {
background-image: url(images/ui-icons_ffffff_256x240.png); background-image: url(images/ui-icons_ffffff_256x240.png);
@ -1127,7 +1127,7 @@ button.ui-button.::-moz-focus-inner {
padding: 0; padding: 0;
} }
/* reset extra padding in Firefox */ /* reset extra padding in Firefox */
/* /*
* jQuery UI Dialog 1.8.6 * jQuery UI Dialog 1.8.6
* *
@ -1175,16 +1175,16 @@ button.ui-button.::-moz-focus-inner {
background: none; background: none;
overflow: auto; overflow: auto;
zoom: 1; zoom: 1;
} }
.ui-dialog .ui-dialog-buttonpane { .ui-dialog .ui-dialog-buttonpane {
text-align: left; text-align: left;
border-width: 1px 0 0 0; border-width: 1px 0 0 0;
background: none; background: none;
margin: .5em 0 0 0; margin: .5em 0 0 0;
margin: 0.3em -0.4em 0; margin: 0.3em -0.4em 0;
padding: 0.3em 1em 0 0.4em; padding: 0.3em 1em 0 0.4em;
border-color: #9f9f9f; border-color: #9f9f9f;
} }
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
float: right; float: right;

8
airtime_mvc/public/css/showbuilder.css
View file

@ -201,15 +201,17 @@ table.dataTable td.sb-image {
table.datatable tr.sb-header.odd td, table.datatable tr.sb-header.even td, table.datatable tr.sb-header.odd td, table.datatable tr.sb-header.even td,
table.datatable tr.sb-header.odd:hover td, table.datatable tr.sb-header.even:hover td{ table.datatable tr.sb-header.odd:hover td, table.datatable tr.sb-header.even:hover td{
background: #555;
/*
background: -moz-linear-gradient(top, #a4a4a4 0, #bcbcbc 100%); background: -moz-linear-gradient(top, #a4a4a4 0, #bcbcbc 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #a4a4a4), color-stop(100%, #bcbcbc)); background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #a4a4a4), color-stop(100%, #bcbcbc));
background: linear-gradient(top, #a4a4a4 0, #bcbcbc 100%); background: linear-gradient(top, #a4a4a4 0, #bcbcbc 100%);
*/
border-top-color:#6b6a6a !important; border-top-color:#6b6a6a !important;
} }
.sb-content tr:last-child td { .datatable .ui-state-error {
border-bottom-width: 1px !important; color: #d00000 !important;
border-bottom-color:#6b6a6a !important;
} }
.sb-header div.ui-state-default { .sb-header div.ui-state-default {

14
airtime_mvc/public/css/styles.css
View file

@ -859,25 +859,24 @@ dl.inline-list dd {
} }
.datatable tr td, .datatable tr th { .datatable tr td, .datatable tr th {
border-color: #b1b1b1;
border-style: solid;
border-width: 1px 0 0 1px;
font-size: 13px; font-size: 13px;
padding: 5px 5px; padding: 5px 5px;
color: #CCC;
} }
.odd { .odd {
background-color: #d8d8d8; background-color: #282828;
} }
.even { .even {
background-color:#c7c7c7; background-color: #2f2f2f;
} }
.datatable tr.even.selected td { .datatable tr .selected td {
background-color: #abcfe2; background-color: #abcfe2;
} }
/*
.datatable tr.odd.selected td { .datatable tr.odd.selected td {
background-color: #c5deeb; background-color: #c5deeb;
} }*/
/*.datatable tr.odd:hover td, .datatable tr.even:hover td {*/ /*.datatable tr.odd:hover td, .datatable tr.even:hover td {*/
/*background-color: #95d5f7 !important;*/ /*background-color: #95d5f7 !important;*/
/*}*/ /*}*/
@ -971,7 +970,6 @@ dl.inline-list dd {
float: left; float: left;
padding: 10px; padding: 10px;
font-size:12px; font-size:12px;
color:#555555;
font-weight:normal; font-weight:normal;
} }

42
airtime_mvc/public/js/airtime/library/_library.js
View file

@ -116,16 +116,19 @@ var AIRTIME = (function(AIRTIME) {
mod.createToolbarButtons = function () { mod.createToolbarButtons = function () {
$menu = $("<div class='btn-toolbar' />"); $menu = $("<div class='btn-toolbar' />");
$menu $menu
.append("<div class='btn-group'>" + .append("<div class='btn-group' title=" + $.i18n._('New') + ">" +
"<button class='btn btn-small dropdown-toggle' data-toggle='dropdown'>" + "<button class='btn btn-small' id='sb-new'>" +
$.i18n._("Select") + " <span class='caret'></span>" + "<i class='icon-white icon-plus'></i>" +
"<span>" + $.i18n._('New') + "</span>" +
"</button>" + "</button>" +
"<ul class='dropdown-menu'>" +
"<li id='sb-select-page'><a href='#'>" + $.i18n._("Select this page") + "</a></li>" +
"<li id='sb-dselect-page'><a href='#'>" + $.i18n._("Deselect this page") + "</a></li>" +
"<li id='sb-dselect-all'><a href='#'>" + $.i18n._("Deselect all") + "</a></li>" +
"</ul>" +
"</div>") "</div>")
.append("<div class='btn-group' title=" + $.i18n._('Edit') + ">" +
"<button class='btn btn-small' id='sb-edit'>" +
"<i class='icon-white icon-pencil'></i>" +
"<span>" + $.i18n._('Edit') + "</span>" +
"</button>" +
"</div>")
.append("<div class='btn-group'>" + .append("<div class='btn-group'>" +
"<button class='btn btn-small' id='library-plus'>" + "<button class='btn btn-small' id='library-plus'>" +
"<i class='icon-white icon-plus'></i>" + "<i class='icon-white icon-plus'></i>" +
@ -135,18 +138,19 @@ var AIRTIME = (function(AIRTIME) {
.append("<div class='btn-group' title=" + $.i18n._('Delete') + ">" + .append("<div class='btn-group' title=" + $.i18n._('Delete') + ">" +
"<button class='btn btn-small' id='sb-trash'>" + "<button class='btn btn-small' id='sb-trash'>" +
"<i class='icon-white icon-trash'></i>" + "<i class='icon-white icon-trash'></i>" +
"</button>" + "<span>" + $.i18n._('Delete') + "</span>" +
"</button>" +
"</div>") "</div>")
.append("<div class='btn-group' title=" + $.i18n._('Edit') + ">" + .append("<div class='btn-group'>" +
"<button class='btn btn-small' id='sb-edit'>" + "<button class='btn btn-small dropdown-toggle' data-toggle='dropdown'>" +
"<i class='icon-white icon-pencil'></i>" + $.i18n._("Select") + " <span class='caret'></span>" +
"</button>" + "</button>" +
"</div>") "<ul class='dropdown-menu'>" +
.append("<div class='btn-group' title=" + $.i18n._('New') + ">" + "<li id='sb-select-page'><a href='#'>" + $.i18n._("Select this page") + "</a></li>" +
"<button class='btn btn-small' id='sb-new'>" + "<li id='sb-dselect-page'><a href='#'>" + $.i18n._("Deselect this page") + "</a></li>" +
"<i class='icon-white icon-plus'></i>" + "<li id='sb-dselect-all'><a href='#'>" + $.i18n._("Deselect all") + "</a></li>" +
"</button>" + "</ul>" +
"</div>"); "</div>");
}; };
mod.moveSearchBarToHeader = function() { mod.moveSearchBarToHeader = function() {

6
airtime_mvc/public/js/airtime/library/events/_library_showbuilder.js
View file

@ -37,12 +37,12 @@ var AIRTIME = (function(AIRTIME) {
} else { } else {
var objType = $('.active-tab .obj_type').val(); var objType = $('.active-tab .obj_type').val();
if (objType === 'block') { if (objType === 'block') {
btnText = ' ' + $.i18n._('Add to current smart block'); btnText = $.i18n._('Add to current smart block');
} else { } else {
btnText = ' ' + $.i18n._('Add to current playlist'); btnText = $.i18n._('Add to current playlist');
} }
} }
AIRTIME.library.changeAddButtonText($('.btn-group #library-plus #lib-plus-text'), ' '+ btnText); AIRTIME.library.changeAddButtonText($('.btn-group #library-plus #lib-plus-text'), btnText);
}; };
mod.fnRowCallback = function(nRow, aData, iDisplayIndex, iDisplayIndexFull) { mod.fnRowCallback = function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {