diff --git a/app/views/layouts/base.html.erb b/app/views/layouts/base.html.erb index a7ca52c22..9017c48d8 100644 --- a/app/views/layouts/base.html.erb +++ b/app/views/layouts/base.html.erb @@ -22,6 +22,7 @@ <%= call_hook :view_layouts_base_body_top %>
+
<% if User.current.logged? || !Setting.login_required? %> diff --git a/public/images/chevron-up.png b/public/images/chevron-up.png new file mode 100644 index 0000000000000000000000000000000000000000..d978023705fa1fd3d696501872c24bf44e6327fa GIT binary patch literal 2720 zcmd6pdo-Kb7QmD5s+L|_lbWc8>Sd(fRf_TGr_&nTmKcn*gT&C*coboXdgP=vAp6@v`Uqcgi7e8^+=c`+&A8&UJbzOBB45s1famp741C$~F+ohrej({S-VCvzXr%w1MPkvx4qJoKftW|Q- zr7xTesY4GDKU4qw)N%BlZ&^U29(IJs0PR~(y6H9_JgO6^bKuvVFW>G#+)^XcX@{=h zNjlXHC#Z{i>1#W+D*XtiVce+)O;58T*i-bUgGS|seWgvFWb#y*XqF(qQjtKZPZ;td zzm8O9@i9ib`O{(%wKOG~(S9zof0AZoX+kmOnu~fU{eJxWetAE~AJ)IdCWM7GKvdxl zZR^ojQ=c>!LT3=Ni2USxQ!n4eS`dE?(K;~Y!$1x{H

OUJ?8f%Af4Y@d?sT9sXQ) zJvGh5r)@m|KB}cVHuY(DW1{ zL#k&ClQ^B(p5iSZf%kI11qzs*Dh5!tnyXy%e`4U3p>*}H9sPSW|KPS}sbeCL&zc#9 zOYI0;fFU!tp*+hiZ5uU${B!|W^q-c0v-%@J z?;hs>^OmCH2;A6J9wD^fLd_orA;qe=+s+Esf!Nx~V|veQHLDm8S_21)Tnsx0Li1ap z^-4&+C1L)PL`pDLdR9JGNCIMtL=&J9cVz`1Jb_o~M{1M4ypQXdl9{=z)KGx8-I;r8 zq>UTnmGU^FUam@^`$F4aLAFd$qA$1UmHlNe7rW7@JF`TYBUf}`;DnB-cH65d{b2%o zxJjOjWRScttI*t|pq(daT^lwf-AEy#;zXi-1#{w@@QfOfB1(BneD%^FQeJ$mzqUg0 zn?z=Ao(BmB-|&`}O$;WiFG|tJ0d6r<&4c(pj*p47u*i0nrfPZE!fg_+B~r=uasJbFwJnaBKqd-HIr$uj%Z=m zPkDrR!R+BPMmoWIlGb4iU+ixSzBg-+V#_=?_Z=ya``R;%pvT^>LYoR0!x$RzZa=0v zy~vUEZ3MffafYA?Hsuipesh@CWhg)|s@STw0YUs3$|Ea)K!b~0TETP58vbn!*}NVg zxt##KZBZP3)|BAsjE0VSyE-q>^YD}06cL(FgcE5GXSqPy0Gm>XfsfN3Xm5gWa-Bug@f2gJ$jyAf zMOmafeDvIp$c#QRskIfnTLHYSt(!3#Oe6%!EAM6~Vp7}89M)4aC<7E*MBI~F(Lys_ zBWE=`lOsz<#%Z!{35>^=M#D46%2KTEi_2QHlMMr!y_AO-S7-m_q_GE(YD-5as10d3 zd|E;at-=d`VasaP{MxZWR2!Xz>tHXX-@CnAYlwuU8KlKan@Oi#?Y2b0~7!z&LGTz7&d1 z^7>SwqHM)p@WVEszgzOq$P_@?Njyr@Hki|h1|P^u`DRTA31icqOYl5|0faD6H2xkm z{Z;2?(ZFgoB=9?yRWdXH+JGbCYYA+Q1sA1=5xPmk7DMN0DI4QGCqKx!BvtObb2Btx z-^HCw))F=07E##mf!AHKOQ;O@4ekWhM~|1cvCZ`7CQ<+$AEH@%F&FFm_| zIemY5AAaAB&ebR4wbw;M`)4--y2mbzpOKS1o&A<9#+xkTha3aioGi_p`uBw5QHR5B zTe5faXIiS#&{ubI_|%&b6^12toIr+8Ob)(?=`C0DLs?;ZIPvZ@%i}E)U_RojiKcsr zUnwRTUw00a?Y>AfjG)HU<&0~rJ0L&C_vycn(Jql3JZ)j?G5AAY@0K@DH}6w*UxZxw EC*0DydjJ3c literal 0 HcmV?d00001 diff --git a/public/javascripts/application.js b/public/javascripts/application.js index 91da19229..3a09c764d 100644 --- a/public/javascripts/application.js +++ b/public/javascripts/application.js @@ -1219,6 +1219,18 @@ function inlineAutoComplete(element) { tribute.attach(element); } +function setupUpButton() { + $(window).scroll(function() { + if ($(this).scrollTop() > 30) { + $('#us-btn-up').addClass('showed'); + } else { + $('#us-btn-up').removeClass('showed'); + } + }); + $('#us-btn-up').click(function () { + $('html, body').animate({ scrollTop: 0 }, 300); + }); +} $(document).ready(setupAjaxIndicator); $(document).ready(hideOnLoad); @@ -1231,3 +1243,4 @@ $(document).ready(setupWikiTableSortableHeader); $(document).on('focus', '[data-auto-complete=true]', function(event) { inlineAutoComplete(event.target); }); +$(document).ready(setupUpButton); diff --git a/public/stylesheets/application.css b/public/stylesheets/application.css index f837a710e..70311113e 100644 --- a/public/stylesheets/application.css +++ b/public/stylesheets/application.css @@ -1874,3 +1874,51 @@ th[role=columnheader]:not(.no-sort):hover:after { display: inline; opacity: 1; } + +#us-btn-up { + display: none; +} +@media all and (min-width: 900px) { + #us-btn-up { + display: block; + height: 0; + padding: 0; + overflow: hidden; + position: fixed; + bottom: 35px; + right: 35px; + z-index: 99; + border: none; + outline: none; + color: #888; + cursor: pointer; + border-radius: 4px; + transition: opacity .3s, background-color .3s; + opacity: 0; + box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 0 30px 0 rgba(0, 0, 0, 0.15) inset; + background: #fff; + } + + #us-btn-up.showed { + height: auto; + opacity: 0.7; + padding: 15px 20px; + } + + #us-btn-up:hover { + background-color: #f5f5f5; + } + + .chevron-up { + position: relative; + height: 16px; + width: 16px; + top: 1px; + display: inline-block; + background-image: url(../images/chevron-up.png); + background-size: cover; + margin: 0; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + } +} diff --git a/test/system/scroll_to_top_button_test.rb b/test/system/scroll_to_top_button_test.rb new file mode 100644 index 000000000..d7e262ece --- /dev/null +++ b/test/system/scroll_to_top_button_test.rb @@ -0,0 +1,44 @@ +# frozen_string_literal: true + +# Redmine - project management software +# Copyright (C) 2006-2022 Jean-Philippe Lang +# +# This program is free software; you can redistribute it and/or +# modify it under the terms of the GNU General Public License +# as published by the Free Software Foundation; either version 2 +# of the License, or (at your option) any later version. +# +# This program is distributed in the hope that it will be useful, +# but WITHOUT ANY WARRANTY; without even the implied warranty of +# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +# GNU General Public License for more details. +# +# You should have received a copy of the GNU General Public License +# along with this program; if not, write to the Free Software +# Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. + +require File.expand_path('../../application_system_test_case', __FILE__) + +class ScrollToTopButtonTest < ApplicationSystemTestCase + fixtures :issues, :users, :projects, :trackers, :projects_trackers, :issue_statuses, :enumerations, :projects_trackers, + :roles, :members, :member_roles, :enabled_modules + + def setup + super + 100.times { Issue.generate! } + end + + def test_scroll_button + log_user('admin', 'admin') + visit '/issues?per_page=100' + + # scroll to the page bottom + page.execute_script "window.scrollBy(0,10000)" + # button appears + assert has_css? '#us-btn-up.showed' + # scroll back to the top + find('div#us-btn-up').click + # no button + assert has_no_css? '#us-btn-up.showed' + end +end