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