The standard layout in the server uses "#app-navigation",
"#app-content" and "#app-sidebar" as children of "#content"; the
navigation and sidebar are not needed, so "#app" is simply renamed to
"#app-content".
Also note that "#controls" is already the first child of "#app-content",
so there is no need to prepend it. In a similar way there are standard
CSS rules defined in the server for "#controls" as a child of
"#app-content", so no special rules need to be defined here.
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
The confirmation button right now is just an icon; its behaviour will be
added in the following commits.
Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
The "box-sizing" of "#app" descendants is set to "border-box" in the
server. Depending on where it is shown, the "Share with" input field can
be a descendant of "#app" or not, so its icons either use the
"border-box" or the "content-box" sizing depending on the case.
Therefore, the padding when using "border-box" sizing has to be set to
the content size ("min-width" and "min-height") plus the padding used in
"content-box" sizing.
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
The server adds a "margin-top" to the elements with the "hascontrols"
CSS class, like the element for the gallery. However, since the controls
were moved into the "#app" element that margin is no longer necessary;
the controls are a previous sibling of the gallery, and its sticky
position behaves like a relative position before getting stuck, so the
controls are positioned according to the normal flow of the document and
thus "push" the gallery down without the need of a margin.
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
The "#content-wrapper" element is the scrolling container of the
gallery. As the "#controls" element was a sibling with a relative top
position it overlapped the "#content-wrapper"; the contents themselves
were not overlapped due to the "margin-top" CSS rule for "#content
.hascontrols" elements, but as the scroll bar belongs to the
"#content-wrapper" it was.
This could have been fixed by setting the top position of the
"#content-wrapper" element to visually move it below the "#controls".
However, conceptually the controls are part of the contents, and other
apps may expect that the gallery adds all its contents in the
"#content-wrapper" (like the JSXC app), so also for consistency with the
Files app this commit moves the "#controls" element into the "#app"
element instead.
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
In the "Files" app the actions that require the create permission (those
marked as "creatable") are hidden in folders that do not have that
permission. However, as there is only one ".actions" element inside
"#controls" and that ".actions" element also has the "creatable" CSS
class appending the gallery button to it meant that the gallery button
was hidden in folders without create permissions. Now the gallery button
is appended to the "#controls" element instead, and thus it is no longer
affected by the permissions of the folder.
As the button is now appended to the "#controls" element its top margin
was increased to align it with the rest of the buttons (as the
".actions" element uses a padding of 5px), and as the button appears in
the top right corner of the contents its right margin was set to the
same value as the top margin to "frame" the button.
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
The social sharing menu shown in the share drop down was off by a few
pixels both in the gallery and in the slideshow; to fix this, different
values had to be used in each case due to slight style differences in
the share drop down depending on its ancestors.
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
When searching or selecting a sharee in the "shareWith" field a loading
icon is shown. However, as the icon had a relative position and the
"shareWith" field uses the full width of the share dropdown the icon was
shown in a new line below the field. Moreover, due to its "right" CSS
property the icon was also shown outside the dropdown itself. Now,
during the search for or the selection of a sharee, the loading icon
replaces the information icon shown in the "shareWith" field, just like
done in the sharing section of the server.
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
The progress filling for the pause icon is a next sibling of the pause
icon in the DOM. Both had the same z-index, so the progress filling
element appeared in front of the pause icon. Due to this, if the pointer
was hovering on the pause icon the hovered element could change from the
pause icon to the progress filling when its height was increased, which
in turn caused the highlight of the pause icon to disappear even if the
pointer was not moved. Now the z-index of the progress filling was
reduced to be shown behind the pause icon instead; visually it looks the
same, but this ensures that the pause icon is always the one being
hovered.
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
The share button is now an input element like the rest of the slideshow
buttons.
Besides getting a cleaner code it fixes the share button not being
hidden like the rest of the slideshow buttons when the pointer was not
moved for three seconds.
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
The z-index for the date picker is forced in the server CSS files to
"1111" through the use of "!important", so even if a higher value is
explicitly set in the "style" attribute of the element the value set in
the server CSS files is the one used. As the z-index of the slideshow is
"100000" and the date picker is added as a sibling of it and not as a
child the date picker appears behind the slideshow. In order to be
visible the date picker needs to override the z-index set in the server
CSS files to be higher than the one used for the slideshow and for the
share dialog shown in the slideshow.
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
The CSS rule to hide the link text input and the three dots menu toggle
using the generic "#linkText" and "#linkTextMore" selectors is overriden
by rules for "#controls input[type=text]" and "#controls .button" in
server, so more specific selectors are needed to ensure that those
elements are hidden.
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
The link text input is hidden when not shown explicitly through
"showLink"; the three dots menu toggle is shown inside that text input,
so it should be hidden too when the link text input is hidden.
This fixes the three dots menu toggle being visible when the share
dropdown is open and the link is not shared.
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
Greta Doci