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 {
|
||||
min-height: 95%; }
|
||||
#app-content #app-content-wrapper #passman-controls {
|
||||
text-align: center;
|
||||
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 {
|
||||
width: calc(100% - 500px);
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
|
@ -236,6 +244,16 @@
|
|||
float: right; }
|
||||
#app-content #app-content-wrapper .searchboxContainer .searchbox {
|
||||
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 {
|
||||
width: 100%;
|
||||
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) {
|
||||
var _credentials = [];
|
||||
if (credentials) {
|
||||
if(!filter){
|
||||
return credentials;
|
||||
}
|
||||
if (filter.filterText.trim() === "") {
|
||||
return credentials;
|
||||
}
|
||||
|
@ -36,6 +39,8 @@
|
|||
}
|
||||
}
|
||||
return _credentials;
|
||||
} else {
|
||||
return [];
|
||||
}
|
||||
};
|
||||
});
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -3,10 +3,23 @@
|
|||
#app-content-wrapper {
|
||||
min-height: 95%;
|
||||
#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 {
|
||||
width: calc(100% - 500px);
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
|
@ -79,6 +92,17 @@
|
|||
.searchbox {
|
||||
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 {
|
||||
width: 100%;
|
||||
|
@ -375,7 +399,6 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.loaderContainer {
|
||||
height: 140px;
|
||||
width: 120px;
|
||||
|
|
|
@ -68,6 +68,7 @@ script('passman', 'app/directives/ngenter');
|
|||
script('passman', 'app/directives/autoscroll');
|
||||
script('passman', 'app/directives/clickselect');
|
||||
script('passman', 'app/directives/colorfromstring');
|
||||
script('passman', 'app/directives/clearbutton2');
|
||||
script('passman', 'importers/import-main');
|
||||
script('passman', 'importers/importer-keepasscsv');
|
||||
script('passman', 'importers/importer-lastpasscsv');
|
||||
|
|
|
@ -1,41 +1,40 @@
|
|||
<div id="passman-controls">
|
||||
<div class="breadcrumb">
|
||||
<div off-click="closeSelected()" off-click-filter="'.download-js-link, .sidebar-shown'">
|
||||
<div id="passman-controls" ng-class="{ 'sidebar-shown': selectedCredential }">
|
||||
<div class="breadcrumb">
|
||||
<div class="crumb svg ui-droppable" data-dir="/">
|
||||
<a><i class="fa fa-home"></i></a>
|
||||
</div>
|
||||
<div class="crumb svg last">
|
||||
<a>{{active_vault.name}}</a>
|
||||
<div class="breadcrumb">
|
||||
<div class="crumb svg ui-droppable" data-dir="/">
|
||||
<a><i class="fa fa-home"></i></a>
|
||||
</div>
|
||||
<div class="crumb svg last">
|
||||
<a>{{active_vault.name}}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="title" ng-if="delete_time">
|
||||
<span class="title" ng-if="delete_time">
|
||||
Showing deleted since:
|
||||
<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>
|
||||
<div class="actions creatable">
|
||||
<div class="actions creatable">
|
||||
<span ng-click="addCredential()" class="button new">
|
||||
<span >+</span></span>
|
||||
</div>
|
||||
<div class="title" ng-show="filtered_credentials.length > 0">
|
||||
Showing {{filtered_credentials.length}} of {{active_vault.credentials.length - 1}} credentials
|
||||
</div>
|
||||
<div class="searchboxContainer">
|
||||
<input type="text" ng-model="filterOptions.filterText" class="searchbox"
|
||||
placeholder="Search credential..." select-on-click>
|
||||
</div>
|
||||
<div class="viewModes">
|
||||
<div class="view-mode" ng-class="{'active': view_mode === 'list' }"
|
||||
ng-click="switchViewMode('list')"><i class="fa fa-list"></i></div>
|
||||
<div class="view-mode" ng-class="{'active': view_mode === 'grid' }"
|
||||
ng-click="switchViewMode('grid')"><i class="fa fa-th-large"></i>
|
||||
</div>
|
||||
<div class="title" ng-show="filtered_credentials.length > 0">
|
||||
Showing {{filtered_credentials.length}} of {{active_vault.credentials.length - 1}} credentials
|
||||
</div>
|
||||
<div class="searchboxContainer">
|
||||
<input type="text" ng-model="filterOptions.filterText" class="searchbox"
|
||||
placeholder="Search credential..." select-on-click clear-btn>
|
||||
</div>
|
||||
<div class="viewModes">
|
||||
<div class="view-mode" ng-class="{'active': view_mode === 'list' }"
|
||||
ng-click="switchViewMode('list')"><i class="fa fa-list"></i></div>
|
||||
<div class="view-mode" ng-class="{'active': view_mode === 'grid' }"
|
||||
ng-click="switchViewMode('grid')"><i class="fa fa-th-large"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div off-click="closeSelected()" off-click-filter="'.download-js-link'">
|
||||
|
||||
<div class="loaderContainer" ng-if="show_spinner">
|
||||
<div class="loader" use-theme type="'border-bottom-color'"></div>
|
||||
</div>
|
||||
|
|
Loading…
Reference in a new issue