From 04be57ec92da0bea13819d8075ea0d9187d620f6 Mon Sep 17 00:00:00 2001 From: Baptiste Gelez Date: Tue, 26 Feb 2019 21:33:11 +0100 Subject: [PATCH 1/5] Slightly improve the media experience - Use a grid to display the list of media - Add icons for non-image media preview - Paginate the gallery - Add links to the gallery in the editor and in the profile settings to make it more discoverable when you need it Fixes #432 --- .editorconfig | 1 + plume-models/src/medias.rs | 46 +++++++---- po/plume/ar.po | 24 ++++++ po/plume/de.po | 23 ++++++ po/plume/en.po | 20 +++++ po/plume/es.po | 20 +++++ po/plume/fr.po | 23 ++++++ po/plume/gl.po | 23 ++++++ po/plume/it.po | 23 ++++++ po/plume/ja.po | 24 ++++++ po/plume/nb.po | 22 +++++ po/plume/pl.po | 24 ++++++ po/plume/plume.pot | 18 +++++ po/plume/pt.po | 24 ++++++ po/plume/ru.po | 24 ++++++ src/routes/medias.rs | 17 ++-- static/images/audio-file.svg | 65 +++++++++++++++ static/images/unknown-file.svg | 65 +++++++++++++++ static/images/video-file.svg | 115 +++++++++++++++++++++++++++ templates/medias/details.rs.html | 2 +- templates/medias/index.rs.html | 44 +++++----- templates/partials/post_card.rs.html | 4 +- templates/posts/new.rs.html | 4 + templates/users/dashboard.rs.html | 2 +- templates/users/edit.rs.html | 4 + 25 files changed, 614 insertions(+), 47 deletions(-) create mode 100644 static/images/audio-file.svg create mode 100644 static/images/unknown-file.svg create mode 100644 static/images/video-file.svg diff --git a/.editorconfig b/.editorconfig index 824d5aa1..6409424f 100644 --- a/.editorconfig +++ b/.editorconfig @@ -7,6 +7,7 @@ trim_trailing_whitespace = true [*.{js,rs,css,tera,html}] charset = utf-8 +indent_size = 4 [*.{rs,tera,css,html}] indent_style = space diff --git a/plume-models/src/medias.rs b/plume-models/src/medias.rs index d55b9e33..eaf2b1fa 100644 --- a/plume-models/src/medias.rs +++ b/plume-models/src/medias.rs @@ -56,6 +56,23 @@ impl Media { .map_err(Error::from) } + pub fn page_for_user(conn: &Connection, user: &User, (min, max): (i32, i32)) -> Result> { + medias::table + .filter(medias::owner_id.eq(user.id)) + .offset(min as i64) + .limit((max - min) as i64) + .load::(conn) + .map_err(Error::from) + } + + pub fn count_for_user(conn: &Connection, user: &User) -> Result { + medias::table + .filter(medias::owner_id.eq(user.id)) + .count() + .get_result(conn) + .map_err(Error::from) + } + pub fn category(&self) -> MediaCategory { match &*self .file_path @@ -71,23 +88,18 @@ impl Media { } } - pub fn preview_html(&self, conn: &Connection) -> Result { - let url = self.url(conn)?; - Ok(match self.category() { - MediaCategory::Image => SafeString::new(&format!( - r#"{}"#, - url, escape(&self.alt_text), escape(&self.alt_text) - )), - MediaCategory::Audio => SafeString::new(&format!( - r#""#, - url, escape(&self.alt_text) - )), - MediaCategory::Video => SafeString::new(&format!( - r#""#, - url, escape(&self.alt_text) - )), - MediaCategory::Unknown => SafeString::new(""), - }) + pub fn preview_image(&self, conn: &Connection) -> String { + let (url, is_icon) = match self.category() { + MediaCategory::Image => (self.url(conn).unwrap_or(String::new()), false), + MediaCategory::Audio => ("/static/images/audio-file.svg".into(), true), + MediaCategory::Video => ("/static/images/video-file.svg".into(), true), + MediaCategory::Unknown => ("/static/images/unknown-file.svg".into(), true), + }; + if is_icon { + format!("background-image: url('{}'); background-color: #7765E3; background-repeat: no-repeat; background-position: center; background-size: 4em;", url) + } else { + format!("background-image: url('{}')", url) + } } pub fn html(&self, conn: &Connection) -> Result { diff --git a/po/plume/ar.po b/po/plume/ar.po index 3f016e54..379f7c6e 100644 --- a/po/plume/ar.po +++ b/po/plume/ar.po @@ -220,6 +220,13 @@ msgstr "تعديل حسابك" msgid "Your Profile" msgstr "ملفك الشخصي" +msgid "To change your avatar, upload it in your gallery and select from there." +msgstr "" + +#, fuzzy +msgid "Upload an avatar" +msgstr "استخدمها كصورة رمزية" + #, fuzzy msgid "Display name" msgstr "الاسم العلني" @@ -480,6 +487,15 @@ msgstr "العنوان الثانوي" msgid "Content" msgstr "المحتوى" +msgid "" +"You can upload medias to your gallery, and copy their Markdown code in your " +"articles to insert them." +msgstr "" + +#, fuzzy +msgid "Upload media" +msgstr "إرسال" + # src/template_utils.rs:144 msgid "Tags, separated by commas" msgstr "" @@ -673,9 +689,17 @@ msgstr "إرسال" msgid "You don't have any media yet." msgstr "ليس لديك أية وسائط بعد." +#, fuzzy +msgid "Content warning: {0}" +msgstr "تحذير عن المحتوى" + msgid "Delete" msgstr "حذف" +#, fuzzy +msgid "Details" +msgstr "تفاصيل الصورة" + msgid "Media upload" msgstr "إرسال الوسائط" diff --git a/po/plume/de.po b/po/plume/de.po index 2fdc0fc0..06f6a5ba 100644 --- a/po/plume/de.po +++ b/po/plume/de.po @@ -232,6 +232,13 @@ msgstr "Ändere deinen Account" msgid "Your Profile" msgstr "Dein Profil" +msgid "To change your avatar, upload it in your gallery and select from there." +msgstr "" + +#, fuzzy +msgid "Upload an avatar" +msgstr "Als Avatar verwenden" + #, fuzzy msgid "Display name" msgstr "Anzeigename" @@ -495,6 +502,15 @@ msgstr "Untertitel" msgid "Content" msgstr "Inhalt" +msgid "" +"You can upload medias to your gallery, and copy their Markdown code in your " +"articles to insert them." +msgstr "" + +#, fuzzy +msgid "Upload media" +msgstr "Hochladen" + # src/template_utils.rs:143 msgid "Tags, separated by commas" msgstr "" @@ -690,9 +706,16 @@ msgstr "Hochladen" msgid "You don't have any media yet." msgstr "Derzeit sind noch keine Mediendateien hochgeladen." +#, fuzzy +msgid "Content warning: {0}" +msgstr "Warnhinweis zum Inhalt" + msgid "Delete" msgstr "Löschen" +msgid "Details" +msgstr "" + msgid "Media upload" msgstr "Hochladen von Mediendateien" diff --git a/po/plume/en.po b/po/plume/en.po index 3332bfbf..730e464b 100644 --- a/po/plume/en.po +++ b/po/plume/en.po @@ -225,6 +225,12 @@ msgstr "" msgid "Your Profile" msgstr "" +msgid "To change your avatar, upload it in your gallery and select from there." +msgstr "" + +msgid "Upload an avatar" +msgstr "" + # src/template_utils.rs:144 msgid "Display name" msgstr "" @@ -473,6 +479,14 @@ msgstr "" msgid "Content" msgstr "" +msgid "" +"You can upload medias to your gallery, and copy their Markdown code in your " +"articles to insert them." +msgstr "" + +msgid "Upload media" +msgstr "" + # src/template_utils.rs:144 msgid "Tags, separated by commas" msgstr "" @@ -638,9 +652,15 @@ msgstr "" msgid "You don't have any media yet." msgstr "" +msgid "Content warning: {0}" +msgstr "" + msgid "Delete" msgstr "" +msgid "Details" +msgstr "" + msgid "Media upload" msgstr "" diff --git a/po/plume/es.po b/po/plume/es.po index a67d9985..54de1314 100644 --- a/po/plume/es.po +++ b/po/plume/es.po @@ -213,6 +213,12 @@ msgstr "Edita tu cuenta" msgid "Your Profile" msgstr "Tu perfil" +msgid "To change your avatar, upload it in your gallery and select from there." +msgstr "" + +msgid "Upload an avatar" +msgstr "" + # src/template_utils.rs:144 msgid "Display name" msgstr "" @@ -457,6 +463,14 @@ msgstr "" msgid "Content" msgstr "Contenido" +msgid "" +"You can upload medias to your gallery, and copy their Markdown code in your " +"articles to insert them." +msgstr "" + +msgid "Upload media" +msgstr "" + # src/template_utils.rs:144 msgid "Tags, separated by commas" msgstr "" @@ -626,9 +640,15 @@ msgstr "" msgid "You don't have any media yet." msgstr "" +msgid "Content warning: {0}" +msgstr "" + msgid "Delete" msgstr "" +msgid "Details" +msgstr "" + msgid "Media upload" msgstr "" diff --git a/po/plume/fr.po b/po/plume/fr.po index 0542d8d0..075286d8 100644 --- a/po/plume/fr.po +++ b/po/plume/fr.po @@ -231,6 +231,13 @@ msgstr "Modifier votre compte" msgid "Your Profile" msgstr "Votre profil" +msgid "To change your avatar, upload it in your gallery and select from there." +msgstr "" + +#, fuzzy +msgid "Upload an avatar" +msgstr "Utiliser comme avatar" + #, fuzzy msgid "Display name" msgstr "Nom affiché" @@ -490,6 +497,15 @@ msgstr "Sous-titre" msgid "Content" msgstr "Contenu" +msgid "" +"You can upload medias to your gallery, and copy their Markdown code in your " +"articles to insert them." +msgstr "" + +#, fuzzy +msgid "Upload media" +msgstr "Téléverser" + # src/template_utils.rs:143 msgid "Tags, separated by commas" msgstr "" @@ -684,9 +700,16 @@ msgstr "Téléverser" msgid "You don't have any media yet." msgstr "Vous n’avez pas encore de média." +#, fuzzy +msgid "Content warning: {0}" +msgstr "Avertissement" + msgid "Delete" msgstr "Supprimer" +msgid "Details" +msgstr "" + msgid "Media upload" msgstr "Téléversement de média" diff --git a/po/plume/gl.po b/po/plume/gl.po index b12ebcd4..3a18778b 100644 --- a/po/plume/gl.po +++ b/po/plume/gl.po @@ -231,6 +231,13 @@ msgstr "Edite a súa conta" msgid "Your Profile" msgstr "O seu perfil" +msgid "To change your avatar, upload it in your gallery and select from there." +msgstr "" + +#, fuzzy +msgid "Upload an avatar" +msgstr "Utilizar como avatar" + #, fuzzy msgid "Display name" msgstr "Nome mostrado" @@ -490,6 +497,15 @@ msgstr "Subtítulo" msgid "Content" msgstr "Contido" +msgid "" +"You can upload medias to your gallery, and copy their Markdown code in your " +"articles to insert them." +msgstr "" + +#, fuzzy +msgid "Upload media" +msgstr "Subir" + # src/template_utils.rs:143 msgid "Tags, separated by commas" msgstr "" @@ -680,9 +696,16 @@ msgstr "Subir" msgid "You don't have any media yet." msgstr "Aínda non ten medios" +#, fuzzy +msgid "Content warning: {0}" +msgstr "Aviso sobre o contido" + msgid "Delete" msgstr "Eliminar" +msgid "Details" +msgstr "" + msgid "Media upload" msgstr "Subir medios" diff --git a/po/plume/it.po b/po/plume/it.po index 4353996d..0d26a5f1 100644 --- a/po/plume/it.po +++ b/po/plume/it.po @@ -231,6 +231,13 @@ msgstr "Modifica il tuo account" msgid "Your Profile" msgstr "Il tuo Profilo" +msgid "To change your avatar, upload it in your gallery and select from there." +msgstr "" + +#, fuzzy +msgid "Upload an avatar" +msgstr "Usa come avatar" + #, fuzzy msgid "Display name" msgstr "Nome Visualizzato" @@ -493,6 +500,15 @@ msgstr "Sottotitolo" msgid "Content" msgstr "Contenuto" +msgid "" +"You can upload medias to your gallery, and copy their Markdown code in your " +"articles to insert them." +msgstr "" + +#, fuzzy +msgid "Upload media" +msgstr "Carica" + # src/template_utils.rs:143 msgid "Tags, separated by commas" msgstr "" @@ -687,9 +703,16 @@ msgstr "Carica" msgid "You don't have any media yet." msgstr "Non hai ancora nessun media." +#, fuzzy +msgid "Content warning: {0}" +msgstr "Avviso di contenuto sensibile" + msgid "Delete" msgstr "Elimina" +msgid "Details" +msgstr "" + msgid "Media upload" msgstr "Caricamento di un media" diff --git a/po/plume/ja.po b/po/plume/ja.po index fff56f0a..03fe5892 100644 --- a/po/plume/ja.po +++ b/po/plume/ja.po @@ -224,6 +224,13 @@ msgstr "自分のアカウントを編集" msgid "Your Profile" msgstr "自分のプロフィール" +msgid "To change your avatar, upload it in your gallery and select from there." +msgstr "" + +#, fuzzy +msgid "Upload an avatar" +msgstr "アバターとして使う" + #, fuzzy msgid "Display name" msgstr "表示名" @@ -485,6 +492,15 @@ msgstr "サブタイトル" msgid "Content" msgstr "コメント" +msgid "" +"You can upload medias to your gallery, and copy their Markdown code in your " +"articles to insert them." +msgstr "" + +#, fuzzy +msgid "Upload media" +msgstr "アップロード" + # src/template_utils.rs:144 msgid "Tags, separated by commas" msgstr "" @@ -663,9 +679,17 @@ msgstr "アップロード" msgid "You don't have any media yet." msgstr "メディアがまだありません。" +#, fuzzy +msgid "Content warning: {0}" +msgstr "コンテンツの警告" + msgid "Delete" msgstr "削除" +#, fuzzy +msgid "Details" +msgstr "メディアの詳細" + msgid "Media upload" msgstr "メディアのアップロード" diff --git a/po/plume/nb.po b/po/plume/nb.po index 102fd35f..7983a971 100644 --- a/po/plume/nb.po +++ b/po/plume/nb.po @@ -237,6 +237,12 @@ msgstr "Rediger kontoen din" msgid "Your Profile" msgstr "Din profil" +msgid "To change your avatar, upload it in your gallery and select from there." +msgstr "" + +msgid "Upload an avatar" +msgstr "" + #, fuzzy msgid "Display name" msgstr "Visningsnavn" @@ -519,6 +525,15 @@ msgstr "Tittel" msgid "Content" msgstr "Innhold" +msgid "" +"You can upload medias to your gallery, and copy their Markdown code in your " +"articles to insert them." +msgstr "" + +#, fuzzy +msgid "Upload media" +msgstr "Din kommentar" + # src/template_utils.rs:143 msgid "Tags, separated by commas" msgstr "" @@ -702,9 +717,16 @@ msgstr "" msgid "You don't have any media yet." msgstr "" +#, fuzzy +msgid "Content warning: {0}" +msgstr "Innhold" + msgid "Delete" msgstr "" +msgid "Details" +msgstr "" + msgid "Media upload" msgstr "" diff --git a/po/plume/pl.po b/po/plume/pl.po index df49c2b7..c5f29a1d 100644 --- a/po/plume/pl.po +++ b/po/plume/pl.po @@ -206,6 +206,13 @@ msgstr "Edytuj swoje konto" msgid "Your Profile" msgstr "Twój profil" +msgid "To change your avatar, upload it in your gallery and select from there." +msgstr "" + +#, fuzzy +msgid "Upload an avatar" +msgstr "Użyj jako awataru" + msgid "Display name" msgstr "Nazwa wyświetlana" @@ -459,6 +466,15 @@ msgstr "Podtytuł" msgid "Content" msgstr "Zawartość" +msgid "" +"You can upload medias to your gallery, and copy their Markdown code in your " +"articles to insert them." +msgstr "" + +#, fuzzy +msgid "Upload media" +msgstr "Wyślij" + # src/template_utils.rs:143 msgid "Tags, separated by commas" msgstr "Tagi, oddzielone przecinkami" @@ -632,9 +648,17 @@ msgstr "Wyślij" msgid "You don't have any media yet." msgstr "Nie masz żadnej zawartości multimedialnej." +#, fuzzy +msgid "Content warning: {0}" +msgstr "Ostrzeżenie o zawartości" + msgid "Delete" msgstr "Usuń" +#, fuzzy +msgid "Details" +msgstr "Szczegóły zawartości multimedialnej" + msgid "Media upload" msgstr "Wysyłanie zawartości multimedialnej" diff --git a/po/plume/plume.pot b/po/plume/plume.pot index c359ae06..36a768e4 100644 --- a/po/plume/plume.pot +++ b/po/plume/plume.pot @@ -223,6 +223,12 @@ msgstr "" msgid "Your Profile" msgstr "" +msgid "To change your avatar, upload it in your gallery and select from there." +msgstr "" + +msgid "Upload an avatar" +msgstr "" + # src/template_utils.rs:144 msgid "Display name" msgstr "" @@ -467,6 +473,12 @@ msgstr "" msgid "Content" msgstr "" +msgid "You can upload medias to your gallery, and copy their Markdown code in your articles to insert them." +msgstr "" + +msgid "Upload media" +msgstr "" + # src/template_utils.rs:144 msgid "Tags, separated by commas" msgstr "" @@ -625,9 +637,15 @@ msgstr "" msgid "You don't have any media yet." msgstr "" +msgid "Content warning: {0}" +msgstr "" + msgid "Delete" msgstr "" +msgid "Details" +msgstr "" + msgid "Media upload" msgstr "" diff --git a/po/plume/pt.po b/po/plume/pt.po index ef72d65f..2b2d7aea 100644 --- a/po/plume/pt.po +++ b/po/plume/pt.po @@ -219,6 +219,13 @@ msgstr "Editar sua conta" msgid "Your Profile" msgstr "Seu Perfil" +msgid "To change your avatar, upload it in your gallery and select from there." +msgstr "" + +#, fuzzy +msgid "Upload an avatar" +msgstr "Utilizar como avatar" + #, fuzzy msgid "Display name" msgstr "Nome exibido" @@ -480,6 +487,15 @@ msgstr "Subtítulo" msgid "Content" msgstr "Conteúdo" +msgid "" +"You can upload medias to your gallery, and copy their Markdown code in your " +"articles to insert them." +msgstr "" + +#, fuzzy +msgid "Upload media" +msgstr "Carregar" + # src/template_utils.rs:144 msgid "Tags, separated by commas" msgstr "" @@ -655,9 +671,17 @@ msgstr "Carregar" msgid "You don't have any media yet." msgstr "Você ainda não tem nenhuma mídia." +#, fuzzy +msgid "Content warning: {0}" +msgstr "Alerta de conteúdo" + msgid "Delete" msgstr "Suprimir" +#, fuzzy +msgid "Details" +msgstr "Detalhes da mídia" + msgid "Media upload" msgstr "Carregamento de mídia" diff --git a/po/plume/ru.po b/po/plume/ru.po index 66fbf9f5..18a10670 100644 --- a/po/plume/ru.po +++ b/po/plume/ru.po @@ -236,6 +236,13 @@ msgstr "Редактировать ваш аккаунт" msgid "Your Profile" msgstr "Ваш профиль" +msgid "To change your avatar, upload it in your gallery and select from there." +msgstr "" + +#, fuzzy +msgid "Upload an avatar" +msgstr "Использовать как аватар" + #, fuzzy msgid "Display name" msgstr "Имя для отображения" @@ -497,6 +504,15 @@ msgstr "Подзаголовок" msgid "Content" msgstr "Содержимое" +msgid "" +"You can upload medias to your gallery, and copy their Markdown code in your " +"articles to insert them." +msgstr "" + +#, fuzzy +msgid "Upload media" +msgstr "Загрузить" + # src/template_utils.rs:143 msgid "Tags, separated by commas" msgstr "" @@ -694,9 +710,17 @@ msgstr "Загрузить" msgid "You don't have any media yet." msgstr "Пока что вы не можете загружать медиафайлы." +#, fuzzy +msgid "Content warning: {0}" +msgstr "Предупреждение о контенте" + msgid "Delete" msgstr "Удалить" +#, fuzzy +msgid "Details" +msgstr "Детали медиафайла" + msgid "Media upload" msgstr "Загрузка медиафайлов" diff --git a/src/routes/medias.rs b/src/routes/medias.rs index 5f287ddf..b8d10b21 100644 --- a/src/routes/medias.rs +++ b/src/routes/medias.rs @@ -5,14 +5,17 @@ use rocket_i18n::I18n; use std::fs; use plume_models::{Error, db_conn::DbConn, medias::*, users::User}; use template_utils::Ructe; -use routes::errors::ErrorPage; +use routes::{Page, errors::ErrorPage}; -#[get("/medias")] -pub fn list(user: User, conn: DbConn, intl: I18n) -> Result { - let medias = Media::for_user(&*conn, user.id)?; +#[get("/medias?")] +pub fn list(user: User, conn: DbConn, intl: I18n, page: Option) -> Result { + let page = page.unwrap_or_default(); + let medias = Media::page_for_user(&*conn, &user, page.limits())?; Ok(render!(medias::index( - &(&*conn, &intl.catalog, Some(user)), - medias + &(&*conn, &intl.catalog, Some(user.clone())), + medias, + page.0, + Page::total(Media::count_for_user(&*conn, &user)? as i32) ))) } @@ -99,7 +102,7 @@ pub fn delete(id: i32, user: User, conn: DbConn) -> Result if media.owner_id == user.id { media.delete(&*conn)?; } - Ok(Redirect::to(uri!(list))) + Ok(Redirect::to(uri!(list: page = _))) } #[post("/medias//avatar")] diff --git a/static/images/audio-file.svg b/static/images/audio-file.svg new file mode 100644 index 00000000..8c8a699c --- /dev/null +++ b/static/images/audio-file.svg @@ -0,0 +1,65 @@ + + + + + + image/svg+xml + + + + + + + + + + diff --git a/static/images/unknown-file.svg b/static/images/unknown-file.svg new file mode 100644 index 00000000..79feb4d3 --- /dev/null +++ b/static/images/unknown-file.svg @@ -0,0 +1,65 @@ + + + + + + image/svg+xml + + + + + + + + + + diff --git a/static/images/video-file.svg b/static/images/video-file.svg new file mode 100644 index 00000000..e1672df8 --- /dev/null +++ b/static/images/video-file.svg @@ -0,0 +1,115 @@ + + + + + + image/svg+xml + + + + + + + + + + + + + + + + diff --git a/templates/medias/details.rs.html b/templates/medias/details.rs.html index 0e740a37..3974b972 100644 --- a/templates/medias/details.rs.html +++ b/templates/medias/details.rs.html @@ -9,7 +9,7 @@ @:base(ctx, i18n!(ctx.1, "Media details"), {}, {}, {

