mirror of
https://github.com/nextcloud/passman.git
synced 2025-11-01 08:16:06 +08:00
Make sharing page more pretty
This commit is contained in:
brantje
parent
cbd10de133
commit
89c4644ff3
6 changed files with 63 additions and 43 deletions
13
css/app.css
13
css/app.css
|
|
@ -147,7 +147,7 @@
|
|||
#app-content #app-content-wrapper #passman-controls {
|
||||
border-bottom: 1px solid #c9c9c9; }
|
||||
#app-content #app-content-wrapper .title {
|
||||
width: calc( 100% - 375px);
|
||||
width: calc(100% - 375px);
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
|
|
@ -400,11 +400,18 @@
|
|||
|
||||
.progress {
|
||||
margin-top: 10px;
|
||||
height: 10px; }
|
||||
height: 20px; }
|
||||
.progress .progress-bar {
|
||||
height: 10px;
|
||||
position: relative;
|
||||
height: 20px;
|
||||
background-image: none;
|
||||
background-color: #0082c9; }
|
||||
.progress .progress-bar .progress-label {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
text-align: center;
|
||||
width: 100%; }
|
||||
|
||||
.loaderContainer {
|
||||
height: 140px;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -12,12 +12,15 @@ angular.module('passmanApp')
|
|||
restrict: 'A',
|
||||
template:''+
|
||||
'<div class="progress">'+
|
||||
'<div class="progress-bar" role="progressbar" aria-valuenow="{{progress}}"aria-valuemin="0" aria-valuemax="100" style="width:{{progress}}%">'+
|
||||
'<div class="progress-bar" role="progressbar" aria-valuenow="{{progress}}"aria-valuemin="0" aria-valuemax="100" style="width:{{progress}}%;" use-theme>'+
|
||||
'<span class="sr-only">{{progress}}% Complete</span>' +
|
||||
'<span ng-if="index && total" class="progress-label" use-theme type="\'color\'" color="\'true\'">{{index}} / {{total}}</span>'+
|
||||
'</div>'+
|
||||
'</div>',
|
||||
scope: {
|
||||
progress: '=progressBar'
|
||||
progress: '=progressBar',
|
||||
index: '=index',
|
||||
total: '=total'
|
||||
},
|
||||
|
||||
link: function (scope, el, attr, ctrl) {
|
||||
|
|
|
|||
|
|
@ -81,7 +81,7 @@ angular.module('views/partials/forms/settings/tool.html', []).run(['$templateCac
|
|||
angular.module('views/partials/forms/share_credential/basics.html', []).run(['$templateCache', function($templateCache) {
|
||||
'use strict';
|
||||
$templateCache.put('views/partials/forms/share_credential/basics.html',
|
||||
'<div class="row"><div class="col-xs-12 col-md-6"><div><table class="table sharing_table"><thead><tr><td><tags-input ng-model="inputSharedWith" replace-spaces-with-dashes="false" add-from-autocomplete-only="true" placeholder="Search users or groups..."><auto-complete source="searchUsers($query)" min-length="0" template="autocomplete-template"></auto-complete></tags-input></td><td><select ng-model="selectedAccessLevel"><option ng-repeat="lvl in accessLevels" value="{{lvl.value}}">{{lvl.label}}</option></select><button class="button" ng-click="shareWith(inputSharedWith, selectedAccessLevel)">+</button></td></tr></thead></table></div></div></div><div class="row"><div class="col-xs-12 col-md-6"><table class="table shared_table" ng-show="share_settings.credentialSharedWithUserAndGroup.length > 0"><thead><tr><td>User / group</td><td>Access</td></tr></thead><tr ng-repeat="user in share_settings.credentialSharedWithUserAndGroup"><td><i class="fa fa-user" ng-if="user.type === \'user\'"></i> <i class="fa fa-group" ng-if="user.type === \'group\'"></i> {{user.userId}}</td><td>{{user.accessLevel}}</td></tr></table></div></div><div class="row" ng-if="share_settings.cypher_progress.done > 0">Cyphering...<div progress-bar="share_settings.cypher_progress"></div>{{ share_settings.cypher_progress.done }} / {{ share_settings.cypher_progress.total }}</div><script type="text/ng-template" id="autocomplete-template"><i class="fa fa-user" ng-if="data.type === \'user\'"></i>\n' +
|
||||
'<div class="row"><div class="col-xs-12 col-md-6"><div><table class="table sharing_table"><thead><tr><td><tags-input ng-model="inputSharedWith" replace-spaces-with-dashes="false" add-from-autocomplete-only="true" placeholder="Search users or groups..."><auto-complete source="searchUsers($query)" min-length="0" template="autocomplete-template"></auto-complete></tags-input></td><td><select ng-model="selectedAccessLevel"><option ng-repeat="lvl in accessLevels" value="{{lvl.value}}">{{lvl.label}}</option></select><button class="button" ng-click="shareWith(inputSharedWith, selectedAccessLevel)">+</button></td></tr></thead></table><div ng-if="share_settings.cypher_progress.done > 0">Cyphering...<div progress-bar="share_settings.cypher_progress" index="share_settings.cypher_progress.done" total="share_settings.cypher_progress.total"></div></div></div></div></div><div class="row"><div class="col-xs-12 col-md-6"><table class="table shared_table" ng-show="share_settings.credentialSharedWithUserAndGroup.length > 0"><thead><tr><td>User / group</td><td>Access</td></tr></thead><tr ng-repeat="user in share_settings.credentialSharedWithUserAndGroup"><td><i class="fa fa-user" ng-if="user.type === \'user\'"></i> <i class="fa fa-group" ng-if="user.type === \'group\'"></i> {{user.userId}}</td><td>{{user.accessLevel}}</td></tr></table></div></div><script type="text/ng-template" id="autocomplete-template"><i class="fa fa-user" ng-if="data.type === \'user\'"></i>\n' +
|
||||
' <i class="fa fa-group" ng-if="data.type === \'group\'"></i>\n' +
|
||||
' {{data.text}}</script>');
|
||||
}]);
|
||||
|
|
|
|||
|
|
@ -2,11 +2,11 @@
|
|||
overflow-x: hidden;
|
||||
#app-content-wrapper {
|
||||
min-height: 95%;
|
||||
#passman-controls{
|
||||
#passman-controls {
|
||||
border-bottom: 1px solid #c9c9c9
|
||||
}
|
||||
.title{
|
||||
width: calc( 100% - 375px);
|
||||
.title {
|
||||
width: calc(100% - 375px);
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
|
|
@ -37,40 +37,40 @@
|
|||
}
|
||||
}
|
||||
|
||||
.viewModes{
|
||||
.viewModes {
|
||||
float: right;
|
||||
margin-right: 5px;
|
||||
margin-top: 3px;
|
||||
.view-mode:first-child{
|
||||
.view-mode:first-child {
|
||||
@include border-left-radius(5px);
|
||||
border: 1px solid rgba(240,240,240,.9);
|
||||
border: 1px solid rgba(240, 240, 240, .9);
|
||||
}
|
||||
.view-mode:last-child{
|
||||
.view-mode:last-child {
|
||||
@include border-right-radius(5px);
|
||||
border: 1px solid rgba(240,240,240,.9);
|
||||
border: 1px solid rgba(240, 240, 240, .9);
|
||||
}
|
||||
.view-mode{
|
||||
.view-mode {
|
||||
display: inline-block;
|
||||
padding: 7px;
|
||||
background-color: rgba(240,240,240,.9);
|
||||
background-color: rgba(240, 240, 240, .9);
|
||||
}
|
||||
.view-mode.active{
|
||||
.view-mode.active {
|
||||
display: inline-block;
|
||||
padding: 7px;
|
||||
background-color: rgba(226, 226, 226, 0.9);
|
||||
}
|
||||
.view-mode{
|
||||
.view-mode {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
padding: 7px;
|
||||
}
|
||||
}
|
||||
|
||||
.searchboxContainer{
|
||||
.searchboxContainer {
|
||||
display: inline-block;
|
||||
margin-right: 14px;
|
||||
float: right;
|
||||
.searchbox{
|
||||
.searchbox {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
|
@ -88,7 +88,7 @@
|
|||
cursor: pointer;
|
||||
padding: 5px;
|
||||
border-bottom: 1px solid #eeeeee;
|
||||
.icon{
|
||||
.icon {
|
||||
font-size: 19px;
|
||||
float: left;
|
||||
margin-right: 5px;
|
||||
|
|
@ -144,39 +144,39 @@
|
|||
margin-right: 3px;
|
||||
@include border-radius(5px);
|
||||
}
|
||||
.tag:last-child{
|
||||
.tag:last-child {
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.grid-view{
|
||||
.grid-view {
|
||||
margin-top: 44px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.credential{
|
||||
.credential {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
border: 2px solid rgba(240,240,240,.9);
|
||||
border: 2px solid rgba(240, 240, 240, .9);
|
||||
margin: 25px;
|
||||
@include border-radius(10px);
|
||||
.credential_content{
|
||||
.credential_content {
|
||||
display: flex;
|
||||
padding: 2px;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
font-size: 1.75em;
|
||||
font-size: 1.75em;
|
||||
text-align: center;
|
||||
.label{
|
||||
.label {
|
||||
padding-top: 0.5em;
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
line-height: 1.3em;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
.tags{
|
||||
.tags {
|
||||
margin-bottom: 0.5em;
|
||||
.tag{
|
||||
.tag {
|
||||
color: #000 !important;
|
||||
margin-top: 5px;
|
||||
display: inline-block;
|
||||
|
|
@ -200,7 +200,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.edit_credential {
|
||||
|
|
@ -348,18 +347,26 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.progress {
|
||||
margin-top: 10px;
|
||||
height: 10px;
|
||||
height: 20px;
|
||||
.progress-bar {
|
||||
height: 10px;
|
||||
position: relative;
|
||||
height: 20px;
|
||||
background-image: none;
|
||||
background-color: #0082c9;
|
||||
.progress-label {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.loaderContainer{
|
||||
.loaderContainer {
|
||||
height: 140px;
|
||||
width: 120px;
|
||||
margin-top: 30px;
|
||||
|
|
@ -368,11 +375,13 @@
|
|||
left: 50%;
|
||||
position: absolute;
|
||||
}
|
||||
.loaderContainer .text{
|
||||
|
||||
.loaderContainer .text {
|
||||
width: 120px;
|
||||
text-align: center;
|
||||
}
|
||||
.loader{
|
||||
|
||||
.loader {
|
||||
border-bottom: 10px solid #1d2d44;
|
||||
border-left: 10px solid #c9c9c9;
|
||||
border-right: 10px solid #c9c9c9;
|
||||
|
|
@ -382,6 +391,7 @@
|
|||
border-radius: 120px;
|
||||
animation: 1.1s linear 0s normal none infinite running load8;
|
||||
}
|
||||
|
||||
@keyframes load8 {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
|
|
|
|||
|
|
@ -30,6 +30,11 @@
|
|||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
|
||||
<div ng-if="share_settings.cypher_progress.done > 0">
|
||||
Cyphering...
|
||||
<div progress-bar="share_settings.cypher_progress" index="share_settings.cypher_progress.done" total="share_settings.cypher_progress.total"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -55,11 +60,6 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" ng-if="share_settings.cypher_progress.done > 0">
|
||||
Cyphering...
|
||||
<div progress-bar="share_settings.cypher_progress"></div>
|
||||
{{ share_settings.cypher_progress.done }} / {{ share_settings.cypher_progress.total }}
|
||||
</div>
|
||||
|
||||
<script type="text/ng-template" id="autocomplete-template">
|
||||
<i class="fa fa-user" ng-if="data.type === 'user'"></i>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue