* SAAS-1168, SAAS-1153 - work on station podcast frontend

* SAAS-1164 - Styling fixes for publishing and podcast editors

airtime_mvc/application/controllers/FeedsController.php

@@ -7,8 +7,9 @@ class FeedsController extends Zend_Controller_Action
         $this->view->layout()->disableLayout();
         $this->_helper->viewRenderer->setNoRender(true);
 
-        if (Application_Model_Preference::getStationPodcastPrivacy()
+        if (!RestAuth::verifyAuth(true, true, $this)
-            && $this->getRequest()->getParam("sharing_token") != Application_Model_Preference::getStationPodcastDownloadKey()) {
+            && (Application_Model_Preference::getStationPodcastPrivacy()
+            && $this->getRequest()->getParam("sharing_token") != Application_Model_Preference::getStationPodcastDownloadKey())) {
             $this->getResponse()
                 ->setHttpResponseCode(401);
             return;

airtime_mvc/application/services/PodcastEpisodeService.php

@@ -239,10 +239,8 @@ class Application_Service_PodcastEpisodeService extends Application_Service_Thir
         $isStationPodcast = $podcastId === Application_Model_Preference::getStationPodcastId();
 
         $episodes = PodcastEpisodesQuery::create()
-            ->joinWith('PodcastEpisodes.CcFiles')
+            ->joinWithCcFiles('files')
             ->filterByDbPodcastId($podcastId);
-        // TODO: how should we limit the number of episodes for imported podcasts (since they include feed episodes?)
-        // FIXME
         if ($isStationPodcast) {
             $episodes = $episodes->setLimit($limit);
         }
@@ -259,7 +257,7 @@ class Application_Service_PodcastEpisodeService extends Application_Service_Thir
         foreach ($episodes as $episode) {
             /** @var PodcastEpisodes $episode */
             $episodeArr = $episode->toArray(BasePeer::TYPE_FIELDNAME, true, [], true);
-            // $episodeArr["cc_files"] = CcFiles::getSanitizedFileById($episode->getDbFileId());
+            Logging::info($episodeArr);
             array_push($episodesArray, $episodeArr);
         }
         return $episodesArray;

airtime_mvc/application/views/scripts/library/publish-dialog.phtml

@@ -1,61 +1,62 @@
-<div class="inner_editor_title">
+<div class="angular_wrapper" ng-controller="Publish">
-    <h2>
+    <div class="inner_editor_title">
-        <?php echo _("Publishing") ?> "<span ng-bind="media.track_title" class="title_obj_name"></span>"
+        <h2>
-    </h2>
+            <?php echo _("Publishing") ?> "<span ng-bind="media.track_title" class="title_obj_name"></span>"
-</div>
+        </h2>
-<div class="inner_editor_wrapper">
-    <form class="media-metadata">
-        <input ng-value="media.id" class="obj_id" type="hidden"/>
         <button ng-click="openEditDialog()" class="btn publish-edit-md"><?php echo _("Edit Metadata") ?></button>
-        <label class="publish-md-field">
-            <?php echo _("Title") ?>
-            <input disabled ng-model="media.track_title" type="text"/>
-        </label>
-        <label class="publish-md-field">
-            <?php echo _("Creator") ?>
-            <input disabled ng-model="media.artist_name" type="text"/>
-        </label>
-        <label class="publish-md-field">
-            <?php echo _("Description") ?>
-            <textarea disabled ng-model="media.description"></textarea>
-        </label>
-        <fieldset>
-            <legend><?php echo _("Publish to:"); ?></legend>
-            <div ng-repeat="(source, label) in sources.toPublish">
-                <input ng-model="publishData[source]" type="checkbox" name="publish_sources" id="{{source}}">
-                <label for="{{source}}">{{label}}</label><br/>
-            </div>
-            <div ng-if="sources.toPublish.length == 0">
-                <?php echo _("You have already published this track to all available sources!") . "<br/>"
-                         . _("Published tracks can be removed or updated below.") ?>
-            </div>
-        </fieldset>
-        <fieldset>
-            <legend><?php echo _("Published on:"); ?></legend>
-            <div class="published-sources" ng-repeat="(source, label) in sources.published">
-                <span class="sp-checked-icon checked-icon left-floated"></span>
-                <span class="source-name">{{label}}</span>
-                <button class="btn btn-small" ng-click="remove(source)"><?php echo _("Remove") ?></button>
-            </div>
-            <div ng-if="sources.published.length == 0">
-                <?php echo _("You haven't published this track to any sources!") . "<br/>"
-                         . _("Check the boxes above and hit 'Publish' to publish this track to the marked sources.") ?>
-            </div>
-        </fieldset>
-    </form>
-</div>
-
-<div class="btn-toolbar clearfix">
-    <div class="btn-group pull-right">
-        <button ng-click="discard()" class="btn" type="button" name="cancel">
-            <?php echo _("Cancel") ?>
-        </button>
     </div>
-    <div class='btn-group pull-right'>
+    <div class="inner_editor_wrapper">
-        <button ng-click="publish()" class="btn" title='<?php echo _("Publish") ?>' type="button">
+        <form class="media-metadata">
-            <?php echo _("Publish") ?>
+            <input ng-value="media.id" class="obj_id" type="hidden"/>
-        </button>
+            <label class="publish-md-field">
+                <?php echo _("Title") ?>
+                <input disabled ng-model="media.track_title" type="text"/>
+            </label>
+            <label class="publish-md-field">
+                <?php echo _("Creator") ?>
+                <input disabled ng-model="media.artist_name" type="text"/>
+            </label>
+            <label class="publish-md-field">
+                <?php echo _("Description") ?>
+                <textarea disabled ng-model="media.description"></textarea>
+            </label>
+            <fieldset>
+                <legend><?php echo _("Publish to:"); ?></legend>
+                <div ng-repeat="(source, label) in sources.toPublish">
+                    <input ng-model="publishData[source]" type="checkbox" name="publish_sources" id="{{source}}">
+                    <label for="{{source}}">{{label}}</label><br/>
+                </div>
+                <div ng-if="sources.toPublish.length == 0">
+                    <?php echo _("You have already published this track to all available sources!") . "<br/>"
+                        . _("Published tracks can be removed or updated below.") ?>
+                </div>
+            </fieldset>
+            <fieldset>
+                <legend><?php echo _("Published on:"); ?></legend>
+                <div class="published-sources" ng-repeat="(source, label) in sources.published">
+                    <span class="sp-checked-icon checked-icon left-floated"></span>
+                    <span class="source-name">{{label}}</span>
+                    <button class="btn btn-small" ng-click="remove(source)"><?php echo _("Remove") ?></button>
+                </div>
+                <div ng-if="sources.published.length == 0">
+                    <?php echo _("You haven't published this track to any sources!") . "<br/>"
+                        . _("Check the boxes above and hit 'Publish' to publish this track to the marked sources.") ?>
+                </div>
+            </fieldset>
+        </form>
     </div>
-    <div class='success' style='display:none'></span></div>
-</div>
 
+    <div class="btn-toolbar clearfix">
+        <div class="btn-group pull-right">
+            <button ng-click="discard()" class="btn" type="button" name="cancel">
+                <?php echo _("Cancel") ?>
+            </button>
+        </div>
+        <div class='btn-group pull-right'>
+            <button ng-click="publish()" class="btn" title='<?php echo _("Publish") ?>' type="button">
+                <?php echo _("Publish") ?>
+            </button>
+        </div>
+        <div class='success' style='display:none'></span></div>
+    </div>
+</div>

airtime_mvc/application/views/scripts/podcast/podcast.phtml

@@ -7,24 +7,14 @@
     <div class="inner_editor_wrapper">
         <form class="podcast-metadata">
             <input ng-value="podcast.id" class="obj_id" type="hidden"/>
-            <p>
+            <label for="podcast_name"><?php echo _("Podcast Name") ?></label>
-                <label for="podcast_name">
+            <input disabled name="podcast_name" ng-model="podcast.title" type="text"/>
-                    <?php echo _("Podcast Name") ?>
+
-                </label>
+            <label for="podcast_url"><?php echo _("Podcast URL") ?></label>
-                <input disabled name="podcast_name" ng-model="podcast.title" type="text"/>
+            <input disabled name="podcast_url" ng-model="podcast.url" type="text"/>
-            </p>
+
-            <p>
+            <label for="podcast_auto_ingest"><?php echo _("Automatically download latest episodes?") ?></label>
-                <label for="podcast_url">
+            <input name="podcast_auto_ingest" ng-model="podcast.auto_ingest" type="checkbox"/>
-                    <?php echo _("Podcast URL") ?>
-                </label>
-                <input disabled name="podcast_url" ng-model="podcast.url" type="text"/>
-            </p>
-            <p>
-                <label for="podcast_auto_ingest">
-                    <?php echo _("Automatically download latest episodes?") ?>
-                </label>
-                <input name="podcast_auto_ingest" ng-model="podcast.auto_ingest" type="checkbox"/>
-            </p>
         </form>
     </div>
 

airtime_mvc/application/views/scripts/podcast/station_podcast.phtml

@@ -1,30 +1,77 @@
 <div class="angular_wrapper" ng-controller="StationPodcast">
     <div class="inner_editor_title">
-    <h2>
+        <h2>
-        <?php echo _("Editing ") ?>"<span ng-bind="podcast.title" class="title_obj_name"></span>"
+            <?php echo _("Editing ") ?>"<span ng-bind="podcast.title" class="title_obj_name"></span>"
-    </h2>
+        </h2>
+        <a href="{{podcast.url}}" target="_blank">
+            <button class="btn"><?php echo _("View Feed") ?></button>
+        </a>
     </div>
     <div class="inner_editor_wrapper">
         <form class="podcast-metadata">
+            <p>
+                <?php echo _("Check out the ") ?><a target="_blank" href="http://cyber.law.harvard.edu/rss/rss.html#requiredChannelElements"><?php echo _("RSS specification") ?></a>
+                <?php echo _(" or the ") ?><a target="_blank" href="http://www.apple.com/ca/itunes/podcasts/specs.html"><?php echo _("Apple podcasting specification") ?></a>
+                <?php echo _(" for more information.") ?>
+            </p>
+
             <input ng-value="podcast.id" class="obj_id" type="hidden"/>
-            <p>
+
-                <label for="podcast_name">
+            <div>
-                    <?php echo _("Podcast Name") ?>
+                <label><?php echo _("Name") ?></label>
-                </label>
                 <input name="podcast_name" ng-model="podcast.title" type="text"/>
-            </p>
+            </div>
-            <p>
+
-                <label for="podcast_creator">
+            <div>
-                    <?php echo _("Podcast Creator") ?>
+                <label><?php echo _("Creator") ?></label>
-                </label>
                 <input name="podcast_creator" ng-model="podcast.creator" type="text"/>
-            </p>
+            </div>
-            <p>
+
-                <label for="podcast_url">
+            <div>
-                    <?php echo _("Podcast URL") ?>
+                <label><?php echo _("URL") ?></label>
-                </label>
                 <input disabled name="podcast_url" ng-model="podcast.url" type="text"/>
-            </p>
+            </div>
+
+            <div>
+                <label><?php echo _("Description") ?></label>
+                <textarea name="podcast_description" ng-model="podcast.description"></textarea>
+            </div>
+
+            <div>
+                <label><?php echo _("Language") ?></label>
+                <input name="podcast_language" ng-model="podcast.language" type="text"/>
+            </div>
+
+            <div>
+                <label><?php echo _("Copyright") ?></label>
+                <input name="podcast_copyright" ng-model="podcast.copyright" type="text"/>
+            </div>
+
+            <div>
+                <label><?php echo _("Link") ?></label>
+                <input name="podcast_link" ng-model="podcast.link" type="text"/>
+            </div>
+
+            <fieldset>
+                <legend><?php echo _("iTunes Fields") ?></legend>
+                <label><?php echo _("iTunes Author") ?></label>
+                <input name="podcast_itunes_author" ng-model="podcast.itunes_author" type="text"/>
+
+                <label><?php echo _("iTunes Keywords") ?></label>
+                <input name="podcast_itunes_keywords" ng-model="podcast.itunes_keywords" type="text"/>
+
+                <label><?php echo _("iTunes Summary") ?></label>
+                <textarea name="podcast_itunes_summary" ng-model="podcast.itunes_summary"></textarea>
+
+                <label><?php echo _("iTunes Subtitle") ?></label>
+                <textarea name="podcast_itunes_subtitle" ng-model="podcast.itunes_subtitle"></textarea>
+
+                <label><?php echo _("iTunes Category") ?></label>
+                <input name="podcast_itunes_category" ng-model="podcast.itunes_category" type="text"/>
+
+                <label><?php echo _("iTunes Explicit") ?></label>
+                <input name="podcast_itunes_explicit" ng-model="podcast.itunes_explicit" type="checkbox"/>
+            </fieldset>
         </form>
     </div>
 

airtime_mvc/public/css/dashboard.css

@@ -51,6 +51,7 @@
     .content-pane {
         height: auto !important;
         width: 100% !important;
+        min-height: 500px;
     }
     .spl_sortable {
         max-height: 50%;
@@ -303,10 +304,6 @@ thead th.ui-state-default:focus {
     float: right;
 }
 
-#show_builder .fg-toolbar.ui-corner-tl.ui-corner-tr {
-    border-top: none;
-}
-
 .sb-content .dataTables_wrapper {
     margin: 0;
 }
@@ -489,6 +486,11 @@ li.ui-state-default {
     top: 4px;
     left: 4px;
     overflow-x: hidden; /* Show the y-direction scrollbar (magic!) */
+    color: #efefef;
+}
+
+.editor_pane_wrapper a:visited, .angular_wrapper a:visited {
+    color: #cecece;
 }
 
 .tab-name {
@@ -512,7 +514,7 @@ li.ui-state-default {
 
 .inner_editor_title h2 {
     margin: 10px 0 0 10px;
-    width: 85%;
+    width: 70%;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -639,24 +641,30 @@ li.ui-state-default {
     padding-top: 4px;
 }
 
-/* DataTables */
+/* Schedule tab DataTable */
 
-#show_builder .fg-toolbar > .btn-toolbar,
+#show_builder_table_wrapper .fg-toolbar.ui-corner-tl.ui-corner-tr {
-#show_builder .ColVis.TableTools {
+    border-top: none;
+}
+
+#show_builder_table_wrapper .fg-toolbar > .btn-toolbar,
+#show_builder_table_wrapper .ColVis.TableTools {
     position: absolute;
     top: 35px;
 }
 
-#show_builder .fg-toolbar > .btn-toolbar {
+#show_builder_table_wrapper .fg-toolbar > .btn-toolbar {
     left: 6px;
     padding: 0;
 }
 
-#show_builder .ColVis.TableTools {
+#show_builder_table_wrapper .ColVis.TableTools {
     right: 6px;
     margin: 0;
 }
 
+/* DataTables */
+
 div.ColVis_collectionBackground {
     background-color: transparent;
 }
@@ -679,6 +687,10 @@ div.ColVis_collectionBackground {
     color: #000;
 }
 
+.ColVis {
+    margin-bottom: 0;
+}
+
 /* Hacky stuff here */
 #show_builder .dataTables_scrolling {
     top: 66px;

airtime_mvc/public/css/showbuilder.css

@@ -41,13 +41,14 @@
 }
 
 .sb-content fieldset legend {
-    font-size: 13px;
+    font-size: 16px;
     white-space: nowrap;
     width: 110px;
 }
 
 .sb-content fieldset label {
-    padding: 2px;
+    /*padding: 2px;*/
+    padding: 0 16px 0 0;
     font-size: 12px;
 }
 

