Start on mobilification of repo view

This commit is contained in:
Joseph Schorr 2015-04-20 17:42:33 -04:00
parent 79caf2dab2
commit a4cacd7307
31 changed files with 265 additions and 91 deletions

View file

@ -10,7 +10,7 @@
<div class="image-section">
<i class="fa fa-code section-icon" bs-tooltip="tooltip.title" data-title="Full Image ID"></i>
<span class="section-info">
<a class="image-link" ng-href="{{ tracker.imageLink(image) }}">
<a class="current-image-link" ng-href="{{ tracker.imageLink(image) }}">
{{ imageData.id }}
</a>
</span>

View file

@ -58,7 +58,9 @@
<span class="entity-reference block-reference" entity="prototype.delegate" namespace="organization.name" avatar-size="24"></span>
</td>
<td>
<span class="role-group" current-role="prototype.role" role-changed="setRole(role, prototype)" roles="roles"></span>
<span class="role-group" current-role="prototype.role"
role-changed="setRole(role, prototype)"
roles="repoRoles"></span>
</td>
<td class="options-col">
<span class="cor-options-menu">
@ -111,7 +113,8 @@
<tr>
<td>Permission:</td>
<td>
<span class="role-group" current-role="newRole" role-changed="setRoleForNew(role)" roles="roles"></span>
<span class="role-group" current-role="newRole" role-changed="setRoleForNew(role)"
roles="repoRoles"></span>
</td>
</tr>
<tr>

View file

@ -1,7 +1,7 @@
<div class="repo-tag-history-element">
<div class="cor-loader" ng-if="!historyEntries"></div>
<span class="co-filter-box" style="float:right">
<span class="co-filter-box">
<input class="form-control" type="text" ng-model="filter" placeholder="Filter History...">
</span>

View file

@ -41,18 +41,20 @@
style="min-width: 85px;">
<a href="javascript:void(0)" ng-click="orderBy('id')">Build ID</a>
</td>
<td ng-class="tablePredicateClass('commit_sha', options.predicate, options.reverse)"
<td class="hidden-xs"
ng-class="tablePredicateClass('commit_sha', options.predicate, options.reverse)"
style="min-width: 115px">
<a href="javascript:void(0)" ng-click="orderBy('commit_sha')">Triggered By</a>
</td>
<td ng-class="tablePredicateClass('started_datetime', options.predicate, options.reverse)" style="min-width: 120px;">
<a href="javascript:void(0)" ng-click="orderBy('started_datetime')">Date Started</a>
</td>
<td ng-class="tablePredicateClass('tags', options.predicate, options.reverse)"
<td class="hidden-xs"
ng-class="tablePredicateClass('tags', options.predicate, options.reverse)"
style="min-width: 66px;">
<a href="javascript:void(0)" ng-click="orderBy('tags')">Tags</a>
</td>
<td class="options-col"></td>
<td class="options-col hidden-xs"></td>
</thead>
<tr ng-repeat="build in fullBuilds">
@ -60,11 +62,11 @@
<td>
<a href="/repository/{{ repository.namespace }}/{{ repository.name }}/build/{{ build.id }}">{{ build.id.substr(0, 8) }}</a>
</td>
<td>
<td class="hidden-xs">
<div class="triggered-build-description" build="build"></div>
</td>
<td>{{ build.started | amCalendar }}</td>
<td>
<td class="hidden-xs">
<span class="building-tag" ng-repeat="tag in build.building_tags">
<span class="tag-span"><i class="fa fa-tag"></i>{{ tag }}</span>
</span>
@ -113,7 +115,7 @@
</div>
<!-- Triggers list -->
<table class="co-table" ng-if="triggers.length">
<table class="cor-table" ng-if="triggers.length">
<thead>
<td>Trigger Name</td>
<td>Dockerfile Location</td>

View file

@ -50,8 +50,7 @@
<!-- Delete Repository -->
<div class="panel-body panel-section">
<div class="co-alert co-alert-danger">
<button class="btn btn-danger" style="float: right; margin-top: -7px;"
ng-click="askDelete()">
<button class="btn btn-danger delete-btn" ng-click="askDelete()">
<i class="fa fa-trash"></i>
Delete Repository
</button>
@ -61,7 +60,7 @@
</div>
<!-- Build Status Badge -->
<div class="panel-body panel-section">
<div class="panel-body panel-section hidden-xs">
<!-- Status Image -->
<a ng-href="/repository/{{ repository.namespace }}/{{ repository.name }}">
<img ng-src="/repository/{{ repository.namespace }}/{{ repository.name }}/status?token={{ repository.status_token }}"

