style: break out styles to classes WIP
authorReidar Cederqvist <reidar.cederqvist@gmail.com>
Wed, 21 Feb 2018 15:27:16 +0000 (16:27 +0100)
committerReidar Cederqvist <reidar.cederqvist@gmail.com>
Wed, 21 Mar 2018 12:13:34 +0000 (13:13 +0100)
juci/src/css/colors.less
juci/src/css/config.less
juci/src/css/theme.less
juci/src/css/widgets.less
juci/src/widgets/juci-config.js
juci/src/widgets/juci-errors.html
juci/src/widgets/juci-errors.js
juci/src/widgets/juci-expandable.html

index 0a75fea..217eb91 100644 (file)
@@ -1,10 +1,12 @@
 @theme-success-color: #5cb85c;
 @theme-primary-color: #F1C100;
+@theme-warning-color: #ffa500;
+@theme-error-color: #E62f39;
+@theme-disabled-color: #34485d;
 @theme-primary-text-color: #FFF;
 @theme-heading-color: #66989C;
 @theme-link-color: #34485d;
 @theme-detail-color: #E62f39;
-@theme-error-color: #E62f39;
 @theme-error-background-color: #f2dede;
 @theme-error-border-color: #ebccd1;
 @theme-div-error-color: #a94442;
index 80c6d82..b4144d9 100644 (file)
@@ -70,7 +70,3 @@
        border-bottom: 1px solid #ccc;
        clear: both;
 }
-
-.juci-config-clear-both {
-       clear: both;
-}
index 7fda404..9a2c3cf 100644 (file)
@@ -43,13 +43,33 @@ body {
        background-color: lighten(@theme-primary-color, 10%);
        border-color: lighten(@theme-primary-color, 10%);
 }
-.label-danger{
+.label-danger, .label-error {
        background-color: @theme-error-color;
 }
-.text-danger{
+
+.label-warning {
+       background-color: @theme-warning-color;
+}
+
+.label-disabled {
+       background-color: @theme-disabled-color;
+}
+
+.label-success{
+       background-color: @theme-success-color;
+}
+.text-danger, .text-error {
        color: @theme-error-color;
 }
 
+.text-warning {
+       color: @theme-warning-color;
+}
+
+.text-disabled {
+       color: @theme-disabled-color;
+}
+
 .text-success{
        color: @theme-success-color;
 }
@@ -100,3 +120,12 @@ h3.panel-title {
 .field-error {
        border-left: 4px solid @theme-error-color;
 }
+.clear-both {
+       clear: both;
+}
+div.juci-error, div.juci-warning {
+       margin-top: 10px;
+       font-size: 0.8em;
+       padding: 5px;
+       border-radius: 5px;
+}
index b3a2611..82c7b1c 100644 (file)
        max-height: 300px;
        overflow: auto;
 }
+
+.juci-expandable-title {
+       font-size: 1.5em;
+       padding-top: 0.4em;
+       font-weight: bold;
+       font-family: inteno;
+}
index 0c996e5..c71ab81 100644 (file)
@@ -122,7 +122,7 @@ JUCI.app
                        '<span ng-hide="changes && changes.length">{{"No unsaved changes" | translate}}</span>'+
                        '<button class="btn btn-lg btn-default col-lg-2 pull-right" ng-click="onCancel()" ng-disabled="changes && !changes.length" title="{{\'Discard all changes and reload\'|translate}}">{{ "Cancel" | translate }}</button>'+
                        '<button class="btn btn-lg btn-primary col-lg-2 pull-right" ng-click="onApply()" title="{{\'Write settings to the router\'|translate}}" ng-disabled="busy"><i class="fa fa-spinner" ng-show="busy"/>{{ "Apply"| translate }}</button>'+
-                       '</div><div class="juci-config-clear-both"></div></div>',
+                       '</div><div class="clear-both"></div></div>',
                replace: true,
                scope: {
                        onPreApply: "&"
index dff3113..dd473df 100644 (file)
@@ -1,10 +1,10 @@
 <div class="alert alert-danger" ng-show="errors.length">
        <div class="row" ng-repeat="err in errors track by $index">
                <div class="col-xs-12">
-                       <i class="fa fa-times-circle" style="color: red"/>
+                       <i class="fa fa-times-circle text-danger" />
                        <!--<button class="btn btn-default pull-right" >Hide</button>-->
                        {{(err.message||err)}}
-                       <div style="clear: both;"></div>
+                       <div class="clear-both"></div>
                </div>
        </div>
 </div>
index 8276051..0123f3c 100644 (file)
@@ -44,7 +44,7 @@ JUCI.app
                scope: {
                        value: "="
                }, 
-               template: '<div ng-show="value" class="alert-danger" style="margin-top: 10px; font-size: 0.8em; padding: 5px; border-radius: 5px">{{value}}</div>', 
+               template: '<div ng-show="value" class="alert-danger juci-error">{{value}}</div>', 
                replace: true
        }; 
 }); 
@@ -56,7 +56,7 @@ JUCI.app
                scope: {
                        value: "="
                },
-               template: '<div ng-show="value" class="alert-warning" style="margin-top: 10px; font-size: 0.8em; padding: 5px; border-radius: 5px">{{value}}</div>',
+               template: '<div ng-show="value" class="alert-warning juci-warning">{{value}}</div>',
                replace: true
        };
 });
index 632cd77..78e72c9 100644 (file)
@@ -1,15 +1,15 @@
 <div class="panel panel-default">
        <div class="panel-heading">
                <div class="btn-group pull-right">
-                       <span ng-show="status == 'ok'" class="btn pull-right"><i style="color: green;" class="fa fa-check-circle fa-2x"></i></span>
-                       <span ng-show="status == 'disabled'" class="btn pull-right"><i style="color: gray;" class="fa fa-times-circle fa-2x"></i></span>
-                       <span ng-show="status == 'progress'" class="btn pull-right"><i style="color: orange;" class="fa fa-spinner fa-2x fa-spin"></i></span>
-                       <span ng-show="status == 'error'" class="btn pull-right"><i style="color: red;" class="fa fa-exclamation-circle fa-2x"></i></span>
+                       <span ng-show="status == 'ok'" class="btn pull-right"><i class="text-success fa fa-check-circle fa-2x"></i></span>
+                       <span ng-show="status == 'disabled'" class="btn pull-right"><i class="text-disabled fa fa-times-circle fa-2x"></i></span>
+                       <span ng-show="status == 'progress'" class="btn pull-right"><i class="text-warning fa fa-spinner fa-2x fa-spin"></i></span>
+                       <span ng-show="status == 'error'" class="btn pull-right"><i class="text-error fa fa-exclamation-circle fa-2x"></i></span>
                </div>
-               <h3 class="panel-title" style="font-size: 1.5em; padding-top: 0.4em; font-weight: bold; font-family: 'inteno';">
-                       {{title }} <i ng-show="open != undefined" class="{{ data.open ? 'fa fa-arrow-circle-up' : 'fa fa-arrow-circle-down' }}" ng-click="toggle_open()" style="float:right; cursor:pointer"></i>
+               <h3 class="panel-title juci-expandable-title">
+                       {{title }} <i ng-show="open != undefined" class="{{ data.open ? 'fa fa-arrow-circle-up' : 'fa fa-arrow-circle-down' }}" ng-click="toggle_open()" class="pull-right clickable"></i>
                </h3>
-               <div style="clear: both;"></div>
+               <div class="clear-both"></div>
        </div>
        <div class="panel-body" ng-transclude ng-show="data.open">
        </div>