vbatts/quay
Archived
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Finish mobilification of org view

Browse source
This commit is contained in:
Joseph Schorr 2015-04-20 14:00:10 -04:00
parent 531ddadb8a
commit f1ea20315a
10 changed files with 153 additions and 112 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
endpoints/api/logs.py
View file

@ -10,6 +10,7 @@ from auth.permissions import AdministerOrganizationPermission, AdministerOrganiz
from auth.auth_context import get_authenticated_user
from data import model
from auth import scopes
from app import avatar
def log_view(log):
@ -25,6 +26,7 @@ def log_view(log):
'kind': 'user',
'name': log.performer.username,
'is_robot': log.performer.robot,
'avatar': avatar.get_data_for_user(log.performer)
}
return view

100
static/css/directives/ui/logs-view.css Normal file
View file

@ -0,0 +1,100 @@
.logs-view-element .header {
padding-bottom: 10px;
border-bottom: 1px solid #eee;
margin-bottom: 20px;
}
@media (max-width: 767px) {
.logs-view-element {
min-width: 300px;
}
.logs-view-element #bar-chart {
display: none;
}
.logs-view-element .date-line {
display: block;
margin-bottom: 10px;
}
.logs-view-element .date-line-caption {
display: inline-block;
width: 50px;
text-transform: capitalize;
}
.logs-view-element .manager-header {
padding-bottom: 72px;
}
}
.logs-view-element .table-container {
min-height: 200px;
}
.logs-view-element .manager-header .header-text {
font-size: 24px;
vertical-align: middle;
}
.logs-view-element .manager-header .header-text .mini {
font-size: 18px;
color: #999;
margin-left: 10px;
}
.logs-view-element .logs-date-picker {
width: 122px;
}
.logs-view-element .manager-header input {
font-size: 14px;
text-align: center;
border: 1px solid #eee;
padding: 4px;
border-radius: 4px;
}
.logs-view-element .manager-header .right {
float: right;
margin-left: 10px;
}
.logs-view-element .log i.fa {
margin-right: 6px;
}
.logs-view-element .log .circle {
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
margin-right: 6px;
margin-top: 6px;
vertical-align: middle;
float: left;
}
.logs-view-element .log .log-description {
margin-left: 20px;
display: block;
line-height: 25px;
}
.logs-view-element .log .log-description code {
max-width: 300px;
display: inline-block;
vertical-align: middle;
overflow: hidden;
text-overflow: ellipsis;
}
.logs-view-element .log-performer {
white-space: nowrap;
}
.logs-view-element .side-controls {
text-align: right;
margin-bottom: 20px;
}

2
static/css/directives/ui/manager-header.css
View file

@ -40,7 +40,7 @@
right: 0px;
}
.manager-header .manager-header-side-controls .btn {
.manager-header .manager-header-side-controls .btn, .manager-header .manager-header-side-controls .popup-input-button {
display: block;
width: 100%;
}

7
static/css/directives/ui/teams-manager.css
View file

@ -12,6 +12,13 @@
margin-left: 10px;
}
@media (max-width: 767px) {
.teams-manager .control-col {
padding-left: 55px;
padding-bottom: 10px;
}
}
.teams-manager .header-col .info-icon {
font-size: 16px;
}

65
static/css/quay.css
View file

