display server name in dashboard

2025-03-30 19:56:21 +00:00 · 2015-01-18 14:53:34 -05:00 · 2015-01-18 14:53:34 -05:00 · 1509f3805d
commit 1509f3805d
parent 3c745ff362
14 changed files with 169 additions and 87 deletions
--- a/dashboard-ui/advanced.html
+++ b/dashboard-ui/advanced.html
@ -11,8 +11,7 @@

                <div data-role="controlgroup" data-type="horizontal" class="localnav" data-mini="true">
                    <a href="#" data-role="button" class="ui-btn-active">${TabGeneral}</a>
-                    <a href="notificationsettings.html" data-role="button">${TabNotifications}</a>
-                    <a href="scheduledtasks.html" data-role="button">${TabScheduledTasks}</a>
+                    <a href="serversecurity.html" data-role="button">${TabSecurity}</a>
                </div>
                <form id="advancedConfigurationForm">

--- a/dashboard-ui/css/librarybrowser.css
+++ b/dashboard-ui/css/librarybrowser.css
@ -559,7 +559,7 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
    }

 .ui-page-theme-a .detailSectionHeader {
-    background-color: #e9e9e9;
+    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 2px;
 }
@ -644,7 +644,7 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
    }
 }

-@media all and (max-width: 750px) {
+@media all and (max-width: 800px) {

    .editorMenuLink {
        display: none;
--- a/dashboard-ui/css/librarymenu.css
+++ b/dashboard-ui/css/librarymenu.css
@ -265,14 +265,14 @@
    }
 }

-@media all and (min-width: 750px) {
+@media all and (min-width: 800px) {

    .dashboardDocument .dashboardMenuButton {
        display: none;
    }
 }

-@media all and (max-width: 750px) {
+@media all and (max-width: 800px) {

    .dashboardDocument .libraryMenuButton {
        display: none;
--- a/dashboard-ui/css/site.css
+++ b/dashboard-ui/css/site.css
@ -320,49 +320,93 @@ h1 .imageLink {
    border: 0;
    display: none;
    text-align: left;
-    width: 220px;
+    width: 240px;
    position: fixed;
    top: 51px;
    left: 0;
    bottom: 0;
    margin: 0;
+    overflow-x: hidden;
+    overflow-y: auto;
+    border-right: 1px solid #e0e0e0;
+    /*-moz-box-shadow: -3px 0 10px 0 #555;
+    -webkit-box-shadow: -3px 0 10px 0 #555;
+    box-shadow: -3px 0 10px 0 #555;*/
+}
+
+.ui-page-theme-a {
+    background: #f2f2f2;
+}
+
+    .ui-page-theme-a .content-secondary {
+        background: #fff;
    }

 .sidebarLinks {
-    margin-top: 2.75em;
-    margin-left: 1em;
+    margin-top: 1.5em;
+    padding-bottom: 50px;
 }

    .sidebarLinks a {
        display: block;
-        padding: .6em 20px .6em 20px;
+        padding: .6em 20px .6em 0;
        text-decoration: none;
        color: inherit !important;
        text-shadow: none !important;
        font-weight: 500 !important;
        font-size: 14px;
-        border-radius: 2px;
+        vertical-align: middle;
    }

        .sidebarLinks a:hover {
-            background: #52B54B;
-            color: #fff !important;
+            background: #f2f2f2;
        }

        .sidebarLinks a.selectedSidebarLink {
+            margin-right: 0;
+        }
+
+.ui-page-theme-a .sidebarLinks a.selectedSidebarLink {
+    background: #f2f2f2 !important;
+}
+
+.ui-page-theme-b .sidebarLinks a.selectedSidebarLink {
    background: #38c !important;
    color: #fff !important;
-            margin-right: 0;
+}
+
+.sidebarLinks .sidebarLinkIcon {
+    font-size: 17px;
+    width: 66px;
+    text-align: center;
+}
+
+.ui-page-theme-a .sidebarLinkIcon {
+    color: #666;
 }

 .sidebarDivider {
    height: 0;
    border-width: 1px 0 0;
    border-style: solid;
-    margin: .25em 0;
+    margin: .7em 0;
    border-radius: 0;
 }

+.sidebarLinkText, .sidebarLinkIcon {
+}
+
+.sidebarHeader {
+    padding-left: 20px;
+    margin: 1em 0;
+    font-size: 90%;
+}
+
+.ui-page-theme-a .sidebarHeader {
+    color: #888;
+}
+
+
 .invalidEntry {
    background-color: lightpink !important;
 }
@ -439,7 +483,7 @@ h1 .imageLink {
    }
 }

-@media all and (min-width: 750px) {
+@media all and (min-width: 800px) {

    /*
    Forms
@ -465,7 +509,7 @@ h1 .imageLink {

    .content-primary {
        padding: 80px 15px 3em 0;
-        margin: 0 0 0 260px;
+        margin: 0 0 0 280px;
    }

        .content-primary ul:first-child {
--- a/dashboard-ui/dashboard.html
+++ b/dashboard-ui/dashboard.html
@ -12,7 +12,6 @@
                <div data-role="controlgroup" data-type="horizontal" class="localnav" data-mini="true">
                    <a href="#" data-role="button" class="ui-btn-active">${TabDashboard}</a>
                    <a href="dashboardgeneral.html" data-role="button">${TabSettings}</a>
-                    <a href="serversecurity.html" data-role="button">${TabSecurity}</a>
                </div>
                <div class="dashboardContent">
                    <div class="ui-bar-a welcomeMessage" style="display: none; padding: 2em; border-radius: 10px; margin: 2em 0; font-weight: normal; max-width: 800px;">
--- a/dashboard-ui/dashboardgeneral.html
+++ b/dashboard-ui/dashboardgeneral.html
@ -12,7 +12,6 @@
                <div data-role="controlgroup" data-type="horizontal" class="localnav" data-mini="true">
                    <a href="dashboard.html" data-role="button">${TabDashboard}</a>
                    <a href="#" data-role="button" class="ui-btn-active">${TabSettings}</a>
-                    <a href="serversecurity.html" data-role="button">${TabSecurity}</a>
                </div>

                <form class="dashboardGeneralForm">
--- a/dashboard-ui/notificationsetting.html
+++ b/dashboard-ui/notificationsetting.html
@ -1,20 +1,14 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <title>${TitleAdvanced}</title>
+    <title>${TitleNotifications}</title>
 </head>
 <body>
-    <div id="notificationSettingPage" data-role="page" class="page type-interior advancedConfigurationPage" data-helpurl="https://github.com/MediaBrowser/Wiki/wiki/Notifications">
+    <div id="notificationSettingPage" data-role="page" class="page type-interior notificationConfigurationPage" data-helpurl="https://github.com/MediaBrowser/Wiki/wiki/Notifications">

        <div data-role="content">
            <div class="content-primary">

-                <div data-role="controlgroup" data-type="horizontal" class="localnav" data-mini="true">
-                    <a href="advanced.html" data-role="button">${TabGeneral}</a>
-                    <a href="notificationsettings.html" data-role="button" class="ui-btn-active">${TabNotifications}</a>
-                    <a href="scheduledtasks.html" data-role="button">${TabScheduledTasks}</a>
-                </div>
-
                <h2 class="notificationType" style="margin-bottom: 0;"></h2>

                <form class="notificationSettingForm">
--- a/dashboard-ui/notificationsettings.html
+++ b/dashboard-ui/notificationsettings.html
@ -1,20 +1,14 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <title>${TitleAdvanced}</title>
+    <title>${TitleNotifications}</title>
 </head>
 <body>
-    <div id="notificationSettingsPage" data-role="page" class="page type-interior advancedConfigurationPage" data-helpurl="https://github.com/MediaBrowser/Wiki/wiki/Notifications">
+    <div id="notificationSettingsPage" data-role="page" class="page type-interior notificationConfigurationPage" data-helpurl="https://github.com/MediaBrowser/Wiki/wiki/Notifications">

        <div data-role="content">
            <div class="content-primary">

-                <div data-role="controlgroup" data-type="horizontal" class="localnav" data-mini="true">
-                    <a href="advanced.html" data-role="button">${TabGeneral}</a>
-                    <a href="#" data-role="button" class="ui-btn-active">${TabNotifications}</a>
-                    <a href="scheduledtasks.html" data-role="button">${TabScheduledTasks}</a>
-                </div>
-
                <div class="readOnlyContent">
                    <p>${HeaderNotificationList}</p>
                    <p>${SendNotificationHelp}</p>
--- a/dashboard-ui/scheduledtask.html
+++ b/dashboard-ui/scheduledtask.html
@ -1,19 +1,13 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <title>${TitleAdvanced}</title>
+    <title>${TitleScheduledTasks}</title>
 </head>
 <body>
-    <div id="scheduledTaskPage" data-role="page" class="page type-interior advancedConfigurationPage" data-helpurl="https://github.com/MediaBrowser/Wiki/wiki/Scheduled%20tasks">
+    <div id="scheduledTaskPage" data-role="page" class="page type-interior scheduledTasksConfigurationPage" data-helpurl="https://github.com/MediaBrowser/Wiki/wiki/Scheduled%20tasks">
        <div data-role="content">
            <div class="content-primary">

-                <div data-role="controlgroup" data-type="horizontal" class="localnav" data-mini="true">
-                    <a href="advanced.html" data-role="button">${TabGeneral}</a>
-                    <a href="notificationsettings.html" data-role="button">${TabNotifications}</a>
-                    <a href="scheduledtasks.html" data-role="button" class="ui-btn-active">${TabScheduledTasks}</a>
-                </div>
-
                <div class="readOnlyContent">
                    <h2 class="taskName"></h2>
                    <p id="pTaskDescription"></p>
--- a/dashboard-ui/scheduledtasks.html
+++ b/dashboard-ui/scheduledtasks.html
@ -1,19 +1,13 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <title>${TitleAdvanced}</title>
+    <title>${TitleScheduledTasks}</title>
 </head>
 <body>
-    <div id="scheduledTasksPage" data-role="page" class="page type-interior advancedConfigurationPage" data-helpurl="https://github.com/MediaBrowser/Wiki/wiki/Scheduled%20tasks">
+    <div id="scheduledTasksPage" data-role="page" class="page type-interior scheduledTasksConfigurationPage" data-helpurl="https://github.com/MediaBrowser/Wiki/wiki/Scheduled%20tasks">
        <div data-role="content">
            <div class="content-primary">

-                <div data-role="controlgroup" data-type="horizontal" class="localnav" data-mini="true">
-                    <a href="advanced.html" data-role="button">${TabGeneral}</a>
-                    <a href="notificationsettings.html" data-role="button">${TabNotifications}</a>
-                    <a href="#" data-role="button" class="ui-btn-active">${TabScheduledTasks}</a>
-                </div>
-
                <div class="readOnlyContent">
                    <p>${ScheduledTasksHelp}</p>
                    <div id="divScheduledTasks"></div>
--- a/dashboard-ui/scripts/dashboardgeneral.js
+++ b/dashboard-ui/scripts/dashboardgeneral.js
@ -4,6 +4,15 @@

    function loadPage(page, config, languageOptions) {

+        if (Dashboard.lastSystemInfo) {
+            Dashboard.setPageTitle(Dashboard.lastSystemInfo.ServerName);
+        }
+
+        ApiClient.getSystemInfo().done(function (systemInfo) {
+
+            Dashboard.setPageTitle(systemInfo.ServerName);
+        });
+
        $('#txtServerName', page).val(config.ServerName || '');

        $('#selectLocalizationLanguage', page).html(languageOptions.map(function (l) {
--- a/dashboard-ui/scripts/dashboardpage.js
+++ b/dashboard-ui/scripts/dashboardpage.js
@ -6,6 +6,10 @@

        var page = this;

+        if (Dashboard.lastSystemInfo) {
+            Dashboard.setPageTitle(Dashboard.lastSystemInfo.ServerName);
+        }
+
        DashboardPage.newsStartIndex = 0;

        Dashboard.showLoadingMsg();
@ -73,6 +77,7 @@

        ApiClient.getSystemInfo().done(function (systemInfo) {

+            Dashboard.setPageTitle(systemInfo.ServerName);
            Dashboard.updateSystemInfo(systemInfo);

            $('#appVersionNumber', page).html(Globalize.translate('LabelVersionNumber').replace('{0}', systemInfo.Version));
--- a/dashboard-ui/scripts/site.js
+++ b/dashboard-ui/scripts/site.js
@ -665,30 +665,43 @@ var Dashboard = {

            html += '<div class="sidebarLinks">';

-            var links = Dashboard.getToolsMenuLinks(page);
+            var items = Dashboard.getToolsMenuLinks(page);

-            var i, length, link;
+            var i, length, item;

-            for (i = 0, length = links.length; i < length; i++) {
+            for (i = 0, length = items.length; i < length; i++) {

-                link = links[i];
+                item = items[i];

                if (!user.Policy.IsAdministrator) {
                    break;
                }

-                if (link.divider) {
+                if (item.divider) {
                    html += "<div class='sidebarDivider ui-bar-inherit'></div>";
                }

-                if (link.href) {
+                if (item.href) {

-                    if (link.selected) {
-                        html += '<a class="selectedSidebarLink" href="' + link.href + '">' + link.name + '</a>';
+                    var style = item.color ? ' style="color:' + item.color + '"' : '';
+
+                    if (item.selected) {
+                        html += '<a class="selectedSidebarLink" href="' + item.href + '">';
                    } else {
-                        html += '<a href="' + link.href + '">' + link.name + '</a>';
+                        html += '<a href="' + item.href + '">';
                    }

+                    html += '<span class="fa ' + item.icon + ' sidebarLinkIcon"' + style + '></span>';
+
+                    html += '<span class="sidebarLinkText">';
+                    html += item.name;
+                    html += '</span>';
+                    html += '</a>';
+                } else {
+                    
+                    html += '<div class="sidebarHeader">';
+                    html += item.name;
+                    html += '</div>';
                }
            }

@ -702,24 +715,24 @@ var Dashboard = {

            html += '<p class="libraryPanelHeader" style="margin: 15px 0 15px 15px;"><a href="index.html" class="imageLink"><img src="css/images/mblogoicon.png" /><span style="color:#333;">MEDIA</span><span class="mediaBrowserAccent">BROWSER</span></a></p>';

-            for (i = 0, length = links.length; i < length; i++) {
+            for (i = 0, length = items.length; i < length; i++) {

-                link = links[i];
+                item = items[i];

                if (!user.Policy.IsAdministrator) {
                    break;
                }

-                if (link.divider) {
+                if (item.divider) {
                    html += "<div class='dashboardPanelDivider'></div>";
                }

-                if (link.href) {
+                if (item.href) {

-                    if (link.selected) {
-                        html += '<a class="selectedDashboardPanelLink dashboardPanelLink" href="' + link.href + '">' + link.name + '</a>';
+                    if (item.selected) {
+                        html += '<a class="selectedDashboardPanelLink dashboardPanelLink" href="' + item.href + '">' + item.name + '</a>';
                    } else {
-                        html += '<a class="dashboardPanelLink" href="' + link.href + '">' + link.name + '</a>';
+                        html += '<a class="dashboardPanelLink" href="' + item.href + '">' + item.name + '</a>';
                    }

                }
@ -739,58 +752,97 @@ var Dashboard = {
        return [{
            name: Globalize.translate('TabServer'),
            href: "dashboard.html",
-            selected: page.hasClass("dashboardHomePage")
+            selected: page.hasClass("dashboardHomePage"),
+            icon: 'fa-dashboard',
+            color: '#38c'
        }, {
            name: Globalize.translate('TabDevices'),
            href: "devices.html",
-            selected: page.hasClass("devicesPage")
+            selected: page.hasClass("devicesPage"),
+            icon: 'fa-tablet',
+            color: '#ECA403'
        }, {
            name: Globalize.translate('TabUsers'),
            href: "userprofiles.html",
-            selected: page.hasClass("userProfilesPage")
+            selected: page.hasClass("userProfilesPage"),
+            icon: 'fa-users',
+            color: '#679C34'
        }, {
            name: Globalize.translate('TabLibrary'),
            divider: true,
            href: "library.html",
-            selected: page.hasClass("mediaLibraryPage")
+            selected: page.hasClass("mediaLibraryPage"),
+            icon: 'fa-film'
        }, {
            name: Globalize.translate('TabMetadata'),
            href: "metadata.html",
-            selected: page.hasClass('metadataConfigurationPage')
+            selected: page.hasClass('metadataConfigurationPage'),
+            icon: 'fa-file-text'
        }, {
            name: Globalize.translate('TabPlayback'),
            href: "playbackconfiguration.html",
-            selected: page.hasClass('playbackConfigurationPage')
+            selected: page.hasClass('playbackConfigurationPage'),
+            icon: 'fa-play-circle'
        }, {
            name: Globalize.translate('TabSync'),
            href: "syncactivity.html",
-            selected: page.hasClass('syncConfigurationPage')
+            selected: page.hasClass('syncConfigurationPage'),
+            icon: 'fa-cloud'
        }, {
            divider: true,
+            name: Globalize.translate('TabExtras')
+        }, {
            name: Globalize.translate('TabAutoOrganize'),
            href: "autoorganizelog.html",
-            selected: page.hasClass("organizePage")
+            selected: page.hasClass("organizePage"),
+            icon: 'fa-files-o',
+            color: '#01C0DD'
        }, {
            name: Globalize.translate('TabDLNA'),
            href: "dlnasettings.html",
-            selected: page.hasClass("dlnaPage")
+            selected: page.hasClass("dlnaPage"),
+            icon: 'fa-film',
+            color: '#E5342E'
        }, {
            name: Globalize.translate('TabLiveTV'),
            href: "livetvstatus.html",
-            selected: page.hasClass("liveTvSettingsPage")
+            selected: page.hasClass("liveTvSettingsPage"),
+            icon: 'fa-video-camera',
+            color: '#293AAE'
+        }, {
+            name: Globalize.translate('TabNotifications'),
+            href: "notificationsettings.html",
+            selected: page.hasClass("notificationConfigurationPage"),
+            icon: 'fa-wifi',
+            color: 'brown'
        }, {
            name: Globalize.translate('TabPlugins'),
            href: "plugins.html",
-            selected: page.hasClass("pluginConfigurationPage")
+            selected: page.hasClass("pluginConfigurationPage"),
+            icon: 'fa-plus-circle',
+            color: '#9D22B1'
+        }, {
+            divider: true,
+            name: Globalize.translate('TabExpert')
        }, {
            name: Globalize.translate('TabAdvanced'),
-            divider: true,
            href: "advanced.html",
-            selected: page.hasClass("advancedConfigurationPage")
+            selected: page.hasClass("advancedConfigurationPage"),
+            icon: 'fa-gears',
+            color: '#F16834'
+        }, {
+            name: Globalize.translate('TabScheduledTasks'),
+            href: "scheduledtasks.html",
+            selected: page.hasClass("scheduledTasksConfigurationPage"),
+            icon: 'fa-clock-o',
+            color: '#38c'
        }, {
            name: Globalize.translate('TabHelp'),
+            divider: true,
            href: "support.html",
-            selected: pageElem.id == "supportPage" || pageElem.id == "logPage" || pageElem.id == "supporterPage" || pageElem.id == "supporterKeyPage" || pageElem.id == "aboutPage"
+            selected: pageElem.id == "supportPage" || pageElem.id == "logPage" || pageElem.id == "supporterPage" || pageElem.id == "supporterKeyPage" || pageElem.id == "aboutPage",
+            icon: 'fa-info-circle',
+            color: '#679C34'
        }];

    },
--- a/dashboard-ui/serversecurity.html
+++ b/dashboard-ui/serversecurity.html
@ -1,23 +1,22 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <title>${TitleServer}</title>
+    <title>${TitleAdvanced}</title>
 </head>
 <body>
-    <div id="serverSecurityPage" data-role="page" class="page type-interior dashboardHomePage">
+    <div id="serverSecurityPage" data-role="page" class="page type-interior advancedConfigurationPage">

        <div data-role="content">
            <div class="content-primary">

                <div data-role="controlgroup" data-type="horizontal" class="localnav" data-mini="true">
-                    <a href="dashboard.html" data-role="button">${TabDashboard}</a>
-                    <a href="dashboardgeneral.html" data-role="button">${TabSettings}</a>
+                    <a href="advanced.html" data-role="button">${TabGeneral}</a>
                    <a href="#" data-role="button" class="ui-btn-active">${TabSecurity}</a>
                </div>

                <h2 style="margin-top: -10px;">
                    <span>${HeaderApiKeys}</span>
-                    <button class="btnNewKey" style="float: right; margin: -4px 0 0; vertical-align: top;" data-icon="plus" data-mini="true" data-inline="true" type="button">${ButtonNew}</button>
+                    <button class="btnNewKey" style="margin: -4px 0 0 2em; vertical-align: top;" data-icon="plus" data-mini="true" data-inline="true" type="button">${ButtonNew}</button>
                </h2>
                <p>${HeaderApiKeysHelp}</p>
                <br />