airtime_mvc/public/css/styles.css

@@ -3949,7 +3949,7 @@ li .ui-state-hover {
     height: 100%;
     float: left;
     flex: 1 100%;
-    margin: 4px 0;
+    margin: 4px 0 !important;
     min-height: 0;
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
@@ -3963,13 +3963,54 @@ li .ui-state-hover {
     max-width: 300px;
 }
 
-.podcast-metadata label {
+.inner_editor_title > h2 {
-    display: inline-block;
+    float: left;
-    width: 150px;
 }
 
-.podcast-metadata input[type="text"] {
+.inner_editor_title button {
+    float: right;
+    margin: 5px 10px 0 0;
+}
+
+.angular_wrapper .inner_editor_wrapper {
+    flex: 1 100%;
+}
+
+.angular_wrapper legend {
+    background-color: #242424;
+    color: #efefef;
+}
+
+.angular_wrapper .dataTables_scrolling {
+    /* Should find a better way to do this... */
+    top: 74px !important;
+}
+
+.podcast-metadata p {
+    text-align: center;
+    padding: 0 5%;
+}
+
+.podcast-metadata label,
+.podcast-metadata input,
+.podcast-metadata textarea {
+    margin: 4px 0;
+}
+
+.podcast-metadata input[type="checkbox"] {
+    margin: 8px 60% 0 0;
+}
+
+.podcast-metadata label {
+    display: block;
+    width: 20%;
+    float: left;
+}
+
+.podcast-metadata input[type="text"],
+.podcast-metadata textarea {
     width: 60%;
+    float: left;
 }
 
 /* UI Revamp Video */

airtime_mvc/public/js/airtime/library/library.js

@@ -1264,9 +1264,9 @@ var AIRTIME = (function(AIRTIME) {
         podcastToolbarButtons[AIRTIME.widgets.Table.TOOLBAR_BUTTON_ROLES.DELETE].eventHandlers.click = AIRTIME.podcast.deleteSelectedPodcasts;
         // Add a button to view the station podcast
         podcastToolbarButtons["StationPodcast"] = {
-            'title' : $.i18n._("My Station Podcast"),
+            title : $.i18n._("My Station Podcast"),
-            'iconClass' : "icon-music",
+            iconClass : "icon-music",
-            extraBtnClass : "",
+            extraBtnClass : "btn-small",
             elementId : "",
             eventHandlers : {
                 click: AIRTIME.podcast.openStationPodcast
@@ -1279,10 +1279,10 @@ var AIRTIME = (function(AIRTIME) {
             true,                //Enable item selection
             podcastToolbarButtons, //Toolbar buttons
             {                    //Datatables overrides.
-                'aoColumns' : aoColumns,
+                aoColumns : aoColumns,
-                'sAjaxSource' : ajaxSourceURL,
+                sAjaxSource : ajaxSourceURL,
-                'oColReorder': {
+                oColReorder: {
-                    'iFixedColumns': 1  // Checkbox
+                    iFixedColumns: 1  // Checkbox
                 }
             });
 

airtime_mvc/public/js/airtime/library/podcast.js

@@ -16,7 +16,7 @@ var AIRTIME = (function (AIRTIME) {
      * @param {{}} $http    angular http service object
      * @param {{}} podcast  podcast metadata object
      * @param {Tab} tab     Tab object the controller is being bootstrapped in
-     * 
+     *
      * @constructor
      */
     function PodcastController($scope, $http, podcast, tab) {
@@ -186,9 +186,9 @@ var AIRTIME = (function (AIRTIME) {
         var $scope = this.$scope,
             buttons = {
                 deleteBtn: {
-                    'title'         : $.i18n._('Delete'),
+                    title           : $.i18n._('Delete'),
-                    'iconClass'     : "icon-trash",
+                    iconClass       : 'icon-trash',
-                    extraBtnClass   : "btn-danger",
+                    extraBtnClass   : 'btn-small btn-danger',
                     elementId       : '',
                     eventHandlers   : {
                         click: $scope.deleteSelectedEpisodes
@@ -213,7 +213,7 @@ var AIRTIME = (function (AIRTIME) {
      * @override
      */
     StationPodcastController.prototype.reloadEpisodeTable = function() {
-        self.episodeTable.getDatatable().fnDraw();
+        this.episodeTable.getDatatable().fnDraw();
     };
 
     /**
@@ -397,14 +397,23 @@ var AIRTIME = (function (AIRTIME) {
      * @returns {*} the created Table object
      */
     mod.initPodcastEpisodeDatatable = function(podcast, tab, params, buttons) {
+        buttons = $.extend({
+            slideToggle: {
+                title           : '',
+                iconClass       : 'spl-no-r-margin icon-chevron-up',
+                extraBtnClass   : 'toggle-editor-form',
+                elementId       : '',
+                eventHandlers   : {}
+            }
+        }, buttons);
         params = $.extend(params,
             {
-                oColVis     : {
+                oColVis: {
-                    sAlign: "right",
+                    sAlign      : 'right',
-                    aiExclude: [0, 1],
+                    aiExclude   : [0, 1],
-                    buttonText: $.i18n._("Columns"),
+                    buttonText  : $.i18n._("Columns"),
                     iOverlayFade: 0,
-                    oColReorder: {
+                    oColReorder : {
                         iFixedColumns: 1  // Checkbox
                     }
                 }

airtime_mvc/public/js/airtime/library/publish.js

@@ -99,8 +99,7 @@ var AIRTIME = (function (AIRTIME) {
     function _bootstrapAngularApp(mediaId, tab) {
         publishApp.value('mediaId', mediaId);
         publishApp.value('tab', tab);
-        var wrapper = AIRTIME.tabs.getActiveTab().contents.find(".editor_pane_wrapper");
+        var wrapper = AIRTIME.tabs.getActiveTab().contents.find(".angular_wrapper");
-        wrapper.attr("ng-controller", "Publish");
         angular.bootstrap(wrapper.get(0), [PUBLISH_APP_NAME]);
     }
 

airtime_mvc/public/js/airtime/library/spl.js

@@ -912,13 +912,6 @@ var AIRTIME = (function(AIRTIME){
                 oData = {};
             playlistRequest(sUrl, oData);
         });
-
-        $pl.find(".toggle-editor-form").unbind().on("click", function(event) {
-            $pl.find(".inner_editor_wrapper").slideToggle(200);
-            var buttonIcon = $(this).find('span.icon-white');
-            buttonIcon.toggleClass('icon-chevron-up');
-            buttonIcon.toggleClass('icon-chevron-down');
-        });
     }
 
     function setUpPlaylist() {
@@ -1138,9 +1131,6 @@ var AIRTIME = (function(AIRTIME){
         type = pl.find('.obj_type').val();
         url = baseUrl+'playlist/delete';
 
-        console.log(id);
-        console.log(type);
-
         $.post(url,
             {format: "json", ids: id, modified: lastMod, type: type},
             function(json) {

airtime_mvc/public/js/airtime/showbuilder/tabs.js

@@ -131,6 +131,13 @@ var AIRTIME = (function(AIRTIME){
             AIRTIME.library.fnDrawCallback();
             self.close();
         });
+
+        self.contents.on("click", ".toggle-editor-form", function(event) {
+            self.contents.find(".inner_editor_wrapper").slideToggle(200);
+            var buttonIcon = $(this).find('.icon-white');
+            buttonIcon.toggleClass('icon-chevron-up');
+            buttonIcon.toggleClass('icon-chevron-down');
+        });
     };
 
     /**

airtime_mvc/public/js/airtime/widgets/table.js

@@ -210,7 +210,8 @@ var AIRTIME = (function(AIRTIME) {
         outerDiv.className = 'btn-group';
         outerDiv.title = title;
         var innerButton = document.createElement("button");
-        innerButton.className = 'btn btn-small ' + extraBtnClass;
+        //innerButton.className = 'btn btn-small ' + extraBtnClass;
+        innerButton.className = 'btn ' + extraBtnClass;
         innerButton.id = elementId;
         var innerIcon = document.createElement("i");
         innerIcon.className = 'icon-white ' + iconClass;
@@ -440,9 +441,9 @@ var AIRTIME = (function(AIRTIME) {
 
     //Set of standard buttons. Use getStandardToolbarButtons() to grab these and pass them to the init() function.
     Table._STANDARD_TOOLBAR_BUTTONS = {};
-    Table._STANDARD_TOOLBAR_BUTTONS[Table.TOOLBAR_BUTTON_ROLES.NEW] = { 'title' : $.i18n._('New'), 'iconClass' : "icon-plus", extraBtnClass : "btn-new", elementId : '', eventHandlers : {} };
+    Table._STANDARD_TOOLBAR_BUTTONS[Table.TOOLBAR_BUTTON_ROLES.NEW] = { 'title' : $.i18n._('New'), 'iconClass' : "icon-plus", extraBtnClass : "btn-small btn-new", elementId : '', eventHandlers : {} };
-    Table._STANDARD_TOOLBAR_BUTTONS[Table.TOOLBAR_BUTTON_ROLES.EDIT] = { 'title' : $.i18n._('Edit'), 'iconClass' : "icon-pencil", extraBtnClass : "", elementId : '', eventHandlers : {} };
+    Table._STANDARD_TOOLBAR_BUTTONS[Table.TOOLBAR_BUTTON_ROLES.EDIT] = { 'title' : $.i18n._('Edit'), 'iconClass' : "icon-pencil", extraBtnClass : "btn-small", elementId : '', eventHandlers : {} };
-    Table._STANDARD_TOOLBAR_BUTTONS[Table.TOOLBAR_BUTTON_ROLES.DELETE] = { 'title' : $.i18n._('Delete'), 'iconClass' : "icon-trash", extraBtnClass : "btn-danger", elementId : '', eventHandlers : {} };
+    Table._STANDARD_TOOLBAR_BUTTONS[Table.TOOLBAR_BUTTON_ROLES.DELETE] = { 'title' : $.i18n._('Delete'), 'iconClass' : "icon-trash", extraBtnClass : "btn-small btn-danger", elementId : '', eventHandlers : {} };
     Object.freeze(Table._STANDARD_TOOLBAR_BUTTONS);