mirror of
https://github.com/gyurix1968/guacamole-client.git
synced 2025-10-31 00:53:21 +00:00
GUAC-1133: Apply common styling and form to management pages.
This commit is contained in:
Michael Jumper
@@ -211,44 +211,6 @@ div.section {
|
||||
background: inherit;
|
||||
}
|
||||
|
||||
/*
|
||||
* List element fields (editing)
|
||||
*/
|
||||
|
||||
.form .fields th,
|
||||
.form .permissions th {
|
||||
font-weight: normal;
|
||||
vertical-align: middle;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.form h2 {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.form h3 {
|
||||
font-size: 1em;
|
||||
margin-bottom: 0.25em;
|
||||
}
|
||||
|
||||
.form {
|
||||
cursor: auto;
|
||||
animation-name: fadein;
|
||||
-webkit-animation-name: fadein;
|
||||
animation-duration: 0.125s;
|
||||
-webkit-animation-duration: 0.125s;
|
||||
}
|
||||
|
||||
.object-buttons {
|
||||
|
||||
text-align: right;
|
||||
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.1);
|
||||
padding-top: 0.5em;
|
||||
margin: 0.5em;
|
||||
|
||||
}
|
||||
|
||||
/*
|
||||
* List element icons
|
||||
*/
|
||||
|
||||
@@ -30,12 +30,3 @@
|
||||
text-align: center;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.manage .user-add-form {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.manage .user-add-form input.name {
|
||||
max-width: 80%;
|
||||
width: 20em;
|
||||
}
|
||||
|
||||
@@ -28,32 +28,29 @@ THE SOFTWARE.
|
||||
</div>
|
||||
|
||||
<!-- Connection management -->
|
||||
<div class="settings section" ng-show="canManageConnections">
|
||||
<div class="connections">
|
||||
<div class="settings section connections">
|
||||
<p>{{'MANAGE_CONNECTION.HELP_CONNECTIONS' | translate}}</p>
|
||||
|
||||
<p>{{'MANAGE_CONNECTION.HELP_CONNECTIONS' | translate}}</p>
|
||||
<!-- Form action buttons -->
|
||||
<div class="action-buttons">
|
||||
|
||||
<!-- Connection/group creation buttons -->
|
||||
<div class="connection-add-form">
|
||||
<a class="add-connection button"
|
||||
ng-show="canCreateConnections"
|
||||
href="#/manage/connections/">{{'MANAGE_CONNECTION.ACTION_NEW_CONNECTION' | translate}}</a>
|
||||
|
||||
<a class="add-connection button"
|
||||
ng-show="canCreateConnections"
|
||||
href="#/manage/connections/">{{'MANAGE_CONNECTION.ACTION_NEW_CONNECTION' | translate}}</a>
|
||||
<a class="add-connection-group button"
|
||||
ng-show="canCreateConnectionGroups"
|
||||
href="#/manage/connectionGroups/">{{'MANAGE_CONNECTION.ACTION_NEW_CONNECTION_GROUP' | translate}}</a>
|
||||
|
||||
<a class="add-connection-group button"
|
||||
ng-show="canCreateConnectionGroups"
|
||||
href="#/manage/connectionGroups/">{{'MANAGE_CONNECTION.ACTION_NEW_CONNECTION_GROUP' | translate}}</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- List of accessible connections and groups -->
|
||||
<div class="connection-list">
|
||||
<guac-group-list
|
||||
page-size="25"
|
||||
connection-group="rootGroup"
|
||||
connection-template="'app/manage/templates/connection.html'"
|
||||
connection-group-template="'app/manage/templates/connectionGroup.html'"/>
|
||||
</div>
|
||||
<!-- List of accessible connections and groups -->
|
||||
<div class="connection-list">
|
||||
<guac-group-list
|
||||
page-size="25"
|
||||
connection-group="rootGroup"
|
||||
connection-template="'app/manage/templates/connection.html'"
|
||||
connection-group-template="'app/manage/templates/connectionGroup.html'"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -28,57 +28,40 @@ THE SOFTWARE.
|
||||
</div>
|
||||
|
||||
<!-- User Session management -->
|
||||
<div class="settings section">
|
||||
<div class="sessions">
|
||||
<div class="settings section sessions">
|
||||
<p>{{'MANAGE_SESSION.HELP_SESSIONS' | translate}}</p>
|
||||
|
||||
<p>{{'MANAGE_SESSION.HELP_SESSIONS' | translate}}</p>
|
||||
|
||||
<!-- Form action buttons -->
|
||||
<div class="action-buttons">
|
||||
<button class="delete-sessions danger" ng-disabled="!canDeleteSessions()" ng-click="deleteSessions()">{{'MANAGE_SESSION.ACTION_DELETE' | translate}}</button>
|
||||
</div>
|
||||
|
||||
<!-- List of current user sessions -->
|
||||
<table class="session-list">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>
|
||||
{{'MANAGE_SESSION.TABLE_HEADER_SESSION_USERNAME' | translate}}
|
||||
</th>
|
||||
<th>
|
||||
{{'MANAGE_SESSION.TABLE_HEADER_SESSION_STARTDATE' | translate}}
|
||||
</th>
|
||||
<th>
|
||||
{{'MANAGE_SESSION.TABLE_HEADER_SESSION_REMOTEHOST' | translate}}
|
||||
</th>
|
||||
<th>
|
||||
{{'MANAGE_SESSION.TABLE_HEADER_SESSION_CONNECTION_NAME' | translate}}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr ng-repeat="wrapper in wrapperPage" class="session">
|
||||
<td>
|
||||
<input ng-change="wrapperSelectionChange(wrapper)" type="checkbox" ng-model="wrapper.checked" />
|
||||
</td>
|
||||
<td>
|
||||
{{wrapper.tunnel.username}}
|
||||
</td>
|
||||
<td>
|
||||
{{wrapper.tunnel.startDate | date:'short'}}
|
||||
</td>
|
||||
<td>
|
||||
{{wrapper.tunnel.remoteHost}}
|
||||
</td>
|
||||
<td>
|
||||
{{connections[wrapper.tunnel.identifier].name}}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<guac-pager page="wrapperPage" page-size="25" items="wrappers | orderBy : 'username'"></guac-pager>
|
||||
<!-- Form action buttons -->
|
||||
<div class="action-buttons">
|
||||
<button class="delete-sessions danger" ng-disabled="!canDeleteSessions()" ng-click="deleteSessions()">{{'MANAGE_SESSION.ACTION_DELETE' | translate}}</button>
|
||||
</div>
|
||||
|
||||
<!-- List of current user sessions -->
|
||||
<table class="session-list">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>{{'MANAGE_SESSION.TABLE_HEADER_SESSION_USERNAME' | translate}}</th>
|
||||
<th>{{'MANAGE_SESSION.TABLE_HEADER_SESSION_STARTDATE' | translate}}</th>
|
||||
<th>{{'MANAGE_SESSION.TABLE_HEADER_SESSION_REMOTEHOST' | translate}}</th>
|
||||
<th>{{'MANAGE_SESSION.TABLE_HEADER_SESSION_CONNECTION_NAME' | translate}}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr ng-repeat="wrapper in wrapperPage" class="session">
|
||||
<td>
|
||||
<input ng-change="wrapperSelectionChange(wrapper)" type="checkbox" ng-model="wrapper.checked" />
|
||||
</td>
|
||||
<td>{{wrapper.tunnel.username}}</td>
|
||||
<td>{{wrapper.tunnel.startDate | date:'short'}}</td>
|
||||
<td>{{wrapper.tunnel.remoteHost}}</td>
|
||||
<td>{{connections[wrapper.tunnel.identifier].name}}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<!-- Pager for session list -->
|
||||
<guac-pager page="wrapperPage" page-size="25" items="wrappers | orderBy : 'username'"></guac-pager>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -28,33 +28,29 @@ THE SOFTWARE.
|
||||
</div>
|
||||
|
||||
<!-- User management -->
|
||||
<div class="settings section" ng-show="canManageUsers">
|
||||
<div class="users">
|
||||
|
||||
<p>{{'MANAGE_USER.HELP_USERS' | translate}}</p>
|
||||
|
||||
<!-- User creation form -->
|
||||
<div class="user-add-form" ng-show="canCreateUsers">
|
||||
<input type="text" ng-model="newUsername" class="name username" autocorrect="off" autocapitalize="off"/>
|
||||
<button class="add-user" ng-click="newUser()">{{'MANAGE_USER.ACTION_NEW_USER' | translate}}</button>
|
||||
</div>
|
||||
|
||||
<!-- List of users this user has access to -->
|
||||
<div class="user-list">
|
||||
<div ng-repeat="user in userPage" class="user list-item">
|
||||
<a ng-href="#/manage/users/{{user.username}}">
|
||||
<div class="caption">
|
||||
<div class="icon user"></div>
|
||||
<span class="name">{{user.username}}</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Pager controls for user list -->
|
||||
<guac-pager page="userPage" page-size="25" items="users | orderBy : 'username'"></guac-pager>
|
||||
<div class="settings section users">
|
||||
<p>{{'MANAGE_USER.HELP_USERS' | translate}}</p>
|
||||
|
||||
<!-- Form action buttons -->
|
||||
<div class="action-buttons" ng-show="canCreateUsers">
|
||||
<input type="text" ng-model="newUsername" class="name username" autocorrect="off" autocapitalize="off"/>
|
||||
<button class="add-user" ng-click="newUser()">{{'MANAGE_USER.ACTION_NEW_USER' | translate}}</button>
|
||||
</div>
|
||||
|
||||
<!-- List of users this user has access to -->
|
||||
<div class="user-list">
|
||||
<div ng-repeat="user in userPage" class="user list-item">
|
||||
<a ng-href="#/manage/users/{{user.username}}">
|
||||
<div class="caption">
|
||||
<div class="icon user"></div>
|
||||
<span class="name">{{user.username}}</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Pager controls for user list -->
|
||||
<guac-pager page="userPage" page-size="25" items="users | orderBy : 'username'"></guac-pager>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
Reference in New Issue
Block a user