ome / omero-figure

An OMERO.web app for creating Figures from images in OMERO
http://figure.openmicroscopy.org
GNU Affero General Public License v3.0
15 stars 30 forks source link

Align right bottom #520

Closed Rdornier closed 8 months ago

Rdornier commented 9 months ago

Add a button to align images to the right and to the bottom Fix #483 issue

will-moore commented 9 months ago

This works OK if all the panels are the same width or height, but if they aren't then it should probably still align the right or bottom edges. So you need to combine x and width to find the right edge for each, and the max right-edge. Then subtract the width of each panel from that value when setting the x. And same logic for bottom alignment.

Rdornier commented 9 months ago

Arf... I was doing my tests on multiple copies of the same image and did see that. Thansk for reporting this bug !

will-moore commented 8 months ago

This is working well now.

There's a minor issue with the extra space being taken up on the tool bar: The extra buttons are contributing to an existing bug where the toolbar is spreading into space used by the figure title, which is an issue if you have a longer title or narrow browser page:

Screenshot 2023-10-09 at 18 16 29

The previous issue of a gap to the right of the toolbar can be fixed by moving it to the right. Then we still need to reduce the space used by the title. With these changes...

diff --git a/omero_figure/static/figure/css/figure.css b/omero_figure/static/figure/css/figure.css
index 332b657..f5b049c 100644
--- a/omero_figure/static/figure/css/figure.css
+++ b/omero_figure/static/figure/css/figure.css
@@ -123,7 +123,7 @@
         line-height: 20px;
         padding: 12px;
         position: absolute;
-        right: 450px;
+        right: 520px;
         text-align: center;
         height: 100%;
     }
@@ -705,6 +705,10 @@
     .navbar>div.container {
         max-width: 100%;
     }
+    #alignment-toolbars {
+        padding-right: 0;
+        margin-right: -15px;
+    }
     /** Add my class to boost size of font icons **/
     .icon-buttons {
         margin-right: 20px;

Looks a bit better:

Screenshot 2023-10-09 at 18 29 21
Rdornier commented 8 months ago

It can indeed be annoying; thank you for your meticulous tests !