View file

@ -10,7 +10,7 @@
</div>
</div>
<h3 class="tab-header">Repository Tags</h3>
<h3 class="tab-header"><span class="hidden-xs">Repository </span>Tags</h3>
<!-- History view -->
<div class="repo-tag-history" repository="repository" filter="options.historyFilter"
@ -39,17 +39,17 @@
<span class="co-checked-actions" ng-if="checkedTags.checked.length">
<a href="javascript:void(0)" class="btn btn-default" ng-click="setTab('changes')">
<i class="fa fa-code-fork"></i> Visualize
<i class="fa fa-code-fork"></i><span class="text">Visualize</span>
</a>
<a href="javascript:void(0)" class="btn btn-default"
ng-click="showHistory(true, getTagNames(checkedTags.checked))"
ng-if="repository.can_write">
<i class="fa fa-history"></i> View History
<i class="fa fa-history"></i><span class="text">View History</span>
</a>
<button class="btn btn-primary"
ng-click="askDeleteMultipleTags(checkedTags.checked)"
ng-if="repository.can_write">
<i class="fa fa-times"></i> Delete
<i class="fa fa-times"></i><span class="text">Delete</span>
</button>
</span>
@ -64,15 +64,18 @@
<td ng-class="tablePredicateClass('name', options.predicate, options.reverse)">
<a href="javascript:void(0)" ng-click="orderBy('name')">Tag</a>
</td>
<td ng-class="tablePredicateClass('last_modified_datetime', options.predicate, options.reverse)"
<td class="hidden-xs"
ng-class="tablePredicateClass('last_modified_datetime', options.predicate, options.reverse)"
style="min-width: 120px;">
<a href="javascript:void(0)" ng-click="orderBy('last_modified_datetime')">Last Modified</a>
</td>
<td ng-class="tablePredicateClass('size', options.predicate, options.reverse)"
<td class="hidden-xs"
ng-class="tablePredicateClass('size', options.predicate, options.reverse)"
style="min-width: 62px;">
<a href="javascript:void(0)" ng-click="orderBy('size')">Size</a>
</td>
<td ng-class="tablePredicateClass('image_id', options.predicate, options.reverse)"
<td class="hidden-xs"
ng-class="tablePredicateClass('image_id', options.predicate, options.reverse)"
colspan="{{ imageTracks.length + 1 }}"
style="min-width: 120px;">
<a href="javascript:void(0)" ng-click="orderBy('image_id')">Image</a>
@ -87,15 +90,15 @@
ng-class="checkedTags.isChecked(tag, checkedTags.checked) ? 'checked' : ''">
<td><span class="cor-checkable-item" controller="checkedTags" item="tag"></span></td>
<td><span class="tag-span"><i class="fa fa-tag"></i> {{ tag.name }}</span></td>
<td>
<td class="hidden-xs">
<span am-time-ago="tag.last_modified" ng-if="tag.last_modified"></span>
<span ng-if="!tag.last_modified">Unknown</span>
</td>
<td>{{ tag.size | bytes }}</td>
<td class="image-id-col">
<td class="hidden-xs">{{ tag.size | bytes }}</td>
<td class="hidden-xs image-id-col">
<span class="image-link" repository="repository" image-id="tag.image_id"></span>
</td>
<td class="image-track" ng-repeat="it in imageTracks">
<td class="hidden-xs image-track" ng-repeat="it in imageTracks">
<span class="image-track-dot" ng-if="it.image_id == tag.image_id"
ng-style="{'borderColor': it.color}" ng-click="selectTrack(it)"></span>
<span class="image-track-line" ng-class="trackLineClass($parent.$index, it)"

View file

@ -15,9 +15,12 @@
<div class="empty" ng-if="!notifications.length">
<div class="empty-primary-msg">No notifications have been setup for this repository.</div>
<div class="empty-secondary-msg" ng-if="repository.can_write">
<div class="empty-secondary-msg hidden-xs" ng-if="repository.can_write">
Click the "Create Notification" button above to add a new notification for a repository event.
</div>
<div class="empty-secondary-msg visible-xs" ng-if="repository.can_write">
<a href="javascript:void(0)" ng-click="askCreateNotification()">Click here</a> to add a new notification for a repository event.
</div>
</div>
<table class="co-table permissions" ng-if="notifications.length">

View file

