mirror of
https://github.com/nextcloud/passman.git
synced 2024-09-20 14:56:21 +08:00
Better searchbox behaviour.
Add a clear icon.
This commit is contained in:
parent
94d4f30948
commit
1a4c1346cc
20
css/app.css
20
css/app.css
|
@ -167,9 +167,17 @@
|
||||||
#app-content #app-content-wrapper {
|
#app-content #app-content-wrapper {
|
||||||
min-height: 95%; }
|
min-height: 95%; }
|
||||||
#app-content #app-content-wrapper #passman-controls {
|
#app-content #app-content-wrapper #passman-controls {
|
||||||
|
text-align: center;
|
||||||
border-bottom: 1px solid #c9c9c9; }
|
border-bottom: 1px solid #c9c9c9; }
|
||||||
|
#app-content #app-content-wrapper #passman-controls.sidebar-shown {
|
||||||
|
padding-right: 27% !important; }
|
||||||
|
@media screen and (max-width: 765px) {
|
||||||
|
#app-content #app-content-wrapper #passman-controls.sidebar-shown .title {
|
||||||
|
display: none; } }
|
||||||
|
@media screen and (min-width: 769px) and (max-width: 1120px) {
|
||||||
|
#app-content #app-content-wrapper #passman-controls.sidebar-shown .title {
|
||||||
|
display: none; } }
|
||||||
#app-content #app-content-wrapper .title {
|
#app-content #app-content-wrapper .title {
|
||||||
width: calc(100% - 500px);
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
@ -236,6 +244,16 @@
|
||||||
float: right; }
|
float: right; }
|
||||||
#app-content #app-content-wrapper .searchboxContainer .searchbox {
|
#app-content #app-content-wrapper .searchboxContainer .searchbox {
|
||||||
display: inline-block; }
|
display: inline-block; }
|
||||||
|
#app-content #app-content-wrapper .searchboxContainer .searchclear {
|
||||||
|
color: #ccc;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 18px;
|
||||||
|
height: 14px;
|
||||||
|
margin: auto;
|
||||||
|
position: absolute !important;
|
||||||
|
right: 10px;
|
||||||
|
top: 12px;
|
||||||
|
z-index: 99999999; }
|
||||||
#app-content #app-content-wrapper .credential-table {
|
#app-content #app-content-wrapper .credential-table {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-top: 44px; }
|
margin-top: 44px; }
|
||||||
|
|
File diff suppressed because one or more lines are too long
37
js/app/directives/clearbutton2.js
Normal file
37
js/app/directives/clearbutton2.js
Normal file
|
@ -0,0 +1,37 @@
|
||||||
|
(function () {
|
||||||
|
'use strict';
|
||||||
|
/**
|
||||||
|
* @ngdoc directive
|
||||||
|
* @name passmanApp.directive:clearBtn
|
||||||
|
* @description
|
||||||
|
* # clearBtn
|
||||||
|
*/
|
||||||
|
angular.module('passmanApp')
|
||||||
|
.directive('clearBtn', ['$parse', function ($parse) {
|
||||||
|
return {
|
||||||
|
link: function (scope, elm, attr) {
|
||||||
|
elm.wrap("<div style='position: relative'></div>");
|
||||||
|
var btn = '<span id=' + Math.round(Math.random() * 1000000000) + ' class="searchclear ng-hide fa fa-times-circle-o"></span>';
|
||||||
|
var angularBtn = angular.element(btn);
|
||||||
|
elm.after(angularBtn);
|
||||||
|
//clear the input
|
||||||
|
angularBtn.on("click", function () {
|
||||||
|
elm.val('').trigger("change");
|
||||||
|
$parse(attr.ngModel).assign(scope, '');
|
||||||
|
scope.$apply();
|
||||||
|
});
|
||||||
|
|
||||||
|
// show clear btn on focus
|
||||||
|
elm.bind('focus keyup change paste propertychange', function () {
|
||||||
|
if (elm.val() && elm.val().length > 0) {
|
||||||
|
angularBtn.removeClass("ng-hide");
|
||||||
|
} else {
|
||||||
|
angularBtn.addClass("ng-hide");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}]);
|
||||||
|
}());
|
||||||
|
|
||||||
|
|
|
@ -13,6 +13,9 @@
|
||||||
return function (credentials, filter) {
|
return function (credentials, filter) {
|
||||||
var _credentials = [];
|
var _credentials = [];
|
||||||
if (credentials) {
|
if (credentials) {
|
||||||
|
if(!filter){
|
||||||
|
return credentials;
|
||||||
|
}
|
||||||
if (filter.filterText.trim() === "") {
|
if (filter.filterText.trim() === "") {
|
||||||
return credentials;
|
return credentials;
|
||||||
}
|
}
|
||||||
|
@ -36,6 +39,8 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return _credentials;
|
return _credentials;
|
||||||
|
} else {
|
||||||
|
return [];
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
File diff suppressed because one or more lines are too long
|
@ -3,10 +3,23 @@
|
||||||
#app-content-wrapper {
|
#app-content-wrapper {
|
||||||
min-height: 95%;
|
min-height: 95%;
|
||||||
#passman-controls {
|
#passman-controls {
|
||||||
border-bottom: 1px solid #c9c9c9
|
text-align: center;
|
||||||
|
&.sidebar-shown{
|
||||||
|
padding-right: 27% !important;
|
||||||
|
.title{
|
||||||
|
@media screen and (max-width: 765px){
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
@media screen and (min-width: 769px) and (max-width: 1120px){
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
border-bottom: 1px solid #c9c9c9;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
width: calc(100% - 500px);
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
@ -79,6 +92,17 @@
|
||||||
.searchbox {
|
.searchbox {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
.searchclear {
|
||||||
|
color: #ccc;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 18px;
|
||||||
|
height: 14px;
|
||||||
|
margin: auto;
|
||||||
|
position: absolute!important;
|
||||||
|
right: 10px;
|
||||||
|
top: 12px;
|
||||||
|
z-index: 99999999;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.credential-table {
|
.credential-table {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
@ -375,7 +399,6 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.loaderContainer {
|
.loaderContainer {
|
||||||
height: 140px;
|
height: 140px;
|
||||||
width: 120px;
|
width: 120px;
|
||||||
|
|
|
@ -68,6 +68,7 @@ script('passman', 'app/directives/ngenter');
|
||||||
script('passman', 'app/directives/autoscroll');
|
script('passman', 'app/directives/autoscroll');
|
||||||
script('passman', 'app/directives/clickselect');
|
script('passman', 'app/directives/clickselect');
|
||||||
script('passman', 'app/directives/colorfromstring');
|
script('passman', 'app/directives/colorfromstring');
|
||||||
|
script('passman', 'app/directives/clearbutton2');
|
||||||
script('passman', 'importers/import-main');
|
script('passman', 'importers/import-main');
|
||||||
script('passman', 'importers/importer-keepasscsv');
|
script('passman', 'importers/importer-keepasscsv');
|
||||||
script('passman', 'importers/importer-lastpasscsv');
|
script('passman', 'importers/importer-lastpasscsv');
|
||||||
|
|
|
@ -1,41 +1,40 @@
|
||||||
<div id="passman-controls">
|
<div off-click="closeSelected()" off-click-filter="'.download-js-link, .sidebar-shown'">
|
||||||
<div class="breadcrumb">
|
<div id="passman-controls" ng-class="{ 'sidebar-shown': selectedCredential }">
|
||||||
<div class="breadcrumb">
|
<div class="breadcrumb">
|
||||||
<div class="crumb svg ui-droppable" data-dir="/">
|
<div class="breadcrumb">
|
||||||
<a><i class="fa fa-home"></i></a>
|
<div class="crumb svg ui-droppable" data-dir="/">
|
||||||
</div>
|
<a><i class="fa fa-home"></i></a>
|
||||||
<div class="crumb svg last">
|
</div>
|
||||||
<a>{{active_vault.name}}</a>
|
<div class="crumb svg last">
|
||||||
|
<a>{{active_vault.name}}</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<span class="title" ng-if="delete_time">
|
||||||
<span class="title" ng-if="delete_time">
|
|
||||||
Showing deleted since:
|
Showing deleted since:
|
||||||
<span ng-if="delete_time == 1">All time</span>
|
<span ng-if="delete_time == 1">All time</span>
|
||||||
<span ng-if="delete_time > 1">{{delete_time | date:'dd-MM-yyyy @ HH:mm:ss'}}</span>
|
<span ng-if="delete_time > 1">{{delete_time | date:'dd-MM-yyyy @ HH:mm:ss'}}</span>
|
||||||
|
|
||||||
</span>
|
</span>
|
||||||
<div class="actions creatable">
|
<div class="actions creatable">
|
||||||
<span ng-click="addCredential()" class="button new">
|
<span ng-click="addCredential()" class="button new">
|
||||||
<span >+</span></span>
|
<span >+</span></span>
|
||||||
</div>
|
</div>
|
||||||
<div class="title" ng-show="filtered_credentials.length > 0">
|
<div class="title" ng-show="filtered_credentials.length > 0">
|
||||||
Showing {{filtered_credentials.length}} of {{active_vault.credentials.length - 1}} credentials
|
Showing {{filtered_credentials.length}} of {{active_vault.credentials.length - 1}} credentials
|
||||||
</div>
|
</div>
|
||||||
<div class="searchboxContainer">
|
<div class="searchboxContainer">
|
||||||
<input type="text" ng-model="filterOptions.filterText" class="searchbox"
|
<input type="text" ng-model="filterOptions.filterText" class="searchbox"
|
||||||
placeholder="Search credential..." select-on-click>
|
placeholder="Search credential..." select-on-click clear-btn>
|
||||||
</div>
|
</div>
|
||||||
<div class="viewModes">
|
<div class="viewModes">
|
||||||
<div class="view-mode" ng-class="{'active': view_mode === 'list' }"
|
<div class="view-mode" ng-class="{'active': view_mode === 'list' }"
|
||||||
ng-click="switchViewMode('list')"><i class="fa fa-list"></i></div>
|
ng-click="switchViewMode('list')"><i class="fa fa-list"></i></div>
|
||||||
<div class="view-mode" ng-class="{'active': view_mode === 'grid' }"
|
<div class="view-mode" ng-class="{'active': view_mode === 'grid' }"
|
||||||
ng-click="switchViewMode('grid')"><i class="fa fa-th-large"></i>
|
ng-click="switchViewMode('grid')"><i class="fa fa-th-large"></i>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<div off-click="closeSelected()" off-click-filter="'.download-js-link'">
|
|
||||||
|
|
||||||
<div class="loaderContainer" ng-if="show_spinner">
|
<div class="loaderContainer" ng-if="show_spinner">
|
||||||
<div class="loader" use-theme type="'border-bottom-color'"></div>
|
<div class="loader" use-theme type="'border-bottom-color'"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in a new issue