better file upload dialog

This commit is contained in:
Régis Hanol 2013-10-08 18:55:20 +02:00
parent 0bda906da4
commit 2e5e6b8c15
23 changed files with 90 additions and 183 deletions

View File

@ -10,13 +10,8 @@
Discourse.AvatarSelectorController = Discourse.Controller.extend(Discourse.ModalFunctionality, {
actions: {
useUploadedAvatar: function() {
this.set("use_uploaded_avatar", true);
},
useGravatar: function() {
this.set("use_uploaded_avatar", false);
}
useUploadedAvatar: function() { this.set("use_uploaded_avatar", true); },
useGravatar: function() { this.set("use_uploaded_avatar", false); }
},
avatarTemplate: function() {

View File

@ -8,30 +8,13 @@
@module Discourse
**/
Discourse.UploadSelectorController = Discourse.Controller.extend(Discourse.ModalFunctionality, {
localSelected: true,
remoteSelected: Em.computed.not('localSelected'),
local: true,
remote: Em.computed.not("local"),
actions: {
selectLocal: function() { this.set('localSelected', true); },
selectRemote: function() { this.set('localSelected', false); }
},
localTitle: function() { return Discourse.UploadSelectorController.translate("local_title"); }.property(),
remoteTitle: function() { return Discourse.UploadSelectorController.translate("remote_title"); }.property(),
uploadTitle: function() { return Discourse.UploadSelectorController.translate("upload_title"); }.property(),
addTitle: function() { return Discourse.UploadSelectorController.translate("add_title"); }.property(),
localTip: function() {
var opts = { authorized_extensions: Discourse.Utilities.authorizedExtensions() };
return Discourse.UploadSelectorController.translate("local_tip", opts);
}.property(),
remoteTip: function() {
var opts = { authorized_extensions: Discourse.Utilities.authorizedExtensions() };
return Discourse.UploadSelectorController.translate("remote_tip", opts);
}.property(),
addUploadIcon: function() { return Discourse.Utilities.allowsAttachments() ? "icon-file-alt" : "icon-picture"; }.property()
useLocal: function() { this.set("local", true); },
useRemote: function() { this.set("local", false); }
}
});

View File

@ -1,36 +1,24 @@
<ul class="nav nav-pills">
<li {{bindAttr title="localTitle" class="localSelected:active"}}>
<a href="#" {{action selectLocal}}>{{i18n upload_selector.from_my_computer}}</a>
</li>
<li {{bindAttr title="remoteTitle" class="remoteSelected:active"}}>
<a href="#" {{action selectRemote}}>{{i18n upload_selector.from_the_web}}</a>
</li>
</ul>
<div class="modal-body">
<input type="radio" id="local" value="local" name="upload" {{action useLocal}}>
<label class="radio" for="local">{{i18n upload_selector.from_my_computer}}</label>
<div class="inputs">
{{#if controller.local}}
<input type="file" id="filename-input">
{{else}}
<input type="text" id="fileurl-input">
{{/if}}
<br>
<span class="description">{{view.tip}}</span>
</div>
<br>
<input type="radio" id="remote" value="remote" name="upload" {{action useRemote}}>
<label class="radio" for="remote">{{i18n upload_selector.from_the_web}}</label>
</div>
{{#if localSelected}}
<div class='modal-body'>
<form>
<input type="file" name="file" id="filename-input" value="browse"><br>
<span class='description'>{{localTip}}</span> <br>
</form>
</div>
<div class='modal-footer'>
<button class='btn btn-large btn-primary' {{action upload target="view"}}>
<span class='add-upload'><i {{bindAttr class="addUploadIcon"}}></i><i class='icon-plus'></i></span>
{{uploadTitle}}
</button>
</div>
{{else}}
<div class='modal-body'>
<form>
<input type="text" name="text" id="fileurl-input" autofocus><br>
<span class='description'>{{remoteTip}}</span> <br>
</form>
</div>
<div class='modal-footer'>
<button class='btn btn-large btn-primary' {{action add target="view"}}>
<span class='add-upload'><i {{bindAttr class="addUploadIcon"}}></i><i class='icon-plus'></i></span>
{{addTitle}}
</button>
</div>
{{/if}}
<div class="modal-footer">
<button class="btn btn-primary" data-dismiss="modal" {{action upload target="view"}}>
<span class='add-upload'><i {{bindAttr class="view.uploadIcon"}}></i><i class='icon-plus'></i></span>
{{i18n upload}}
</button>
<a data-dismiss="modal">{{i18n cancel}}</a>
</div>

View File

@ -18,7 +18,7 @@ Discourse.AvatarSelectorView = Discourse.ModalBodyView.extend({
imageIsNotASquare : false,
didInsertElement: function() {
var view = this;
var self = this;
var $upload = $("#avatar-input");
this._super();
@ -35,13 +35,12 @@ Discourse.AvatarSelectorView = Discourse.ModalBodyView.extend({
$upload.fileupload({
url: Discourse.getURL("/users/" + this.get("controller.username") + "/preferences/avatar"),
dataType: "json",
timeout: 20000,
fileInput: $upload
});
// when a file has been selected
$upload.on("fileuploadadd", function (e, data) {
view.setProperties({
self.setProperties({
uploading: true,
imageIsNotASquare: false
});
@ -50,24 +49,24 @@ Discourse.AvatarSelectorView = Discourse.ModalBodyView.extend({
// when there is a progression for the upload
$upload.on("fileuploadprogressall", function (e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
view.set("uploadProgress", progress);
self.set("uploadProgress", progress);
});
// when the upload is successful
$upload.on("fileuploaddone", function (e, data) {
// indicates the users is using an uploaded avatar
view.get("controller").setProperties({
self.get("controller").setProperties({
has_uploaded_avatar: true,
use_uploaded_avatar: true
});
// display a warning whenever the image is not a square
view.set("imageIsNotASquare", data.result.width !== data.result.height);
self.set("imageIsNotASquare", data.result.width !== data.result.height);
// in order to be as much responsive as possible, we're cheating a bit here
// indeed, the server gives us back the url to the file we've just uploaded
// often, this file is not a square, so we need to crop it properly
// this will also capture the first frame of animated avatars when they're not allowed
Discourse.Utilities.cropAvatar(data.result.url, data.files[0].type).then(function(avatarTemplate) {
view.get("controller").set("uploaded_avatar_template", avatarTemplate);
self.get("controller").set("uploaded_avatar_template", avatarTemplate);
});
});
@ -78,7 +77,7 @@ Discourse.AvatarSelectorView = Discourse.ModalBodyView.extend({
// when the upload is done
$upload.on("fileuploadalways", function (e, data) {
view.setProperties({ uploading: false, uploadProgress: 0 });
self.setProperties({ uploading: false, uploadProgress: 0 });
});
},
@ -89,10 +88,10 @@ Discourse.AvatarSelectorView = Discourse.ModalBodyView.extend({
// *HACK* used to select the proper radio button
selectedChanged: function() {
var view = this;
var self = this;
Em.run.next(function() {
var value = view.get('controller.use_uploaded_avatar') ? 'uploaded_avatar' : 'gravatar';
view.$('input:radio[name="avatar"]').val([value]);
var value = self.get('controller.use_uploaded_avatar') ? 'uploaded_avatar' : 'gravatar';
$('input:radio[name="avatar"]').val([value]);
});
}.observes('controller.use_uploaded_avatar'),

View File

@ -11,14 +11,37 @@ Discourse.UploadSelectorView = Discourse.ModalBodyView.extend({
classNames: ['upload-selector'],
title: function() { return Discourse.UploadSelectorController.translate("title"); }.property(),
uploadIcon: function() { return Discourse.Utilities.allowsAttachments() ? "icon-file-alt" : "icon-picture"; }.property(),
upload: function() {
$('#reply-control').fileupload('add', { fileInput: $('#filename-input') });
tip: function() {
var source = this.get("controller.local") ? "local" : "remote";
var opts = { authorized_extensions: Discourse.Utilities.authorizedExtensions() };
return Discourse.UploadSelectorController.translate(source + "_tip", opts);
}.property("controller.local"),
didInsertElement: function() {
this._super();
this.selectedChanged();
},
add: function() {
this.get('controller.composerView').addMarkdown($('#fileurl-input').val());
this.get('controller').send('closeModal');
selectedChanged: function() {
var self = this;
Em.run.next(function() {
// *HACK* to select the proper radio button
var value = self.get('controller.local') ? 'local' : 'remote';
$('input:radio[name="upload"]').val([value]);
// focus the input
$('.inputs input:first').focus();
});
}.observes('controller.local'),
upload: function() {
if (this.get("controller.local")) {
$('#reply-control').fileupload('add', { fileInput: $('#filename-input') });
} else {
this.get('controller.composerView').addMarkdown($('#fileurl-input').val());
this.get('controller').send('closeModal');
}
}
});

View File

@ -13,14 +13,23 @@
}
.upload-selector {
input[type="text"]{
width: 520px;
label {
display: inline-block;
padding-left: 10px;
}
input[type="file"] {
font-size: 14px;
line-height: 18px;
}
.description {
color: #9a9ea0;
.inputs {
float: right;
width: 75%;
input {
width: 90%;
margin: 0 0 5px 0;
}
input[type="file"] {
font-size: 14px;
line-height: 18px;
}
.description {
color: #9a9ea0;
}
}
}

View File

@ -512,18 +512,10 @@ cs:
title_with_attachments: "Nahrát obrázek nebo soubor"
from_my_computer: "Z mého zařízení"
from_the_web: "Z webu"
add_title: "Přidat obrázek"
add_title_with_attachments: "Přidat obrázek nebo soubor"
remote_title: "obrázek ze vzdáleného úložistě"
remote_title_with_attachments: "obrázek nebo soubor ze vzdáleného úložistě"
remote_tip: "zadejte adresu obrázku ve formátu http://example.com/image.jpg"
remote_tip_with_attachments: "zadejte adresu obrázku nebo souboru ve formátu http://example.com/file.ext"
local_title: "obrázek z lokálního úložiště"
local_title_with_attachments: "obrázek nebo soubor z lokálního úložiště"
local_tip: "klikněte sem pro výběr obrázku z vašeho zařízení."
local_tip_with_attachments: "klikněte sem pro výběr obrázku nebo souboru z vašeho zařízení."
upload_title: "Nahrát obrázek"
upload_title_with_attachments: "Nahrát obrázek nebo soubor"
uploading: "Nahrávám"
search:

View File

@ -348,10 +348,8 @@ da:
title: "Indsæt billede"
from_my_computer: "Fra min computer"
from_the_web: "Fra nettet"
add_title: "Indsæt billede"
remote_tip: "skriv adressen på et billede i formen http://example.com/billede.jpg"
local_tip: "klik for at vælge et billede fra din computer."
upload_title: "Upload"
uploading: "Uploader billede"
search:

View File

@ -522,18 +522,10 @@ de:
title_with_attachments: "Bild oder Datei hochladen"
from_my_computer: "Von meinem Gerät"
from_the_web: "Aus dem Web"
add_title: "Bild hinzufügen"
add_title_with_attachments: "Bild oder Datei hinzufügen"
remote_title: "Entferntes Bild"
remote_title_with_attachments: "Entferntes Bild oder Datei"
remote_tip: "Gib die Adresse eines Bildes wie folgt ein: http://example.com/image.jpg"
remote_tip_with_attachments: "Gib die Adresse eines Bildes oder Datei wie folgt ein http://example.com/file.ext (Erlaubte Dateiendungen: {{authorized_extensions}})."
local_title: "Lokales Bild"
local_title_with_attachments: "Lokales Bild oder Datei"
local_tip: "Klicke hier, um ein Bild von deinem Gerät zu wählen."
local_tip_with_attachments: "Klicke hier, um ein Bild oder eine Datei von deinem Gerät zu wählen (Erlaubte Dateiendungen: {{authorized_extensions}})"
upload_title: "Bild hochladen"
upload_title_with_attachments: "Bild oder Datei hochladen"
uploading: "Hochgeladen..."
search:

View File

@ -518,22 +518,14 @@ en:
total_flagged: "total flagged posts"
upload_selector:
title: "Upload an image"
title_with_attachments: "Upload an image or a file"
from_my_computer: "From My Device"
from_the_web: "From The Web"
add_title: "Add image"
add_title_with_attachments: "Add image or file"
remote_title: "remote image"
remote_title_with_attachments: "remote image or file"
title: "Add an image"
title_with_attachments: "Add an image or a file"
from_my_computer: "From my device"
from_the_web: "From the web"
remote_tip: "enter address of an image in the form http://example.com/image.jpg"
remote_tip_with_attachments: "enter address of an image or a file in the form http://example.com/file.ext (allowed extensions: {{authorized_extensions}})."
local_title: "local image"
local_title_with_attachments: "local image or file"
local_tip: "click to select an image from your device"
local_tip_with_attachments: "click to select an image or a file from your device (allowed extensions: {{authorized_extensions}})"
upload_title: "Upload image"
upload_title_with_attachments: "Upload image or file"
uploading: "Uploading"
search:

View File

@ -434,10 +434,8 @@ es:
title: "Insertar Imagen"
from_my_computer: "Desde Mí Dispositivo"
from_the_web: "Desde La Web"
add_title: "Agregar Imagen"
remote_tip: "ingrese una dirección de una imagen en la siguiente forma http://ejemplo.com/imagen.jpg"
local_tip: "click para seleccionar la imagen desde su dispositivo."
upload_title: "Subir"
uploading: "Subiendo imagen"
search:

View File

@ -504,18 +504,10 @@ fr:
title_with_attachments: "Insérer une image ou un fichier"
from_my_computer: "Depuis mon ordinateur"
from_the_web: "Depuis le Web"
add_title: "Ajouter l'image"
add_title_with_attachments: "Ajouter le fichier"
remote_title: "Image distante"
remote_title_with_attachments: "Fichier distant"
remote_tip: "saisissez l'url de l'image - par exemple : http://monsite.com/image.jpg (extensions autorisées : {{authorized_extensions}})."
remote_tip_with_attachments: "saisissez l'url du fichier - par exemple : http://monsite.com/fichier.txt (extensions autorisées : {{authorized_extensions}})."
local_title: "Image locale"
local_title_with_attachments: "Fichier local"
local_tip: "Cliquez pour sélectionner une image depuis votre ordinateur (extensions autorisées : {{authorized_extensions}})."
local_tip_with_attachments: "Cliquez pour sélectionner un fichier depuis votre ordinateur (extensions autorisées : {{authorized_extensions}})."
upload_title: "Envoyer l'image"
upload_title_with_attachments: "Envoyer le fichier"
uploading: "Fichier en cours d'envoi..."
search:

View File

@ -312,10 +312,8 @@ id:
title: "Insert Image"
from_my_computer: "From My Device"
from_the_web: "From The Web"
add_title: "Add Image"
remote_tip: "enter address of an image in the form http://example.com/image.jpg"
local_tip: "click to select an image from your device."
upload_title: "Upload"
uploading: "Uploading image"
search:

View File

@ -519,18 +519,10 @@ it:
title_with_attachments: "Carica un'immagine od un file"
from_my_computer: "Dal mio dispositivo"
from_the_web: "Dal Web"
add_title: "Aggiungi immagine"
add_title_with_attachments: "Aggiugni immagine o file"
remote_title: "immagine remota"
remote_title_with_attachments: "immagine o file remoto"
remote_tip: "inserisci l'indirizzo dell'immagine (es. http://example.com/image.jpg)"
remote_tip_with_attachments: "inserisci l'indirizzo di un'immagine o di un file nel form http://esempio.com/file.ext (estensioni supportate: {{authorized_extensions}})."
local_title: "immagine locale"
local_title_with_attachments: "immagine o file locale"
local_tip: "clicca per selezionare un'immagine dal tuo dispositivo."
local_tip_with_attachments: "click per selezionare un'immagine od un file dal tuo dispositivo (estensioni supportate: {{authorized_extensions}})"
upload_title: "Upload"
upload_title_with_attachments: "Carica immagine o file"
uploading: "Caricamento"
search:

View File

@ -428,12 +428,8 @@ nb_NO:
title: "Legg til Bilde"
from_my_computer: "Fra Min Enhet"
from_the_web: "Fra Nettet"
add_title: "Legg til Bilde"
remote_title: "eksternt bilde"
remote_tip: "skriv inn addressen til et bilde, f.eks. http://example.com/image.jpg"
local_title: "lokalt bilde"
local_tip: "klikk for å velge et bilde fra din enhet."
upload_title: "Last opp"
uploading: "Laster opp bilde"
search:

View File

@ -493,18 +493,10 @@ nl:
title_with_attachments: Voeg een afbeelding of bestand toe
from_my_computer: Vanaf mijn apparaat
from_the_web: Vanaf het web
add_title: Voeg afbeelding toe
add_title_with_attachments: Voeg afbeelding of bestand toe
remote_title: externe afbeelding
remote_title_with_attachments: externe afbeelding of bestand
remote_tip: "vul een internetadres in van een afbeelding in deze vorm: http://example.com/image.jpg"
remote_tip_with_attachments: "vul een internetadres in van een afbeelding of bestand in deze vorm: http://example.com/bestand.ext (toegestane extensies: {{authorized_extensions}})."
local_title: lokale afbeelding
local_title_with_attachments: lokale afbeelding of bestand
local_tip: "klik om een afbeelding vanaf je apparaat te selecteren."
local_tip_with_attachments: "klik om een afbeelding of bestand vanaf je apparaat te selecteren (toegestane extensies: {{authorized_extensions}})."
upload_title: Uploaden
upload_title_with_attachments: Uploaden
uploading: Afbeelding uploaden
search:

View File

@ -472,13 +472,9 @@ pseudo:
title: '[[ Íɳšéřť Íɱáǧé ]]'
from_my_computer: '[[ Ƒřóɱ Ϻý Ďéνíčé ]]'
from_the_web: '[[ Ƒřóɱ Ťĥé Ŵéƀ ]]'
add_title: '[[ Áďď Íɱáǧé ]]'
remote_title: '[[ řéɱóťé íɱáǧé ]]'
remote_tip: '[[ éɳťéř áďďřéšš óƒ áɳ íɱáǧé íɳ ťĥé ƒóřɱ ĥťťƿ://éхáɱƿłé.čóɱ/íɱáǧé.ʲƿǧ
]]'
local_title: '[[ łóčáł íɱáǧé ]]'
local_tip: '[[ čłíčǩ ťó šéłéčť áɳ íɱáǧé ƒřóɱ ýóůř ďéνíčé. ]]'
upload_title: '[[ Ůƿłóáď ]]'
uploading: '[[ Ůƿłóáďíɳǧ íɱáǧé ]]'
search:
title: '[[ šéářčĥ ƒóř ťóƿíčš, ƿóšťš, ůšéřš, óř čáťéǧóříéš ]]'

View File

@ -302,10 +302,8 @@ pt:
upload_selector:
from_my_computer: "Do meu dispositivo"
from_the_web: "Da internet"
add_title: "Adicionar Imagem"
remote_tip: "insere o endereço de uma imagem no formato http://example.com/image.jpg"
local_tip: "clica para selecionar uma imagem no teu dispositivo."
upload_title: "Enviar"
uploading: "A enviar imagem"
search:

View File

@ -432,12 +432,8 @@ pt_BR:
title: "Enviar arquivo"
from_my_computer: "Do Meu Dispositivo"
from_the_web: "Da Internet"
add_title: "Adicionar Arquivo"
remote_title: "arquivo remoto"
remote_tip: "digite o endereço de um arquivo na forma http://exemplo.com/imagem.jpg"
local_title: "arquivo local"
local_tip: "clique para selecionar um arquivo do seu dispositivo"
upload_title: "Enviar"
uploading: "Enviando"
search:
title: "procurar por tópicos, posts, usuários, ou categorias"

View File

@ -521,18 +521,10 @@ ru:
title_with_attachments: Загрузить изображение или файл
from_my_computer: С устройства
from_the_web: Из интернета
add_title: Добавить изображение
add_title_with_attachments: Добавить изображение или файл
remote_title: изображение из интернета
remote_title_with_attachments: изображение или файл из интернета
remote_tip: введите адрес изображения в формате http://example.com/image.jpg
remote_tip_with_attachments: 'Введите адрес изображения или файла в формате http://example.com/file.ext (список доступных расширений: {{authorized_extensions}}).'
local_title: локальное изображение
local_title_with_attachments: локальное изображение или файл
local_tip: кликните для выбора изображения с вашего устройства
local_tip_with_attachments: 'кликните для выбора изображения с вашего устройства (доступные расширения: {{authorized_extensions}})'
upload_title: Загрузить изображение
upload_title_with_attachments: Загрузить изображение или файл
uploading: Загрузка
search:
title: поиск по темам, сообщениям, пользователям или категориям

View File

@ -354,10 +354,8 @@ sv:
title: "Infoga Bild"
from_my_computer: "Från Min Enhet"
from_the_web: "Från Internet"
add_title: "Lägg Till Bild"
remote_tip: "skriv in en adress till en bild i formen http://exempel.se/bild.jpg"
local_tip: "klicka för att välja en bild från din enhet."
upload_title: "Ladda Upp"
uploading: "Laddar upp bild"
search:

View File

@ -204,7 +204,7 @@ zh_CN:
moderator: "{{user}} 是版主"
admin: "{{user}} 是管理员"
deleted: "(已删除)"
messages:
all: "所有"
mine: "我的"
@ -522,18 +522,10 @@ zh_CN:
title_with_attachments: "上传图片或文件"
from_my_computer: "来自我的设备"
from_the_web: "来自网络"
add_title: "添加图片"
add_title_with_attachments: "添加图片或文件"
remote_title: "网络图片"
remote_title_with_attachments: "网络图片或文件"
remote_tip: "输入图片的网址格式为http://example.com/image.jpg"
remote_tip_with_attachments: "输入图片或文件的网址格式为http://example.com/file.ext (支持的格式: {{authorized_extensions}})。"
local_title: "本地图片"
local_title_with_attachments: "本地图片或文件"
local_tip: "点击从你的设备中选择一张图片。"
local_tip_with_attachments: "点击从你的设备中选择图片或文件(支持的格式: {{authorized_extensions}})。"
upload_title: "上传"
upload_title_with_attachments: "上传图片或文件"
uploading: "上传图片中"
search:

View File

@ -477,12 +477,8 @@ zh_TW:
title: "插入圖片"
from_my_computer: "來自我的設備"
from_the_web: "來自網絡"
add_title: "添加圖片"
remote_title: "網絡圖片"
remote_tip: "輸入圖片網絡格式爲http://example.com/image.jpg"
local_title: "本地圖片"
local_tip: "點擊從你的設備中選擇一張圖片。"
upload_title: "上傳"
uploading: "上傳圖片中"
search: