nextcloud/passman
1
1
Fork 0
mirror of https://github.com/nextcloud/passman.git synced 2025-11-08 05:04:04 +08:00
Code Issues Projects Releases Packages Wiki Activity

Merge branch 'feature/noid/iconpickersearch' into feature/merges_v2.2.0

Browse source
This commit is contained in:
WolFi 2018-12-16 14:07:58 +01:00
commit e1e0ec7a76
No known key found for this signature in database
GPG key ID: 7D15585354D072FF
4 changed files with 85 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
controller/translationcontroller.php
View file

@ -140,6 +140,8 @@ class TranslationController extends ApiController {
'password.r' => $this->trans->t('Repeat password'),
'add.tag' => $this->trans->t('Add tag'),
'pick.icon' => $this->trans->t('Pick an icon'),
'pick.icon.search' => $this->trans->t('Search icons'),
'pick.icon.custom.label' => $this->trans->t('Upload a custom icon:'),
'use.icon' => $this->trans->t('Use this icon'),
'selected.icon' => $this->trans->t('Selected icon'),

71
js/app/directives/iconpicker.js
View file

@ -40,6 +40,7 @@
link: function(scope, element) {
IconService.getIcons().then(function(icons) {
scope.iconGroupsAll = icons;
scope.iconGroups = icons;
});
@ -52,7 +53,73 @@
$('.iconList').scrollTop(offset.top);
};
scope.useIcon = function() {
var search = document.getElementById("iconPicker-Search");
search.addEventListener('keypress', function (e) {
if(e.keyCode === 13){
e.preventDefault();
}
});
search.addEventListener('keyup', function (e) {
var g={};
g.Numix=[];
scope.iconGroupsAll.Numix.forEach(function(element) {
if(scope.isAllowedIcon(element))
g.Numix.push(element);
});
g["essential-collection"]=[];
scope.iconGroupsAll["essential-collection"].forEach(function(element) {
if(scope.isAllowedIcon(element))
g["essential-collection"].push(element);
});
g["font-awesome"]=[];
scope.iconGroupsAll["font-awesome"].forEach(function(element) {
if(scope.isAllowedIcon(element))
g["font-awesome"].push(element);
});
scope.iconGroups=g;
scope.$apply();
});
scope.isAllowedIcon = function(IconElement) {
var searchval=search.value.toLowerCase();
var urlCropped = IconElement.url.substring(IconElement.url.lastIndexOf("/")+1, IconElement.url.length);
if(urlCropped.includes(searchval) || IconElement.pack.toLowerCase() ===searchval){
return true;
}
return false;
};
$('#iconPicker-CustomIcon').on('change', function(ev) {
console.log("upload");
scope.customIcon = {};
var f = ev.target.files[0];
var fr = new FileReader();
fr.onload = function(ev2) {
scope.customIcon.data=ev2.target.result;
scope.$apply();
};
fr.readAsDataURL(f);
});
scope.useIcon = function() {
if(scope.customIcon){
var data = scope.customIcon.data;
scope.credential.icon.type = data.substring(data.lastIndexOf(":")+1,data.lastIndexOf(";"));
scope.credential.icon.content = data.substring(data.lastIndexOf(",")+1, data.length);
$('#iconPicker').dialog('close');
return;
}
$http.get(scope.selectedIcon.url).then(function(result) {
var base64Data = window.btoa(result.data);
var mimeType = 'svg+xml';
@ -77,4 +144,4 @@
}
};
}]);
}());
}());

3
sass/credentials.scss
View file

@ -696,4 +696,7 @@
float: right;
width: calc(40% - 10px);
}
.iconSearch {
width: 100%;
}
}

17
templates/views/partials/icon-picker.html
View file

@ -9,16 +9,21 @@
</div>
</div>
<div class="iconModifier">
<input id="iconPicker-Search" class="iconSearch" type="text" placeholder="{{ 'pick.icon.search' | translate }}">
<label for="iconPicker-CustomIcon">{{ 'pick.icon.custom.label' | translate }}<label>
<input id="iconPicker-CustomIcon" class="iconSearch" type="file"/>
<!--
<div ng-repeat="(groupName, icons) in iconGroups">
<a ng-click="jumpToGroup(groupName)">{{groupName}}</a>
</div>-->
<div ng-if="selectedIcon">
{{ 'selected.icon' | translate}}: <br />
<div ng-if="selectedIcon || customIcon">
{{ 'selected.icon' | translate}}: <br />
<img ng-src="{{selectedIcon.url}}" height="32">
<br />
<button ng-click="useIcon()" ng-if="selectedIcon">{{ 'use.icon' | translate}}</button>
</div>
<img ng-src="{{selectedIcon.url}}" height="32" ng-if="!customIcon">
<img src="{{customIcon.data}}" height="32" ng-if="customIcon">
<br />
<button ng-click="useIcon()">{{ 'use.icon' | translate}}</button>
</div>
</div>
</div>