MOBILE-3039 ios: Fix 'More' option in file uploader

main
Dani Palou 2019-06-03 18:26:47 +02:00
parent 240f425d97
commit cb6a9876c3
2 changed files with 30 additions and 1 deletions

View File

@ -98,4 +98,17 @@ ion-app.app-root.ios {
border-color: $checkbox-ios-icon-border-color-off;
background-color: $checkbox-ios-background-color-off;
}
// File Uploader
// In iOS the input is 1 level higher, so the styles are different.
.action-sheet-ios input.core-fileuploader-file-handler-input {
position: absolute;
@include position(null, 0, null, 0);
min-width: 100%;
min-height: $action-sheet-ios-button-min-height;
opacity: 0;
outline: none;
z-index: 100;
cursor: pointer;
}
}

View File

@ -71,6 +71,7 @@ export class CoreFileUploaderFileHandler implements CoreFileUploaderHandler {
if (element) {
const input = document.createElement('input');
input.setAttribute('type', 'file');
input.classList.add('core-fileuploader-file-handler-input');
if (mimetypes && mimetypes.length && (!this.platform.is('android') || mimetypes.length == 1)) {
// Don't use accept attribute in Android with several mimetypes, it's not supported.
input.setAttribute('accept', mimetypes.join(', '));
@ -112,9 +113,24 @@ export class CoreFileUploaderFileHandler implements CoreFileUploaderHandler {
});
});
if (this.platform.is('ios')) {
// In iOS, the click on the input stopped working for some reason. We need to put it 1 level higher.
element.parentElement.appendChild(input);
// Animate the button when the input is clicked.
input.addEventListener('mousedown', () => {
element.classList.add('activated');
});
input.addEventListener('mouseup', () => {
this.platform.timeout(() => {
element.classList.remove('activated');
}, 80);
});
} else {
element.appendChild(input);
}
}
}
};
}
}