@i18n!(ctx.1, "Media details")

- @i18n!(ctx.1, "Go back to the gallery") + @i18n!(ctx.1, "Go back to the gallery")
diff --git a/templates/medias/index.rs.html b/templates/medias/index.rs.html index d5302bc7..62876bcf 100644 --- a/templates/medias/index.rs.html +++ b/templates/medias/index.rs.html @@ -1,10 +1,9 @@ @use plume_models::medias::Media; -@use plume_models::safe_string::SafeString; @use templates::base; @use template_utils::*; @use routes::*; -@(ctx: BaseContext, medias: Vec) +@(ctx: BaseContext, medias: Vec, page: i32, n_pages: i32) @:base(ctx, i18n!(ctx.1, "Your media"), {}, {}, {

@i18n!(ctx.1, "Your media")

@@ -12,22 +11,29 @@ @i18n!(ctx.1, "Upload") -
- @if medias.is_empty() { -

@i18n!(ctx.1, "You don't have any media yet.")

+ @if medias.is_empty() { +

@i18n!(ctx.1, "You don't have any media yet.")

+ } + +
+ @for media in medias { +
+
+
+

@media.alt_text

+ @if let Some(cw) = media.content_warning { +

@i18n!(ctx.1, "Content warning: {0}"; cw)

+ } +
+ +
} -
- @for media in medias { -
- @Html(media.preview_html(ctx.0).unwrap_or(SafeString::new(""))) -
-

@media.alt_text

-
-
- -
-
- } -
-
+ + @paginate(ctx.1, page, n_pages) }) diff --git a/templates/partials/post_card.rs.html b/templates/partials/post_card.rs.html index 3301cb30..13d31830 100644 --- a/templates/partials/post_card.rs.html +++ b/templates/partials/post_card.rs.html @@ -16,7 +16,7 @@

@article.subtitle

-

+

@Html(i18n!(ctx.1, "By {0}"; format!( "{}", uri!(user::details: name = article.get_authors(ctx.0).unwrap_or_default()[0].get_fqn(ctx.0)), @@ -29,6 +29,6 @@ @if !article.published { ⋅ @i18n!(ctx.1, "Draft") } -

+
diff --git a/templates/posts/new.rs.html b/templates/posts/new.rs.html index af2c47b2..0e472075 100644 --- a/templates/posts/new.rs.html +++ b/templates/posts/new.rs.html @@ -27,6 +27,10 @@ @content_len +

+ @i18n!(ctx.1, "You can upload medias to your gallery, and copy their Markdown code in your articles to insert them.") + @i18n!(ctx.1, "Upload media") +

@input!(ctx.1, tags (optional text), "Tags, separated by commas", form, errors.clone(), "") diff --git a/templates/users/dashboard.rs.html b/templates/users/dashboard.rs.html index ae357c6a..e9da2cd8 100644 --- a/templates/users/dashboard.rs.html +++ b/templates/users/dashboard.rs.html @@ -37,6 +37,6 @@

@i18n!(ctx.1, "Your media")

- @i18n!(ctx.1, "Go to your gallery") + @i18n!(ctx.1, "Go to your gallery")
}) diff --git a/templates/users/edit.rs.html b/templates/users/edit.rs.html index 7c7e6dc7..592f2901 100644 --- a/templates/users/edit.rs.html +++ b/templates/users/edit.rs.html @@ -9,6 +9,10 @@ @:base(ctx, i18n!(ctx.1, "Edit your account"), {}, {}, { @if let Some(u) = ctx.2.clone() {

@i18n!(ctx.1, "Your Profile")

+

+ @i18n!(ctx.1, "To change your avatar, upload it in your gallery and select from there.") + @i18n!(ctx.1, "Upload an avatar") +

-- 2.45.3 From 6a8b68af051c4c27c12089b3a919df9ee9e597e0 Mon Sep 17 00:00:00 2001 From: Baptiste Gelez Date: Mon, 4 Mar 2019 21:31:13 +0100 Subject: [PATCH 2/5] Allow video and audio tags in SafeString Otherwise we can't display their preview, nor show them in articles Also show controls by default for these two elements --- plume-models/src/medias.rs | 4 ++-- plume-models/src/safe_string.rs | 12 ++++++++++-- 2 files changed, 12 insertions(+), 4 deletions(-) diff --git a/plume-models/src/medias.rs b/plume-models/src/medias.rs index eaf2b1fa..f6f01925 100644 --- a/plume-models/src/medias.rs +++ b/plume-models/src/medias.rs @@ -110,11 +110,11 @@ impl Media { url, escape(&self.alt_text), escape(&self.alt_text) )), MediaCategory::Audio => SafeString::new(&format!( - r#""#, + r#""#, url, escape(&self.alt_text) )), MediaCategory::Video => SafeString::new(&format!( - r#""#, + r#""#, url, escape(&self.alt_text) )), MediaCategory::Unknown => SafeString::new(""), diff --git a/plume-models/src/safe_string.rs b/plume-models/src/safe_string.rs index bef1aa73..651814cb 100644 --- a/plume-models/src/safe_string.rs +++ b/plume-models/src/safe_string.rs @@ -19,12 +19,20 @@ lazy_static! { static ref CLEAN: Builder<'static> = { let mut b = Builder::new(); b.add_generic_attributes(iter::once("id")) - .add_tags(iter::once("iframe")) + .add_tags(&[ "iframe", "video", "audio" ]) .id_prefix(Some("postcontent-")) .url_relative(UrlRelative::Custom(Box::new(url_add_prefix))) .add_tag_attributes( "iframe", - ["width", "height", "src", "frameborder"].iter().map(|&v| v), + [ "width", "height", "src", "frameborder" ].iter().map(|&v| v), + ) + .add_tag_attributes( + "video", + [ "src", "title", "controls" ].iter(), + ) + .add_tag_attributes( + "audio", + [ "src", "title", "controls" ].iter(), ); b }; -- 2.45.3 From ed3efb7b9798f663491a3919e5352ccd3fbd384a Mon Sep 17 00:00:00 2001 From: Baptiste Gelez Date: Tue, 5 Mar 2019 12:29:57 +0100 Subject: [PATCH 3/5] Show fallback images for audio and unknown files, to make them more visible --- plume-models/src/medias.rs | 32 ++++++++++++++++---------------- plume-models/src/safe_string.rs | 4 +++- static/css/_global.scss | 28 ++++++++++++++++++++++++++++ templates/medias/index.rs.html | 8 ++++++-- 4 files changed, 53 insertions(+), 19 deletions(-) diff --git a/plume-models/src/medias.rs b/plume-models/src/medias.rs index f6f01925..1bd3a2e3 100644 --- a/plume-models/src/medias.rs +++ b/plume-models/src/medias.rs @@ -45,6 +45,17 @@ pub enum MediaCategory { Unknown, } +impl MediaCategory { + pub fn to_string(&self) -> &str { + match *self { + MediaCategory::Image => "image", + MediaCategory::Audio => "audio", + MediaCategory::Video => "video", + MediaCategory::Unknown => "unknown", + } + } +} + impl Media { insert!(medias, NewMedia); get!(medias); @@ -88,20 +99,6 @@ impl Media { } } - pub fn preview_image(&self, conn: &Connection) -> String { - let (url, is_icon) = match self.category() { - MediaCategory::Image => (self.url(conn).unwrap_or(String::new()), false), - MediaCategory::Audio => ("/static/images/audio-file.svg".into(), true), - MediaCategory::Video => ("/static/images/video-file.svg".into(), true), - MediaCategory::Unknown => ("/static/images/unknown-file.svg".into(), true), - }; - if is_icon { - format!("background-image: url('{}'); background-color: #7765E3; background-repeat: no-repeat; background-position: center; background-size: 4em;", url) - } else { - format!("background-image: url('{}')", url) - } - } - pub fn html(&self, conn: &Connection) -> Result { let url = self.url(conn)?; Ok(match self.category() { @@ -110,14 +107,17 @@ impl Media { url, escape(&self.alt_text), escape(&self.alt_text) )), MediaCategory::Audio => SafeString::new(&format!( - r#""#, + r#"
"#, url, escape(&self.alt_text) )), MediaCategory::Video => SafeString::new(&format!( r#""#, url, escape(&self.alt_text) )), - MediaCategory::Unknown => SafeString::new(""), + MediaCategory::Unknown => SafeString::new(&format!( + r#""#, + url, + )), }) } diff --git a/plume-models/src/safe_string.rs b/plume-models/src/safe_string.rs index 651814cb..9eb083c9 100644 --- a/plume-models/src/safe_string.rs +++ b/plume-models/src/safe_string.rs @@ -33,7 +33,9 @@ lazy_static! { .add_tag_attributes( "audio", [ "src", "title", "controls" ].iter(), - ); + ) + .add_tag_attributes("div", [ "class" ].iter()) + .add_tag_attributes("a", [ "class" ].iter()); b }; } diff --git a/static/css/_global.scss b/static/css/_global.scss index 1a7286aa..6f9719b6 100644 --- a/static/css/_global.scss +++ b/static/css/_global.scss @@ -307,6 +307,10 @@ figure { figcaption { padding: 1em; } + + audio, video { + width: 100%; + } } .preview { @@ -318,6 +322,30 @@ figure { margin-right: 20px; } +.media-preview { + min-height: 8em; + + &:not(.image) { + background-color: #7765E3; + background-repeat: no-repeat; + background-position: center; + background-size: 4em; + } + + &.unknown { + background-image: url('/static/images/unknown-file.svg'); + display: block; + } + + &.audio { + background-image: url('/static/images/audio-file.svg'); + } + + &.video { + background-image: url('/static/images/video-file.svg'); + } +} + /// Avatars .avatar { background-position: center; diff --git a/templates/medias/index.rs.html b/templates/medias/index.rs.html index 62876bcf..a2927ad8 100644 --- a/templates/medias/index.rs.html +++ b/templates/medias/index.rs.html @@ -1,4 +1,4 @@ -@use plume_models::medias::Media; +@use plume_models::medias::*; @use templates::base; @use template_utils::*; @use routes::*; @@ -18,7 +18,11 @@
@for media in medias {
-
+

@media.alt_text

@if let Some(cw) = media.content_warning { -- 2.45.3 From d0db521bb68a56355ab65055f6732f0931c49b04 Mon Sep 17 00:00:00 2001 From: Baptiste Gelez Date: Wed, 6 Mar 2019 11:02:12 +0100 Subject: [PATCH 4/5] Add a new constructor to SafeString when the input is trusted and doesn't need to be escaped. And use it to generate media previews. --- plume-models/src/medias.rs | 8 ++++---- plume-models/src/safe_string.rs | 24 +++++++++++++----------- 2 files changed, 17 insertions(+), 15 deletions(-) diff --git a/plume-models/src/medias.rs b/plume-models/src/medias.rs index 1bd3a2e3..08bfb932 100644 --- a/plume-models/src/medias.rs +++ b/plume-models/src/medias.rs @@ -102,19 +102,19 @@ impl Media { pub fn html(&self, conn: &Connection) -> Result { let url = self.url(conn)?; Ok(match self.category() { - MediaCategory::Image => SafeString::new(&format!( + MediaCategory::Image => SafeString::trusted(&format!( r#"{}"#, url, escape(&self.alt_text), escape(&self.alt_text) )), - MediaCategory::Audio => SafeString::new(&format!( + MediaCategory::Audio => SafeString::trusted(&format!( r#"
"#, url, escape(&self.alt_text) )), - MediaCategory::Video => SafeString::new(&format!( + MediaCategory::Video => SafeString::trusted(&format!( r#""#, url, escape(&self.alt_text) )), - MediaCategory::Unknown => SafeString::new(&format!( + MediaCategory::Unknown => SafeString::trusted(&format!( r#""#, url, )), diff --git a/plume-models/src/safe_string.rs b/plume-models/src/safe_string.rs index 9eb083c9..b6ed9930 100644 --- a/plume-models/src/safe_string.rs +++ b/plume-models/src/safe_string.rs @@ -25,17 +25,7 @@ lazy_static! { .add_tag_attributes( "iframe", [ "width", "height", "src", "frameborder" ].iter().map(|&v| v), - ) - .add_tag_attributes( - "video", - [ "src", "title", "controls" ].iter(), - ) - .add_tag_attributes( - "audio", - [ "src", "title", "controls" ].iter(), - ) - .add_tag_attributes("div", [ "class" ].iter()) - .add_tag_attributes("a", [ "class" ].iter()); + ); b }; } @@ -63,6 +53,18 @@ impl SafeString { value: CLEAN.clean(&value).to_string(), } } + + /// Creates a new `SafeString`, but without escaping the given value. + /// + /// Only use when you are sure you can trust the input (when the HTML + /// is entirely generated by Plume, not depending on user-inputed data). + /// Prefer `SafeString::new` as much as possible. + pub fn trusted(value: impl AsRef) -> Self { + SafeString { + value: value.as_ref().to_string() + } + } + pub fn set(&mut self, value: &str) { self.value = CLEAN.clean(value).to_string(); } -- 2.45.3 From f14701bc58f09dc5841ef6d99d3c2ec67a83b656 Mon Sep 17 00:00:00 2001 From: Baptiste Gelez Date: Wed, 6 Mar 2019 12:29:45 +0100 Subject: [PATCH 5/5] Make it possible to insert video/audio in articles --- plume-models/src/safe_string.rs | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/plume-models/src/safe_string.rs b/plume-models/src/safe_string.rs index b6ed9930..3a923f02 100644 --- a/plume-models/src/safe_string.rs +++ b/plume-models/src/safe_string.rs @@ -25,6 +25,14 @@ lazy_static! { .add_tag_attributes( "iframe", [ "width", "height", "src", "frameborder" ].iter().map(|&v| v), + ) + .add_tag_attributes( + "video", + [ "src", "title", "controls" ].iter(), + ) + .add_tag_attributes( + "audio", + [ "src", "title", "controls" ].iter(), ); b }; -- 2.45.3