Skip to content

A
apollo
Commit cf0ab2f2 by lepdou
Options

Merge pull request #181 from lepdou/namespace

样式优化
parents 9c84dccb d5e09898
Showing with 68 additions and 37 deletions
apollo-portal/src/main/resources/static/config.html
...@@ -22,6 +22,7 @@ ...@@ -22,6 +22,7 @@
<!--具体配置信息--> <!--具体配置信息-->
<div class="row config-info-container"> <div class="row config-info-container">
<!--tag导航--> <!--tag导航-->
<div class="col-md-3" ng-controller="ConfigBaseInfoController"> <div class="col-md-3" ng-controller="ConfigBaseInfoController">
<div id="treeview"></div> <div id="treeview"></div>
...@@ -124,6 +125,7 @@ ...@@ -124,6 +125,7 @@
</div> </div>
</div> </div>
<!--namespaces-->
<div class="col-md-9 config-item-container" ng-controller="ConfigNamespaceController"> <div class="col-md-9 config-item-container" ng-controller="ConfigNamespaceController">
<div ng-repeat="namespace in namespaces"> <div ng-repeat="namespace in namespaces">
<div class="panel"> <div class="panel">
...@@ -131,10 +133,10 @@ ...@@ -131,10 +133,10 @@
<div class="row"> <div class="row">
<div class="col-md-4"> <div class="col-md-4">
<b>{{namespace.namespace.namespaceName}}</b> <b>{{namespace.namespace.namespaceName}}</b>
<span class="label label-info" ng-show="namespace.itemModifiedCnt > 0">有修改,可发布 <span class="label label-primary" ng-show="namespace.itemModifiedCnt > 0">有修改
<span class="badge">{{namespace.itemModifiedCnt}}</span></span> <span class="badge">{{namespace.itemModifiedCnt}}</span></span>
</div> </div>
<div class="col-md-7"> <div class="col-md-4">
<div class="btn-toolbar" role="toolbar" aria-label="..."> <div class="btn-toolbar" role="toolbar" aria-label="...">
<div class="btn-group" role="group" aria-label="..."> <div class="btn-group" role="group" aria-label="...">
<button type="button" data-toggle="modal" data-target="#releaseModal" <button type="button" data-toggle="modal" data-target="#releaseModal"
...@@ -142,25 +144,26 @@ ...@@ -142,25 +144,26 @@
ng-disabled="namespace.isTextEditing" ng-disabled="namespace.isTextEditing"
ng-click="prepareReleaseNamespace(namespace)">发布 ng-click="prepareReleaseNamespace(namespace)">发布
</button> </button>
<!--<button type="button"--> <button type="button"
<!--class="btn btn-default btn-sm J_tableview_btn">回滚--> class="btn btn-default btn-sm J_tableview_btn">回滚
<!--</button>--> </button>
<!--<button type="button"--> <button type="button"
<!--class="btn btn-default btn-sm J_historyview_btn">--> class="btn btn-default btn-sm J_historyview_btn">
<!--查看历史版本--> 查看历史版本
<!--</button>--> </button>
</div> <button type="button"
<div class="btn-group" role="group" aria-label="..."> class="btn btn-default btn-sm J_tableview_btn">授权
<div class="btn-group" role="group"> </button>
<!--<button type="button"--> <a type="button" target="_blank"
<!--class="btn btn-default btn-sm J_tableview_btn">授权--> href="config/sync.html?#/appid={{pageContext.appId}}&env={{pageContext.env}}&clusterName={{pageContext.clusterName}}&namespaceName={{namespace.namespace.namespaceName}}"
<!--</button>--> class="btn btn-default btn-sm J_tableview_btn">同步
<a type="button" target="_blank" </a>
href="config/sync.html?#/appid={{pageContext.appId}}&env={{pageContext.env}}&clusterName={{pageContext.clusterName}}&namespaceName={{namespace.namespace.namespaceName}}"
class="btn btn-default btn-sm J_tableview_btn">同步
</a>
</div>
</div> </div>
</div>
</div>
<div class="col-md-3">
<div class="btn-toolbar" role="toolbar" aria-label="...">
<div class="btn-group" role="group" aria-label="..."> <div class="btn-group" role="group" aria-label="...">
<button type="button" <button type="button"
class="btn btn-default btn-sm J_tableview_btn" class="btn btn-default btn-sm J_tableview_btn"
...@@ -170,27 +173,27 @@ ...@@ -170,27 +173,27 @@
class="btn btn-default btn-sm J_tableview_btn" class="btn btn-default btn-sm J_tableview_btn"
ng-click="switchView(namespace, 'table')">表格 ng-click="switchView(namespace, 'table')">表格
</button> </button>
<!--<button type="button"--> <button type="button"
<!--class="btn btn-default btn-sm J_historyview_btn"--> class="btn btn-default btn-sm J_historyview_btn"
<!--ng-click="switchView(namespace, 'history')">--> ng-click="switchView(namespace, 'history')">
<!--更改日志--> 更改历史
<!--</button>--> </button>
</div> </div>
</div> </div>
</div> </div>
<div class="col-md-1 text-right"> <div class="col-md-1 text-right">
<a data-toggle="tooltip" data-placement="top" title="取消修改" <a data-tooltip="tooltip" data-placement="bottom" title="取消修改"
ng-show="namespace.isTextEditing" ng-click="toggleTextEditStatus(namespace)"> ng-show="namespace.isTextEditing" ng-click="toggleTextEditStatus(namespace)">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span> <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</a> </a>
<a data-toggle="tooltip" data-placement="top" title="修改配置" <a data-tooltip="tooltip" data-placement="bottom" title="修改配置"
ng-show="!namespace.isTextEditing && namespace.viewType == 'text'" ng-show="!namespace.isTextEditing && namespace.viewType == 'text'"
ng-click="toggleTextEditStatus(namespace)"> ng-click="toggleTextEditStatus(namespace)">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
</a> </a>
&nbsp; &nbsp;
<a data-toggle="modal" data-target="#commitModal" <a data-tooltip="tooltip" data-placement="bottom" title="提交修改"
data-toggle="modal" data-target="#commitModal"
ng-show="namespace.isTextEditing" ng-click="saveDraft(namespace)"> ng-show="namespace.isTextEditing" ng-click="saveDraft(namespace)">
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span> <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
</a> </a>
...@@ -199,7 +202,7 @@ ...@@ -199,7 +202,7 @@
</header> </header>
<!--text view--> <!--text view-->
<textarea class="form-control" rows="{{namespace.itemCnt}}" <textarea class="form-control" rows="{{namespace.itemCnt}}" style="border-radius: 0px"
ng-show="namespace.viewType == 'text'" ng-show="namespace.viewType == 'text'"
ng-disabled="!namespace.isTextEditing" ng-model="namespace.text"> ng-disabled="!namespace.isTextEditing" ng-model="namespace.text">
{{namespace.text}} {{namespace.text}}
......
apollo-portal/src/main/resources/static/scripts/PageCommon.js
...@@ -10,3 +10,7 @@ $(document).ready(function () { ...@@ -10,3 +10,7 @@ $(document).ready(function () {
zindex: '1000' zindex: '1000'
}); });
}); });
$(function () {
$('[data-toggle="tooltip"]').tooltip()
});
apollo-portal/src/main/resources/static/scripts/controller/app/ConfigBaseInfoController.js
...@@ -42,7 +42,7 @@ application_module.controller("ConfigBaseInfoController", ...@@ -42,7 +42,7 @@ application_module.controller("ConfigBaseInfoController",
navTree.push(node); navTree.push(node);
}); });
$('#treeview').treeview({ $('#treeview').treeview({
color: "#428bca", color: "#797979",
showBorder: true, showBorder: true,
data: navTree, data: navTree,
levels: 99, levels: 99,
......
apollo-portal/src/main/resources/static/scripts/controller/app/ConfigNamespaceController.js
...@@ -33,6 +33,9 @@ application_module.controller("ConfigNamespaceController", ...@@ -33,6 +33,9 @@ application_module.controller("ConfigNamespaceController",
item.isTextEditing = false; item.isTextEditing = false;
}); });
} }
setInterval(function () {
$('[data-tooltip="tooltip"]').tooltip();
},2500);
}, function (result) { }, function (result) {
toastr.error(AppUtil.errorMsg(result), "加载配置信息出错"); toastr.error(AppUtil.errorMsg(result), "加载配置信息出错");
......
apollo-portal/src/main/resources/static/styles/common-style.css
...@@ -15,17 +15,17 @@ a { ...@@ -15,17 +15,17 @@ a {
cursor: pointer; cursor: pointer;
} }
.i-20{ .i-20 {
height: 20px; height: 20px;
width: 20px; width: 20px;
} }
.i-25-20{ .i-25-20 {
height: 20px; height: 20px;
width: 25px; width: 25px;
} }
.i-15{ .i-15 {
height: 15px; height: 15px;
width: 15px; width: 15px;
} }
...@@ -109,6 +109,9 @@ table th { ...@@ -109,6 +109,9 @@ table th {
margin-top: 20px; margin-top: 20px;
} }
.node-treeview{
color: #797979;
}
.apps .apps-description { .apps .apps-description {
color: gray; color: gray;
font-family: "Apple Color Emoji"; font-family: "Apple Color Emoji";
...@@ -150,7 +153,6 @@ table th { ...@@ -150,7 +153,6 @@ table th {
#config-info { #config-info {
min-height: 500px; min-height: 500px;
/*background-color: #ffffff;*/
} }
#config-info .nav { #config-info .nav {
...@@ -182,6 +184,24 @@ table th { ...@@ -182,6 +184,24 @@ table th {
padding-top: 19px; padding-top: 19px;
} }
.config-item-container .panel{
border-radius: 0px;
}
.config-item-container .panel-heading b {
font-size: 18px;
}
.config-item-container .panel-heading .badge {
padding: 1px 4px;
background: #ffffff;
color: #0f0f0f;
}
.config-item-container .form-control[disabled] {
background: #ffffff;
border: 0px;
}
.config-item-container .config-items { .config-item-container .config-items {
height: 500px; height: 500px;
overflow: scroll; overflow: scroll;
...@@ -195,10 +215,11 @@ table th { ...@@ -195,10 +215,11 @@ table th {
table-layout: fixed; table-layout: fixed;
} }
.namespace-view-table tr{ .namespace-view-table tr {
cursor: pointer; cursor: pointer;
} }
.namespace-view-table td { .namespace-view-table td {
word-wrap: break-word; word-wrap: break-word;
} }
...@@ -258,7 +279,7 @@ table th { ...@@ -258,7 +279,7 @@ table th {
padding-bottom: 4px; padding-bottom: 4px;
} }
.list-group-item .btn-title{ .list-group-item .btn-title {
color: gray; color: gray;
font-family: "Apple Color Emoji"; font-family: "Apple Color Emoji";
font-size: 16px; font-size: 16px;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment