From 8d2271699bfe8199ebeac2d2bf491e2133cc02d8 Mon Sep 17 00:00:00 2001 From: Andy Allan Date: Wed, 24 Jun 2020 15:26:07 +0200 Subject: [PATCH] Use bootstrap_form as the formbuilder for GPX upload form This also uses the recommended bs-custom-file-input javascript plugin for the file input control. --- app/assets/javascripts/application.js | 2 + .../javascripts/bs-custom-file-input-init.js | 5 ++ app/assets/stylesheets/common.scss | 32 +++-------- app/views/traces/edit.html.erb | 57 ++++--------------- app/views/traces/new.html.erb | 40 ++++--------- app/views/traces/show.html.erb | 6 +- config/locales/en.yml | 27 ++++----- package.json | 4 +- test/controllers/traces_controller_test.rb | 2 +- yarn.lock | 5 ++ 10 files changed, 61 insertions(+), 119 deletions(-) create mode 100644 app/assets/javascripts/bs-custom-file-input-init.js diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js index e455f297b..d861cbb33 100644 --- a/app/assets/javascripts/application.js +++ b/app/assets/javascripts/application.js @@ -16,6 +16,8 @@ //= require piwik //= require richtext //= require querystring +//= require bs-custom-file-input +//= require bs-custom-file-input-init /* * Called as the user scrolls/zooms around to manipulate hrefs of the diff --git a/app/assets/javascripts/bs-custom-file-input-init.js b/app/assets/javascripts/bs-custom-file-input-init.js new file mode 100644 index 000000000..3afdac291 --- /dev/null +++ b/app/assets/javascripts/bs-custom-file-input-init.js @@ -0,0 +1,5 @@ +/* global bsCustomFileInput */ + +$(document).ready(function () { + bsCustomFileInput.init(); +}); diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss index 52729cf62..6de8fee64 100644 --- a/app/assets/stylesheets/common.scss +++ b/app/assets/stylesheets/common.scss @@ -728,6 +728,14 @@ body.compact { } } +/* Temporary label size override until we remove site-wide font customisation */ + +form { + label { + font-size: 16px; + } +} + /* Rules for the search and direction forms */ header .search_forms, @@ -1168,30 +1176,6 @@ tr.turn:hover { float: right; } -/* Rules for the new trace form */ - -#new_trace { - input[type=text] { - width: 50%; - width: calc(100% - 150px); - max-width: 500px; - } -} - -/* Rules for the edit trace form */ - -.edit_trace { - .standard-form-row p { - margin-bottom: 0px; - } - - input[type=text] { - width: 50%; - width: calc(100% - 150px); - max-width: 500px; - } -} - /* Rules for the user profile page */ #userinformation { diff --git a/app/views/traces/edit.html.erb b/app/views/traces/edit.html.erb index b5600d059..13829727c 100644 --- a/app/views/traces/edit.html.erb +++ b/app/views/traces/edit.html.erb @@ -4,49 +4,16 @@ "picture", :id => @trace.id, :display_name => @trace.user.display_name %>"> -<%= form_for @trace do |f| %> - -
-
-
- -

<%= @trace.name %> (<%= link_to t(".download"), trace_data_path(@trace) %>)

-
-
- -

<%= l @trace.timestamp, :format => :friendly %>

-
- <% if @trace.inserted? %> -
- -

<%= @trace.size.to_s.gsub(/(\d)(?=(\d{3})+$)/, '\1,') %>

-
-
- -
-
- <%= @trace.latitude %>; - <%= @trace.longitude %> -
- (<%= link_to t(".map"), :controller => "site", :action => "index", :anchor => "map=14/#{@trace.latitude}/#{@trace.longitude}" %> / <%= link_to t(".edit"), :controller => "site", :action => "edit", :gpx => @trace.id, :anchor => "map=14/#{@trace.latitude}/#{@trace.longitude}" %>) - <% end %> -
- -

<%= link_to @trace.user.display_name, user_path(@trace.user) %>

-
-
- - <%= f.text_field :description %> -
-
- - <%= f.text_field :tagstring %> (<%= t ".tags_help" %>) -
-
- - <%= f.select :visibility, [[t("traces.visibility.private"), "private"], [t("traces.visibility.public"), "public"], [t("traces.visibility.trackable"), "trackable"], [t("traces.visibility.identifiable"), "identifiable"]] %> ("><%= t ".visibility_help" %>) -
-
- <%= f.submit %> -
+<%= bootstrap_form_for @trace do |f| %> + <%= f.text_field :name, :disabled => true %> + <%= f.text_field :description %> + <%= f.text_field :tagstring %> + <%= f.select :visibility, + [[t("traces.visibility.private"), "private"], + [t("traces.visibility.public"), "public"], + [t("traces.visibility.trackable"), "trackable"], + [t("traces.visibility.identifiable"), "identifiable"]], + :help => link_to(t(".visibility_help"), t(".visibility_help_url")) %> + <%= f.primary %> + <%= link_to t(".cancel"), show_trace_path(@trace.user, @trace), :class => "btn btn-link" %> <% end %> diff --git a/app/views/traces/new.html.erb b/app/views/traces/new.html.erb index d2ccebb4c..b7951cb32 100644 --- a/app/views/traces/new.html.erb +++ b/app/views/traces/new.html.erb @@ -2,32 +2,16 @@

<%= t ".upload_trace" %>

<% end %> -<%= error_messages_for "trace" %> - -<%= form_for @trace, :url => { :action => "create" }, :html => { :multipart => true } do |f| %> -
-
-
- - <%= f.file_field :gpx_file %> -
-
- - <%= f.text_field :description %> -
-
- - <%= f.text_field :tagstring %> - (<%= t ".tags_help" %>) -
-
- - <%= f.select :visibility, [[t("traces.visibility.private"), "private"], [t("traces.visibility.public"), "public"], [t("traces.visibility.trackable"), "trackable"], [t("traces.visibility.identifiable"), "identifiable"]] %> - ("><%= t ".visibility_help" %>) -
-
- - <%= f.submit %> - "><%= t ".help" %> -
+<%= bootstrap_form_for @trace, :url => { :action => "create" }, :html => { :multipart => true } do |f| %> + <%= f.file_field :gpx_file, :placeholder => t("helpers.file.prompt") %> + <%= f.text_field :description %> + <%= f.text_field :tagstring %> + <%= f.select :visibility, + [[t("traces.visibility.private"), "private"], + [t("traces.visibility.public"), "public"], + [t("traces.visibility.trackable"), "trackable"], + [t("traces.visibility.identifiable"), "identifiable"]], + :help => link_to(t(".visibility_help"), t(".visibility_help_url")) %> + <%= f.primary %> + <%= link_to t(".help"), t(".help_url"), :class => "btn btn-link" %> <% end %> diff --git a/app/views/traces/show.html.erb b/app/views/traces/show.html.erb index fe1d670c3..d82c51881 100644 --- a/app/views/traces/show.html.erb +++ b/app/views/traces/show.html.erb @@ -55,10 +55,10 @@

<% if current_user && (current_user==@trace.user || current_user.administrator? || current_user.moderator?) %> -
+
<% if current_user == @trace.user %> - <%= link_to t(".edit_trace"), edit_trace_path(@trace), :class => "button" %> + <%= link_to t(".edit_trace"), edit_trace_path(@trace), :class => "btn btn-outline-primary" %> <% end %> - <%= button_to t(".delete_trace"), { :controller => "traces", :action => "destroy", :id => @trace.id }, { :method => :delete, :data => { :confirm => t(".confirm_delete") } } %> + <%= link_to t(".delete_trace"), { :controller => "traces", :action => "destroy", :id => @trace.id }, { :method => :delete, :class => "btn btn-outline-danger", :data => { :confirm => t(".confirm_delete") } } %>
<% end %> diff --git a/config/locales/en.yml b/config/locales/en.yml index 5ae211ffa..8c4dd25d8 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -6,6 +6,8 @@ en: friendly: "%e %B %Y at %H:%M" blog: "%e %B %Y" helpers: + file: + prompt: Choose file submit: diary_comment: create: Save @@ -93,6 +95,10 @@ en: longitude: "Longitude" public: "Public" description: "Description" + name: Filename + gpx_file: Upload GPX File + visibility: Visibility + tagstring: Tags message: sender: "Sender" title: "Subject" @@ -105,6 +111,9 @@ en: description: "Description" languages: "Languages" pass_crypt: "Password" + help: + trace: + tagstring: comma delimited datetime: distance_in_words_ago: about_x_hours: @@ -1819,11 +1828,6 @@ en: identifiable: "Identifiable (shown in trace list and as identifiable, ordered points with timestamps)" new: upload_trace: "Upload GPS Trace" - upload_gpx: "Upload GPX File:" - description: "Description:" - tags: "Tags:" - tags_help: "comma delimited" - visibility: "Visibility:" visibility_help: "what does this mean?" visibility_help_url: "https://wiki.openstreetmap.org/wiki/Visibility_of_GPS_traces" help: "Help" @@ -1836,20 +1840,9 @@ en: one: "You have %{count} trace waiting for upload. Please consider waiting for these to finish before uploading any more, so as not to block the queue for other users." other: "You have %{count} traces waiting for upload. Please consider waiting for these to finish before uploading any more, so as not to block the queue for other users." edit: + cancel: Cancel title: "Editing trace %{name}" heading: "Editing trace %{name}" - filename: "Filename:" - download: "download" - uploaded_at: "Uploaded:" - points: "Points:" - start_coord: "Start coordinate:" - map: "map" - edit: "edit" - owner: "Owner:" - description: "Description:" - tags: "Tags:" - tags_help: "comma delimited" - visibility: "Visibility:" visibility_help: "what does this mean?" visibility_help_url: "https://wiki.openstreetmap.org/wiki/Visibility_of_GPS_traces" update: diff --git a/package.json b/package.json index 964bda4c1..5757fdb22 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,9 @@ { "name": "openstreetmap", "private": true, - "dependencies": {}, + "dependencies": { + "bs-custom-file-input": "^1.3.4" + }, "devDependencies": { "eslint": "^6.8.0" } diff --git a/test/controllers/traces_controller_test.rb b/test/controllers/traces_controller_test.rb index fd91fa617..364142dd9 100644 --- a/test/controllers/traces_controller_test.rb +++ b/test/controllers/traces_controller_test.rb @@ -616,7 +616,7 @@ class TracesControllerTest < ActionDispatch::IntegrationTest session_for(user) post traces_path, :params => { :trace => { :gpx_file => file, :description => "", :tagstring => "new,trace", :visibility => "trackable" } } assert_template :new - assert_match "Description is too short (minimum is 1 character)", response.body + assert_match "is too short (minimum is 1 character)", response.body end # Test fetching the edit page for a trace using GET diff --git a/yarn.lock b/yarn.lock index 249a4d621..552a1a8d9 100644 --- a/yarn.lock +++ b/yarn.lock @@ -100,6 +100,11 @@ brace-expansion@^1.1.7: balanced-match "^1.0.0" concat-map "0.0.1" +bs-custom-file-input@^1.3.4: + version "1.3.4" + resolved "https://registry.yarnpkg.com/bs-custom-file-input/-/bs-custom-file-input-1.3.4.tgz#c275cb8d4f1c02ba026324292509fa9a747dbda8" + integrity sha512-NBsQzTnef3OW1MvdKBbMHAYHssCd613MSeJV7z2McXznWtVMnJCy7Ckyc+PwxV6Pk16cu6YBcYWh/ZE0XWNKCA== + callsites@^3.0.0: version "3.1.0" resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73" -- 2.39.5