@ -501,71 +501,6 @@ i.toggle-icon:hover {
visibility: hidden;
}
.logs-view-element .header {
padding-bottom: 10px;
border-bottom: 1px solid #eee;
margin-bottom: 20px;
}
.logs-view-element .header .header-text {
font-size: 24px;
vertical-align: middle;
}
.logs-view-element .header .header-text .mini {
font-size: 18px;
color: #999;
margin-left: 10px;
}
.logs-view-element .logs-date-picker {
width: 122px;
}
.logs-view-element .header input {
font-size: 14px;
text-align: center;
border: 1px solid #eee;
padding: 4px;
border-radius: 4px;
}
.logs-view-element .header .right {
float: right;
}
.logs-view-element .log i.fa {
margin-right: 6px;
}
.logs-view-element .log .circle {
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
margin-right: 6px;
margin-top: 6px;
vertical-align: middle;
float: left;
}
.logs-view-element .log .log-description {
margin-left: 20px;
display: block;
line-height: 25px;
}
.logs-view-element .log .log-description code {
max-width: 300px;
display: inline-block;
vertical-align: middle;
overflow: hidden;
text-overflow: ellipsis;
}
.logs-view-element .log-performer {
white-space: nowrap;
}
.billing-options-element .current-card {
font-size: 16px;

17
static/directives/application-manager.html
View file

@ -1,17 +1,14 @@
<div class="application-manager-element">
<div class="cor-loader" ng-show="loading"></div>
<div ng-show="!loading">
<div class="manager-header">
<div class="side-controls">
<span class="popup-input-button" placeholder="'Application Name'"
submitted="createApplication(value)">
<i class="fa fa-plus"></i> Create New Application
</span>
</div>
<h3>OAuth Applications</h3>
<div class="manager-header" header-title="OAuth Applications">
<span class="popup-input-button" placeholder="'Application Name'"
submitted="createApplication(value)">
<i class="fa fa-plus"></i> Create New Application
</span>
</div>
<div class="manager-header section-description-header">
<div class="section-description-header">
The OAuth Applications panel allows organizations to define custom OAuth applications that can be used by internal or external customers to access <span class="registry-name"></span> data on behalf of the customers. More information about the <span class="registry-name"></span> API can be found by contacting support.
</div>
@ -23,7 +20,7 @@
</div>
</div>
<table class="co-table" ng-show="applications.length">
<table class="cor-table" ng-show="applications.length">
<thead>
<td>Application Name</td>
<td>Application URI</td>

39
static/directives/logs-view.html
View file

@ -1,16 +1,17 @@
<div class="logs-view-element">
<div class="header">
<span class="header-text">
<span ng-show="!performer">Usage Logs</span>
<span class="entity-reference" entity="performer" ng-show="performer"></span>
<span id="logs-range" class="mini">
From
<div class="manager-header" header-title="Usage Logs">
<span id="logs-range" class="mini">
<span class="date-line">
<span class="date-line-caption">From</span>
<input type="text" class="logs-date-picker input-sm" name="start" ng-model="logStartDate" data-max-date="{{ logEndDate }}" data-container="body" bs-datepicker/>
<span class="add-on">to</span>
</span>
<span class="date-line">
<span class="date-line-caption add-on">to</span>
<input type="text" class="logs-date-picker input-sm" name="end" ng-model="logEndDate" data-min-date="{{ logStartDate }}" bs-datepicker/>
</span>
</span>
<span class="right">
<span class="hidden-xs right">
<i class="fa fa-bar-chart-o toggle-icon" ng-class="chartVisible ? 'active' : ''"
ng-click="toggleChart()" data-title="Toggle Chart" bs-tooltip="tooltip.title"></i>
<a href="{{ logsPath }}" download="usage-log.json" target="_new">
@ -19,13 +20,12 @@
</span>
</div>
<div class="cor-loader-inline" ng-show="loading"></div>
<div ng-show="!loading">
<div>
<div id="bar-chart" style="width: 800px; height: 500px;" ng-show="chartVisible">
<svg style="width: 800px; height: 500px;"></svg>
</div>
<div class="side-controls">
<div class="hidden-xs side-controls">
<div class="result-count">
Showing {{(logs | visibleLogFilter:kindsAllowed | filter:search | limitTo:150).length}} of
{{(logs | visibleLogFilter:kindsAllowed | filter:search).length}} matching logs
@ -36,14 +36,14 @@
</div>
<div class="table-container">
<table class="table">
<thead>
<th>Description</th>
<th style="min-width: 226px">Date/Time</th>
<th>User/Token/App</th>
</thead>
<div class="cor-loader" ng-show="loading"></div>
<table class="cor-table">
<thead>
<td>Description</td>
<td style="min-width: 226px">Date/Time</td>
<td>User/Token/App</td>
</thead>
<tbody>
<tr class="log" ng-repeat="log in (logs | visibleLogFilter:kindsAllowed | filter:search | limitTo:150)">
<td>
<span class="circle" style="{{ 'background: ' + getColor(log.kind) }}"></span>
@ -74,8 +74,7 @@
</span>
</td>
</tr>
</tbody>
</table>
</table>
</div>
</div>
</div>

17
static/directives/prototype-manager.html
View file

@ -1,17 +1,14 @@
<div class="prototype-manager-element">
<div class="cor-loader" ng-show="loading"></div>
<div ng-show="!loading">
<div class="manager-header">
<div class="side-controls">
<button class="btn btn-primary" ng-click="showAddDialog()">
<i class="fa fa-plus"></i>
Create Default Permission
</button>
</div>
<h3>Default Permissions</h3>
<div class="manager-header" header-title="Default Permissions">
<button class="btn btn-primary" ng-click="showAddDialog()">
<i class="fa fa-plus"></i>
Create Default Permission
</button>
</div>
<div class="manager-header section-description-header">
<div class="section-description-header">
The Default permissions panel defines permissions that should be granted automatically to a repository when it is created, in addition to the default of the repository's
creator. Permissions are assigned based on the user who created the repository.
<br><br>
@ -26,7 +23,7 @@
</div>
</div>
<table class="co-table" ng-show="prototypes.length">
<table class="cor-table" ng-show="prototypes.length">
<thead>
<td>
<span class="context-tooltip"

5
static/directives/teams-manager.html
View file

@ -1,10 +1,9 @@
<div class="teams-manager-element">
<div class="manager-header">
<div class="manager-header" header-title="Teams">
<span class="popup-input-button" pattern="TEAM_PATTERN" placeholder="'Team Name'"
submitted="createTeam(value)" ng-show="organization.is_admin">
<i class="fa fa-plus" style="margin-right: 6px;"></i> Create New Team
</span>
<h3>Teams</h3>
</div>
<div class="row hidden-xs">
@ -33,7 +32,7 @@
<div class="team-description markdown-view" content="team.description" first-line-only="true"></div>
<div class="team-member-list" ng-if="members[team.name]">
<div class="team-member-list hidden-xs" ng-if="members[team.name]">
<div class="cor-loader" ng-if="!members[team.name].members"></div>
<span class="team-member"
ng-repeat="member in members[team.name].members | orderBy:'is_robot' | limitTo: 20">

11
static/js/core-ui.js
View file

@ -745,10 +745,15 @@ angular.module("core-ui", [])
return clone;
};
var appendRepeater = function(div, tr, headers) {
var appendRepeater = function(div, tr, headers, includeRepeat) {
// Find all the tds directly under the tr and convert into a header + value span.
tr.children('td').each(function(idx, td) {
var displayer = cloneWithAttr(tr, 'div');
if (!includeRepeat) {
displayer.removeAttr('ng-repeat');
}
displayer.append(headers[idx].clone(true).addClass('mobile-col-header'));
displayer.append(cloneWithAttr(td, 'div', true).addClass('mobile-col-value'));
div.append(displayer);
@ -771,10 +776,10 @@ angular.module("core-ui", [])
// itself should be a tr.
if (repeater.nodeName.toLowerCase() == 'tbody') {
$(repeater).children().each(function(idx, tr) {
appendRepeater(divRepeater, $(tr), headers);
appendRepeater(divRepeater, $(tr), headers, true);
});
} else {
appendRepeater(divRepeater, $(repeater), headers);
appendRepeater(divRepeater, $(repeater), headers, false);
}
var repeaterBody = $(document.createElement('tbody'));