Skip to content

A
apollo
Commit df2b94a8 by lepdou
Options

namespace 样式重构

parent 78b8da7a
Showing with 110 additions and 65 deletions
apollo-portal/src/main/resources/static/config.html
...@@ -67,7 +67,7 @@ ...@@ -67,7 +67,7 @@
</section> </section>
<a class="list-group-item" ng-show="missEnvs.length > 0" ng-click="createAppInMissEnv()"> <a class="list-group-item" ng-show="missEnvs.length > 0" ng-click="createAppInMissEnv()">
<div class="row"> <div class="row">
<div class="col-md-2"><img src="img/plus.png" class="i-20"></div> <div class="col-md-2"><img src="img/plus-orange.png" class="i-20"></div>
<div class="col-md-7 hidden-xs"> <div class="col-md-7 hidden-xs">
<p class="btn-title">补缺环境</p> <p class="btn-title">补缺环境</p>
</div> </div>
...@@ -75,7 +75,7 @@ ...@@ -75,7 +75,7 @@
</a> </a>
<a class="list-group-item" href="#" disabled="disabled" ng-show="false"> <a class="list-group-item" href="#" disabled="disabled" ng-show="false">
<div class="row"> <div class="row">
<div class="col-md-2"><img src="../img/plus.png" class="i-20"></div> <div class="col-md-2"><img src="../img/plus-orange.png" class="i-20"></div>
<div class="col-md-7 hidden-xs"> <div class="col-md-7 hidden-xs">
<p class="btn-title">添加集群</p> <p class="btn-title">添加集群</p>
</div> </div>
...@@ -85,7 +85,7 @@ ...@@ -85,7 +85,7 @@
<a class="list-group-item" href="namespace.html?#/appid={{pageContext.appId}}&type=link" <a class="list-group-item" href="namespace.html?#/appid={{pageContext.appId}}&type=link"
ng-show="hasCreateNamespacePermission"> ng-show="hasCreateNamespacePermission">
<div class="row"> <div class="row">
<div class="col-md-2"><img src="img/plus.png" class="i-20"></div> <div class="col-md-2"><img src="img/plus-orange.png" class="i-20"></div>
<div class="col-md-7 hidden-xs"> <div class="col-md-7 hidden-xs">
<p class="btn-title">添加Namespace</p> <p class="btn-title">添加Namespace</p>
</div> </div>
...@@ -113,89 +113,103 @@ ...@@ -113,89 +113,103 @@
<header class="panel-heading"> <header class="panel-heading">
<div class="row"> <div class="row">
<div class="col-md-4"> <div class="col-md-4">
<b ng-bind="namespace.namespace.namespaceName"></b> <b ng-bind="namespace.namespace.namespaceName" style="font-size: 20px;"></b>
<span class="label label-primary" <span class="label label-primary" ng-show="namespace.itemModifiedCnt > 0">有修改
ng-show="namespace.itemModifiedCnt > 0">有修改 <span class="badge label" ng-bind="namespace.itemModifiedCnt"></span></span>
<span class="badge" ng-bind="namespace.itemModifiedCnt"></span></span>
</div> </div>
<div class="col-md-4"> <div class="col-md-8 text-right">
<div class="btn-toolbar" role="toolbar" 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"
ng-show="namespace.hasReleasePermission || namespace.hasModifyPermission"
ng-disabled="namespace.isTextEditing" ng-disabled="namespace.isTextEditing"
ng-click="prepareReleaseNamespace(namespace)">发布 ng-click="prepareReleaseNamespace(namespace)">
<img src="img/release.png">
发布
<!--ng-show="namespace.hasReleasePermission"-->
</button> </button>
<button type="button" <button type="button"
class="btn btn-default btn-sm J_tableview_btn" disabled class="btn btn-default btn-sm J_tableview_btn" disabled
ng-show="namespace.hasReleasePermission">回滚 ng-show="namespace.hasReleasePermission">
<img src="img/rollback.png">
回滚
</button> </button>
<button type="button" <button type="button" class="btn btn-default btn-sm J_tableview_btn"
class="btn btn-default btn-sm J_historyview_btn" disabled>查看历史版本 href="/namespace/role.html?#/appid={{pageContext.appId}}&namespaceName={{namespace.namespace.namespaceName}}"
ng-show="hasAssignUserPermission">
<img src="img/release-history.png">
发布历史
</button> </button>
<a type="button" class="btn btn-default btn-sm J_tableview_btn" <a type="button" class="btn btn-default btn-sm J_tableview_btn"
href="/namespace/role.html?#/appid={{pageContext.appId}}&namespaceName={{namespace.namespace.namespaceName}}" href="/namespace/role.html?#/appid={{pageContext.appId}}&namespaceName={{namespace.namespace.namespaceName}}"
ng-show="hasAssignUserPermission">授权 ng-show="hasAssignUserPermission">
<img src="img/assign.png">
授权
</a> </a>
<a type="button" <a type="button" 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}}" href="/namespace/role.html?#/appid={{pageContext.appId}}&namespaceName={{namespace.namespace.namespaceName}}"
class="btn btn-default btn-sm J_tableview_btn" ng-show="hasAssignUserPermission">
ng-show="namespace.hasModifyPermission">同步 <img src="img/sync.png">
同步配置
</a> </a>
</div> </div>
</div> </div>
</div> </header>
<div class="col-md-3"> <header class="panel-heading second-panel-heading" style="border-bottom: 0px">
<div class="btn-toolbar" role="toolbar" aria-label="..."> <div class="row">
<div class="btn-group" role="group" aria-label="..."> <div class="col-md-5 pull-left">
<button type="button" <ul class="nav nav-tabs">
class="btn btn-default btn-sm J_tableview_btn" <li role="presentation" ng-click="switchView(namespace, 'table')">
ng-click="switchView(namespace, 'text')">文本 <a ng-class="{node_active:namespace.viewType == 'table'}">
</button> <img src="img/table.png">
<button type="button" 表格
class="btn btn-default btn-sm J_tableview_btn" </a>
ng-click="switchView(namespace, 'table')">表格 </li>
</button> <li role="presentation" ng-click="switchView(namespace, 'text')">
<button type="button" <a ng-class="{node_active:namespace.viewType == 'text'}">
class="btn btn-default btn-sm J_historyview_btn" <img src="img/text.png">
ng-click="switchView(namespace, 'history')" disabled> 文本
</a>
</li>
<li role="presentation" ng-click="switchView(namespace, 'history')">
<a ng-class="{node_active:namespace.viewType == 'history'}">
<img src="img/change.png">
更改历史 更改历史
</button> </a>
</div> </li>
</div> </ul>
</div> </div>
<div class="col-md-1 text-right"> <div class="col-md-7 text-right">
<a data-tooltip="tooltip" data-placement="bottom" 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-remove" aria-hidden="true"></span> <img src="img/cancel.png" class="ns_btn">
</a> </a>
<a data-tooltip="tooltip" data-placement="bottom" title="修改配置" <a data-tooltip="tooltip" data-placement="bottom" title="修改配置"
ng-show="!namespace.isTextEditing && namespace.viewType == 'text' && namespace.hasModifyPermission" ng-show="!namespace.isTextEditing && namespace.viewType == 'text' && namespace.hasModifyPermission"
ng-click="toggleTextEditStatus(namespace)"> ng-click="toggleTextEditStatus(namespace)">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> <img src="img/edit.png" class="ns_btn">
</a> </a>
&nbsp; &nbsp;
<a data-tooltip="tooltip" data-placement="bottom" title="提交修改" <a data-tooltip="tooltip" data-placement="bottom" title="提交修改"
data-toggle="modal" data-target="#commitModal" data-toggle="modal" data-target="#commitModal"
ng-show="namespace.isTextEditing && namespace.viewType == 'text'" ng-show="namespace.isTextEditing && namespace.viewType == 'text'"
ng-click="setCommitNamespace(namespace)"> ng-click="setCommitNamespace(namespace)">
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span> <img src="img/submit.png" class="ns_btn">
</a> </a>
<a data-tooltip="tooltip" data-placement="bottom" title="添加配置" <button type="button" class="btn btn-default btn-sm"
ng-show="namespace.viewType == 'table' && namespace.hasModifyPermission" ng-show="namespace.viewType == 'table' && namespace.hasModifyPermission"
data-toggle="modal" data-target="#itemModal" data-toggle="modal" data-target="#itemModal"
ng-click="createItem(namespace)"> ng-click="createItem(namespace)">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span> <img src="img/plus.png">
</a> 新增配置
</button>
</div> </div>
</div> </div>
</header> </header>
<!--text view--> <!--text view-->
<!--只读模式下的文本内容,不替换换行符--> <!--只读模式下的文本内容,不替换换行符-->
<textarea class="form-control" rows="{{namespace.itemCnt}}" style="border-radius: 0px" <textarea class="form-control" rows="{{namespace.itemCnt}}" style="border-radius: 0px"
...@@ -259,25 +273,14 @@ ...@@ -259,25 +273,14 @@
</td> </td>
<td width="10%"> <td width="10%">
<span class="glyphicon glyphicon-eye-open" aria-hidden="true" <img src="img/edit.png" data-tooltip="tooltip" data-placement="bottom" title="修改"
data-tooltip="tooltip" data-placement="bottom" title="查看"
data-toggle="modal" data-target="#itemModal"
ng-click="retrieveItem(namespace, config.item, config.oldValue)">
</span>
&nbsp;
<span class="glyphicon glyphicon-edit" aria-hidden="true"
data-tooltip="tooltip" data-placement="bottom" title="修改"
data-toggle="modal" data-target="#itemModal" data-toggle="modal" data-target="#itemModal"
ng-click="editItem(namespace, config.item)" ng-click="editItem(namespace, config.item)"
ng-show="namespace.hasModifyPermission"> ng-show="namespace.hasModifyPermission">
</span> <img style="margin-left: 5px;" src="img/cancel.png" data-toggle="modal" data-target="#deleteConfirmDialog"
&nbsp;
<span class="glyphicon glyphicon-remove" aria-hidden="true"
data-toggle="modal" data-target="#deleteConfirmDialog"
data-tooltip="tooltip" data-placement="bottom" title="删除" data-tooltip="tooltip" data-placement="bottom" title="删除"
ng-click="preDeleteItem(namespace, config.item.id)" ng-click="preDeleteItem(namespace, config.item.id)"
ng-show="namespace.hasModifyPermission"> ng-show="namespace.hasModifyPermission">
</span>
</td> </td>
</tr> </tr>
......
apollo-portal/src/main/resources/static/styles/common-style.css
...@@ -3,6 +3,7 @@ html, body { ...@@ -3,6 +3,7 @@ html, body {
} }
body { body {
min-width: 960px;
color: #797979; color: #797979;
padding: 0px !important; padding: 0px !important;
margin: 0px !important; margin: 0px !important;
...@@ -165,10 +166,6 @@ table th { ...@@ -165,10 +166,6 @@ table th {
min-height: 500px; min-height: 500px;
} }
#config-info .nav {
background-color: #f5f5f5;
}
#config-edit { #config-edit {
border: 1px solid #ddd; border: 1px solid #ddd;
border-radius: 3px; border-radius: 3px;
...@@ -178,6 +175,7 @@ table th { ...@@ -178,6 +175,7 @@ table th {
border-bottom: 1px solid #ddd; border-bottom: 1px solid #ddd;
} }
.tocify-header { .tocify-header {
font-size: 14px; font-size: 14px;
} }
...@@ -209,12 +207,56 @@ table th { ...@@ -209,12 +207,56 @@ table th {
border: 0px; border: 0px;
} }
.config-item-container .second-panel-heading .ns_btn{
width: 25px;
height: 25px;
}
.config-item-container .second-panel-heading .nav-tabs .node_active{
border-bottom: 3px #1b6d85 solid;
}
.config-item-container .config-items { .config-item-container .config-items {
height: 500px; height: 500px;
overflow: scroll; overflow: scroll;
} }
.namespace-view-table { .config-item-container .panel-heading button img{
width: 12px;
height: 12px;
}
.config-item-container .panel-heading a img{
width: 12px;
height: 12px;
}
.config-item-container .panel-heading li img{
width: 12px;
height: 12px;
}
.config-item-container .second-panel-heading{
height: 45px;
}
.config-item-container .second-panel-heading a{
height: 35px;
color: #555;
font-size: 13px;
margin-bottom: 2px;
}
.second-panel-heading .nav-tabs{
border-bottom: 0px;
}
.namespace-view-table td img{
cursor: pointer;
width: 23px;
height: 23px;
} }
......
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