@ -3,14 +3,6 @@
resources="[permissionResources.team, permissionResources.user]"
error-message="'Could not load repository permissions'">
<table class="co-table no-lines permissions">
<thead>
<tr>
<td>Account Name</td>
<td style="width: 300px">Permissions</td>
<td class="options-col"></td>
</tr>
</thead>
<tr ng-show="!hasPermissions(permissionResources.team, permissionResources.user)">
<td colspan="3">
<div class="empty">
@ -35,7 +27,8 @@
</span>
</td>
<td class="user-permissions">
<span class="role-group" current-role="permission.role" role-changed="setRole(role, name, 'team')" roles="roles"></span>
<span class="role-group" current-role="permission.role"
role-changed="setRole(role, name, 'team')" roles="repoRoles"></span>
</td>
<td class="options-col">
@ -66,7 +59,8 @@
<td class="user-permissions">
<div class="btn-group btn-group-sm">
<span class="role-group" current-role="permission.role"
role-changed="setRole(role, permission.name, 'user')" roles="roles"></span>
role-changed="setRole(role, permission.name, 'user')"
roles="repoRoles"></span>
</div>
</td>
<td class="options-col">
@ -94,7 +88,8 @@
<td class="user-permissions">
<div class="btn-group btn-group-sm">
<span class="role-group" current-role="permission.role"
role-changed="setRole(role, permission.name, 'user')" roles="roles"></span>
role-changed="setRole(role, permission.name, 'user')"
roles="repoRoles"></span>
</div>
</td>
<td class="options-col">
@ -108,14 +103,15 @@
<tr class="add-row-spacer"><td colspan="3"></td></tr>
<tr class="add-row">
<tr class="add-row" ng-if-media="'(min-width: 768px)'">
<td id="add-entity-permission" class="admin-search">
<span class="entity-search" namespace="repository.namespace"
placeholder="'Select a ' + (repository.is_organization ? 'team or ' : '') + 'user...'"
current-entity="addPermissionInfo.entity"></span>
</td>
<td colspan="2">
<span class="role-group" current-role="addPermissionInfo.role" roles="roles"
<span class="role-group" current-role="addPermissionInfo.role"
roles="repoRoles"
role-changed="addPermissionInfo.role = role"></span>
<button class="btn btn-success" style="margin-left: 10px"
ng-disabled="!addPermissionInfo.role || !addPermissionInfo.entity"
@ -125,6 +121,20 @@
</td>
</tr>
</table>
<div class="mobile-add-row" ng-if-media="'(max-width: 767px)'">
<span class="entity-search" namespace="repository.namespace"
placeholder="'Select a ' + (repository.is_organization ? 'team or ' : '') + 'user...'"
current-entity="addPermissionInfo.entity"></span>
<span class="role-group" current-role="addPermissionInfo.role"
roles="repoRoles"
role-changed="addPermissionInfo.role = role"></span>
<button class="btn btn-success" style="margin-left: 10px"
ng-disabled="!addPermissionInfo.role || !addPermissionInfo.entity"
ng-click="addPermission()">
Add Permission
</button>
</div>
</div>
<!-- Grant Permission Confirm -->

View file

@ -115,7 +115,9 @@
</td>
<td>
<div class="btn-group btn-group-sm">
<span class="role-group" current-role="permission.role" roles="roles"
<span class="role-group"
current-role="permission.role"
roles="repoRoles"
read-only="true"></span>
</div>
</td>

View file

@ -1,6 +1,16 @@
<div class="btn-group btn-group-sm">
<button ng-repeat="role in roles"
type="button" class="btn" ng-click="setRole(role.id)"
ng-class="(currentRole == role.id) ? ('active btn-' + role.kind) : 'btn-default'"
ng-disabled="readOnly">{{ role.title }}</button>
<div class="dropdown" style="text-align: left;">
<button class="btn btn-default" ng-class="getRoleInfo(currentRole).kind" data-toggle="dropdown">
<span ng-if="currentRole" class="role-title">{{ getRoleInfo(currentRole).title }}</span>
<span ng-if="!currentRole">(Select)</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu pull-right">
<li ng-repeat="roleInfo in fullRoles" ng-class="roleInfo.kind">
<a href="javascript:void(0)" ng-click="setRole(roleInfo.id)">{{ roleInfo.title }}
<div class="role-help-text">{{ roleInfo.description }}</div>
</a>
</li>
</ul>
</div>
</div>

View file

@ -51,7 +51,8 @@
</div>
<div class="col-sm-5 col-md-4 control-col" ng-show="organization.is_admin">
<span class="role-group" current-role="team.role" role-changed="setRole(role, team.name)" roles="teamRoles"></span>
<span class="role-group" current-role="team.role"
role-changed="setRole(role, team.name)" roles="teamRoles"></span>
<span class="cor-options-menu">
<span class="cor-option" option-click="askDeleteTeam(team.name)">