app mgmt app level design enhancements

diff --git a/core/css/styles.css b/core/css/styles.css
index cbce78c525bb270ce9b3f928b2ffd917b396be4f..b1df8d1a8a2ba85ef52b30a8f72753d23de8dd0d 100644 (file)
--- a/core/css/styles.css
+++ b/core/css/styles.css
@@ -670,7 +670,7 @@ label.infield {
 }
 
 .warning-input {
-       border-color: #cc3333 !important;
+       border-color: #ce3702 !important;
 }
 
 /* Fixes for log in page, TODO should be removed some time */

diff --git a/settings/css/settings.css b/settings/css/settings.css
index eb6b0f54053a269ba0e4cb6f0c5c998f833d7332..999a7f9ea4a8a3440bf38d6b6f1eefd0a222459d 100644 (file)
--- a/settings/css/settings.css
+++ b/settings/css/settings.css
@@ -194,38 +194,42 @@ input.userFilter {width: 200px;}
        background: #fbb;
 }
 
-.recommendedapp {
-       font-size: 11px;
-       background-position: left center;
-       padding-left: 18px;
-       vertical-align: top;
+span.version {
+       margin-left: 1em;
+       margin-right: 1em;
+       color: #555;
 }
-span.version { margin-left:1em; margin-right:1em; color:#555; }
 
 #app-navigation .app-external,
-.app-version,
-.recommendedapp {
+.app-version {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
        filter: alpha(opacity=50);
        opacity: .5;
 }
 
 .app-level {
-       color: white;
+       margin-top: 8px;
 }
-
-.app-level .official, .app-level .approved {
-       background-color: #E8C805;
-       border-radius: 2px;
-       margin-left: 5px;
-       padding: 3px;
+.app-level span {
+       color: #555;
+       background-color: transparent;
+       border: 1px solid #555;
+       border-radius: 3px;
+       padding: 3px 6px;
+}
+.app-level .official {
+       border-color: #37ce02;
+       background-position: left center;
+       background-position: 5px center;
+       padding-left: 25px;
+}
+.app-level .approved {
+       border-color: #e8c805;
 }
-
 .app-level .experimental {
-       background-color: #F02405;
-       border-radius: 2px;
-       margin-left: 5px;
-       padding: 3px;
+       background-color: #ce3702;
+       border-color: #ce3702;
+       color: #fff;
 }
 
 #apps-list {
@@ -235,6 +239,9 @@ span.version { margin-left:1em; margin-right:1em; color:#555; }
 .section {
        position: relative;
 }
+.section h2.app-name {
+       margin-bottom: 8px;
+}
 .app-image {
        float: left;
        padding-right: 10px;
@@ -254,8 +261,7 @@ span.version { margin-left:1em; margin-right:1em; color:#555; }
 .app-name,
 .app-version,
 .app-score,
-.app-level,
-.recommendedapp {
+.app-level {
        display: inline-block;
 }
 
@@ -286,7 +292,7 @@ span.version { margin-left:1em; margin-right:1em; color:#555; }
 
 .app-dependencies {
        margin-top: 10px;
-       color: #c33;
+       color: #ce3702;
 }
 
 .missing-dependencies {
@@ -321,7 +327,7 @@ table.grid td.date{
 #security-warning li {
        list-style: initial;
        margin: 10px 0;
-       color: #c33;
+       color: #ce3702;
 }
 #shareAPI p { padding-bottom: 0.8em; }
 #shareAPI input#shareapiExpireAfterNDays {width: 25px;}
@@ -372,12 +378,12 @@ table.grid td.date{
 }
 
 span.success {
-        background: #37ce02;
-        border-radius: 3px;
+        background: #37ce02;
+        border-radius: 3px;
 }
 
 span.error {
-        background: #ce3702;
+        background: #ce3702;
 }
 
 

diff --git a/settings/js/apps.js b/settings/js/apps.js
index f54611369b3b6b6eb1414592ac5cd8c1c73cefdc..8afde558709ef4c7957a5b21e920dc420c99bf4a 100644 (file)
--- a/settings/js/apps.js
+++ b/settings/js/apps.js
@@ -12,7 +12,7 @@ Handlebars.registerHelper('score', function() {
 Handlebars.registerHelper('level', function() {
        if(typeof this.level !== 'undefined') {
                if(this.level === 200) {
-                       return new Handlebars.SafeString('<span class="official">Official</span>');
+                       return new Handlebars.SafeString('<span class="official icon-checkmark">Official</span>');
                } else if(this.level === 100) {
                        return new Handlebars.SafeString('<span class="approved">Approved</span>');
                } else {

diff --git a/settings/templates/apps.php b/settings/templates/apps.php
index b9459e0bd54617223ef482f16c96ea6855692073..1629a46416d74e63f0e8debf4a8bc66a015533c6 100644 (file)
--- a/settings/templates/apps.php
+++ b/settings/templates/apps.php
@@ -59,9 +59,6 @@ script(
        {{/if}}
        <h2 class="app-name"><a href="{{detailpage}}" target="_blank">{{name}}</a></h2>
        <div class="app-version"> {{version}}</div>
-       <div class="app-level">
-               {{{level}}}
-       </div>
        {{#if profilepage}}<a href="{{profilepage}}" target="_blank" rel="noreferrer">{{/if}}
        <div class="app-author"><?php p($l->t('by')); ?> {{author}}
                {{#if licence}}
@@ -72,9 +69,9 @@ script(
        {{#if score}}
        <div class="app-score">{{{score}}}</div>
        {{/if}}
-       {{#if internalclass}}
-       <div class="{{internalclass}} icon-checkmark">{{internallabel}}</div>
-       {{/if}}
+       <div class="app-level">
+               {{{level}}}
+       </div>
        <div class="app-detailpage"></div>
 
        <div class="app-description-container hidden">
@@ -141,7 +138,7 @@ script(
                        <button class="settings-button" data-apps-slide-toggle="#app-settings-content"></button>
                </div>
 
-               <div id="app-settings-content" style="color: #c33">
+               <div id="app-settings-content" style="color: #ce3702">
                        <input type="checkbox" id="enable-experimental-apps" <?php if($_['experimentalEnabled']) { print_unescaped('checked="checked"'); }?>>
                        <label for="enable-experimental-apps"><?php p($l->t('Enable experimental apps')) ?></label>
                        <p>