Git Product home page Git Product logo

lychee-front's Introduction

Lychee-front

With the release of Lychee v5 we moved to a full TALL stack (Tailwind, Alpine, Livewire, Laravel). As a consequence this repository is now READ ONLY.

This repository contains the source of the JS frontend in order to allow its use with different backends.

Build Status Quality Gate Status

A great looking and easy-to-use photo-management-system.

Since the 1st of April 2018 this project has moved to it's own Organisation (https://github.com/LycheeOrg) where people are able to submit their fixes to it. We, the Organisation owners, want to thank electerious (Tobias Reich) for the opportunity to make this project live on.

Lychee Lychee

Lychee is a free photo-management tool, which runs on your server or web-space. Installing is a matter of seconds. Upload, manage and share photos like from a native application. Lychee comes with everything you need and all your photos are stored securely. Read more on our Website.

Installation

To run Lychee, everything you need is a web-server with PHP 5.5 or later and a MySQL-Database. Follow the instructions to install Lychee on your server. Installation »

API

The frontend send POST requests to the server through. Calls are described in API ».

How to build

If you want to contribute and edit CSS or JS files, you need to rebuild Lychee. Build »

# Clone Lychee
git clone https://github.com/LycheeOrg/Lychee.git

# Initialize the frontend submodule
git submodule init

# Get the frontend
git submodule update

# Go into the frontend
cd Lychee-front

Dependencies

First you have to install the following dependencies:

After installing Node.js you can use the included npm package manager to download all dependencies:

npm install

Build and Generated Files

The Gulpfile is located in <path to lychee>/Lychee-front/ and can be executed using the npm run compile command. The generated files will placed into ../dist/ or <path to lychee>/dist/.

⚠️ Style formatting

Before submitting a pull request, please apply our formatting rules by executing:

npm run format

You can also just incorporate a git hook: .git/hooks/pre-commit

#!/bin/sh
NO_COLOR="\033[0m"
GREEN="\033[38;5;010m"
YELLOW="\033[38;5;011m"

printf "\n${GREEN}pre commit hook start${NO_COLOR}\n"

PRETTIER="./node_modules/prettier/bin-prettier.js"

if [ -x "$PRETTIER" ]; then
    git status --porcelain | grep -e '^[AM]\(.*\).php$' | cut -c 3- | while read line; do
        ${PRETTIER} --write ${line};
        git add "$line";
    done
else
    echo ""
    printf "${YELLOW}Please install prettier, e.g.:${NO_COLOR}"
    echo ""
    echo "  npm install"
    echo ""
fi

printf "\n${GREEN}pre commit hook finish${NO_COLOR}\n"

This can easily be installed by doing:

cp pre-commit ../../.git/modules/public/Lychee-front/hooks
chmod 755 ../../.git/modules/public/Lychee-front/hooks/pre-commit

Watch for changes

While developing, you might want to use the following command to automatically build Lychee everytime you save a file:

npm start

lychee-front's People

Contributors

aleshus avatar alex-phillips avatar bastantoine avatar bennettscience avatar chostakovitch avatar clementlamoureux avatar cshyam1892 avatar d7415 avatar dependabot[bot] avatar dunv avatar evoludolab avatar gardiol avatar ikosa avatar ildyria avatar jonasgeiler avatar joserick avatar kamil4 avatar louisvallat avatar ludovicrousseau avatar micahhenshaw avatar nagmat84 avatar nickelsound avatar nicokaiser avatar peterdavehello avatar qwerty287 avatar sjml avatar thanasismpalatsoukas avatar timo-reymann avatar tmp-hallenser avatar yoshinorin avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

lychee-front's Issues

Odd Upload Window Filtering on Movies in Safari

I just recently installed Lychee-Laravel for a test.

In uploading some files, I ran across some .mp4 and .mov files which are non-select-able in the file picker in Safari, but not in Chrome.

In the screenshots, I show the same content to upload in both browsers.

From Safari:
Screen Shot 2020-01-10 at 12 28 51 PM

From Chrome:
Screen Shot 2020-01-10 at 12 28 37 PM

This seems to be because Safari treats .mov as different than .mp4 sometimes.

If I go to the form in Safari's developer mode and change the following:
multiple accept="image/*,video/*,.mov"
to
multiple accept="image/*,video/*,.mov,.mp4

...then I can select the files in Safari.

Wording in Album View

"all" should be "selected"

image

"Root" should be "Home" or "Start" or "Albums" (root is a technical term for most users;-))

image

[Enhancement] Display of images within lightbox (preload and use of low-res)

Explain in a few words which functionality or improvements you would like to see in Lychee.

When having a slow connection, the display of images within the lightbox is not optimal. This can for example happen on your mobile if 4G is not available or the connection is consumed by some other application.

Observed behavior:

  • Lightbox is opened, but image is missing
  • Image gets loaded and builds up slowly
    (move the next image)
  • Image is missing, gets loaded and builds up slowly

I'd like to propose two enhancements to improve the UX:
(1) Use low-res to start with

  • Use the already cached low resolution version of the album view to start with
  • Once the actual image for the lightbox is loaded, change to this version

(2) Pre-load of images

  • Preload the neighboring (i.e. predecessor and successor) images of the album when a new image is display in the lightbox

Missing UI Elements in Photo View

I see no reason not to have the contectmenu from the album view in the photo view too. Or do I miss something? I would also suggest to add adding tags in the sidebar :-)

image

Cannot copy a picture from an album to a subalbum

I try to copy pictures from an album to a subalbum but I'm not able to.
When I click the move button the only albums I see are the "mainalbums" and not the subalbums"

Output of the diagnostics (Settings => Diagnostics)

Diagnostics
-----------
Warning: Dropbox import not working. dropbox_key is empty.
Warning: You may experience problems when uploading a large amount of photos. Take a look in the FAQ for details.

System Information
------------------
Lychee-front Version:      -
Lychee Version (git):      No git data found. Probably installed from release or could not read .git
DB Version:                040000
System:                    Linux
PHP Version:               7.3
MySQL Version:             5.7.24

Lychee total space:        287.45 MB
Upload folder space:       0.00 B
System total space:        1.20 TB
System free space:         137.88 GB (11%)

Imagick:                   1
Imagick Active:            1
Imagick Version:           1684
GD Version:                bundled (2.1.0 compatible)

Config Information
------------------
version:                   040000
check_for_updates:         1
sorting_Photos_col:        takestamp
sorting_Photos_order:      ASC
sorting_Albums_col:        description
sorting_Albums_order:      DESC
imagick:                   1
skip_duplicates:           0
small_max_width:           0
small_max_height:          360
medium_max_width:          1920
medium_max_height:         1080
lang:                      en
layout:                    1
image_overlay:             1
image_overlay_type:        desc
default_license:           none
compression_quality:       90
full_photo:                1
delete_imported:           1
Mod_Frame:                 0
Mod_Frame_refresh:         30000
landing_page_enable:       0
landing_owner:             PhotoLychee Team
landing_title:             PhotoLychee Team
landing_subtitle:          just a testwebsite
landing_facebook:          
landing_flickr:            
landing_twitter:           
landing_instagram:         
landing_youtube:           
landing_background:        dist/cat.jpg
thumb_2x:                  1
small_2x:                  0
medium_2x:                 0
site_title:                Lychee v4
site_copyright_enable:     1
site_copyright_begin:      2019
site_copyright_end:        2019
public_search:             0
additional_footer_text:    
display_social_in_gallery: 0
public_recent:             0
recent_age:                1
public_starred:            0
downloadable:              0
photos_wraparound:         1

Browser and system

This happens with Chrome and Edge.
My site is installed on a shared host: www.photolychee.nl

No "unselecting" possible

When select items with rubberband no "unselecting" is possible, e.g. click in empty space and no "reselecting" is possible, using rubberband again. Only a click on a image, going in image view with the need to going back to album view is working.

image

Feature request: Paste images or URLs to import from clipboard

Detailed description of the problem

Imgur allows me to paste an image or URL from clipboard to import it.

With Lychee, I have to click the menu and then "Import from link" for URLs, and there is no paste-from-clipboard support.

Steps to reproduce the issue

Open Lychee. Click the menu, or try Ctrl/Cmd-V to paste.

Output of the diagnostics (Settings => Diagnostics)

Diagnostics
-----------
Warning: Dropbox import not working. No property for dropboxKey.
No critical problems found. Lychee should work without problems!


System Information
------------------
Lychee Version (json):  3.2.16
Lychee Version (git):   No git data found. Probably installed from release.
DB Version:             update_030216
System:                 Linux
PHP Version:            7.3
MySQL Version:          50727
Imagick:                1
Imagick Active:         1
Imagick Version:        1800
GD Version:             bundled (2.1.0 compatible)
Plugins:                


Config Information
------------------
checkForUpdates:         1
default_license:         none
deleteImported:          1
full_photo:              1
hide_version_number:     1
image_overlay:           0
image_overlay_type:      exif
imagick:                 1
lang:                    en
layout:                  0
medium_max_height:       1080
medium_max_width:        1920
php_script_limit:        0
public_search:           0
skipDuplicates:          0
small_max_height:        360
small_max_width:         0
sortingAlbums:           ORDER BY id DESC
sortingPhotos:           ORDER BY id DESC
useExiftool:             0
version:                 update_030216

Browser and system

  • macOS 10.14.6
  • Firefox 69.0
  • Chrome 76.0.3809.132

Developer notes

link not copied to clipboard

Chromium Versión 77.0.3865.90 (Build oficial) Built on Ubuntu , running on LinuxMint 19.2 (64 bits)
When i try to share one album with the option "direct link" it appears a green bar with a text saying the link is already in the clipboard" ( ready to paste ) but i cant paste it. Ctrl-v is empty, middle mouse button empty too. Not using any adblocker or extension.

[Enhancement] Zoom for images

Other lightboxes allow to zoom into images, e.g. I would think of the following features

(1) scroll down/up (Desktop) or pinch to zoom in/out on image
(2) hold mouse (Desktop) or swipe to move the zoomed image
(3) loading of high resolution image is triggered once user starts zooming

Lazy load thumbnails

When you have hundreds of photos in an album, the frontend makes a request for all of the thumbnails at once causing reduced performance. I propose that a lazy load technique is implemented so that thumbnails don't actually get requested until they are scrolled into view. This should also make the thumbnails load in faster since they're only requested when in view.

I'm more than happy to take on this issue, but wanted to make sure it was something that would be accepted first.

[Bug] After clicking `copy to` on a photo, the photo will appear twice. But disappear after a refresh.

Detailed description of the problem

After clicking copy to on a photo, the photo will appear twice. But disappear after a refresh.

Steps to reproduce the issue

Steps to reproduce the behavior:

  1. Go to 'Gallery'
  2. Click on any 'Album'
  3. Right click on any photo, then choose 'copy to...'
  4. Copy to other album, then, the photo will appear twice
  5. Refresh, the duplicated photo disappear

Screenshots
If applicable, add screenshots to help explain your problem.

Output of the diagnostics

(Settings => Diagnostics or https://example.com/Diagnostics )

Diagnostics
    -----------
    Warning: Dropbox import not working. dropbox_key is empty.

    System Information
    ------------------
    Lychee-front Version:      -
    Lychee Version (git):      master (master) - Check for update failed.
    DB Version:                040000
    System:                    Linux
    PHP Version:               7.3
    MySQL Version:             5.7.27-0ubuntu0.16.04.1
    
    Lychee total space:        548.10 MB
    Upload folder space:       493.68 MB
    System total space:        49.09 GB
    System free space:         38.06 GB (77%)
    
    Imagick:                   1
    Imagick Active:            1
    Imagick Version:           1673
    GD Version:                2.2.5

    Config Information
    ------------------
    version:                   040000
    check_for_updates:         1
    sorting_Photos_col:        takestamp
    sorting_Photos_order:      DESC
    sorting_Albums_col:        id
    sorting_Albums_order:      DESC
    imagick:                   1
    skip_duplicates:           1
    small_max_width:           0
    small_max_height:          360
    medium_max_width:          1920
    medium_max_height:         1080
    lang:                      简体中文
    layout:                    2
    image_overlay:             1
    image_overlay_type:        exif
    default_license:           CC-BY-NC-ND
    compression_quality:       90
    full_photo:                1
    delete_imported:           0
    Mod_Frame:                 0
    Mod_Frame_refresh:         30000
    landing_page_enable:       0
    landing_owner:             Hong Quan
    landing_title:             Hong Quan
    landing_subtitle:          摄影
    landing_facebook:          https://www.facebook.com/hq5544
    landing_flickr:            https://www.flickr.com/photos/106608503@N02/
    landing_twitter:           https://www.twitter.com/hq5544
    landing_instagram:         https://www.instagram.com/hongquan5544/
    landing_youtube:           
    landing_background:        dist/cat.jpg
    thumb_2x:                  1
    small_2x:                  0
    medium_2x:                 0
    site_title:                Hong Quan - 摄影
    site_copyright_enable:     1
    site_copyright_begin:      2019
    site_copyright_end:        2019
    public_search:             1
    additional_footer_text:    
    display_social_in_gallery: 1
    public_recent:             1
    recent_age:                1
    public_starred:            0
    downloadable:              0
    photos_wraparound:         1
    map_display:               0

Browser and system

Chrome 77.0.3865.90
Mac os 10.14.6

Can't select text

We can't select text in the UI, presumably because of how we capture mouse events. In most of the interface this isn't important, but a user may want to copy metadata from the sidebar, text from the login/about etc. The sidebar is probably the main issue here.

(tested with chromium and firefox)

Album View // About // Share Settings

It makes no sense to show that when not logged in ;-)

It's obviously public, not hidden nor password protected ... :-P And the owner ... I wrote about :-D

image

About Download medium, small size.

I think that is not the way to go. At least I don't see the sense :-P Users needs different sizes for e.g. Forum Posts, Shares etc, so there should be linkable URLs to select.

image

Feature request: Fade to next Picture

Could we have a setting for the next-picture-animation.
Fade to next Picture (via black or directly) would be really nice!

Sincerely
Henning Wende

Thumbnails displayed in albums overview are low-density

Detailed description of the problem

I have a HiDPI ("retina") display. The square thumbnails displayed on each album-specific page are high-density (400x400px resolution), as expected. However, the album thumbnails displayed in the albums overview (the Lychee home page) are low-density (200x200px resolution).

Steps to reproduce the issue

Use a HiDPI ("retina") screen. I suppose a 200% zoom on a regular screen will also work.
Compare the quality of the thumbnails in the albums overview to the ones displayed inside an album.

Output of the diagnostics (Settings => Diagnostics)

Lychee Version (json): 3.2.12
DB Version: update_030212
System: Linux
PHP Version: 7.2
MySQL Version: 50724
Imagick: -
Imagick Active: 0
Imagick Version: -
GD Version: bundled (2.1.0 compatible)
Plugins:

Browser and system

Firefox 64.0.2, Linux

Change `eye` icon for share menu

I find it difficult to remember that sharing options are under the visibility icon in the header. What are thoughts on either:

  1. changing the eye out for the more typical share icon, or
  2. splitting out visibility settings from the sharing options?

npm start does not work

Detailed description of the problem

When trying to build lychee from the command line, I bumped into an error when running npm start even though npm run compile works fine

Steps to reproduce the issue

npm start

Output of the diagnostics (Settings => Diagnostics)

$ npm start

> [email protected] start /Users/anon/Sites/Lychee/Lychee-front
> gulp watch

[00:50:45] Using gulpfile ~/Sites/Lychee/Lychee-front/gulpfile.js
[00:50:45] Starting 'watch'...
[00:50:45] Starting 'default'...
[00:50:45] Starting 'view--svg'...
[00:50:45] Starting 'view--scripts'...
[00:50:45] Starting 'main--svg'...
[00:50:45] Starting 'main--scripts'...
[00:50:45] Starting 'main--styles'...
[00:50:45] Starting 'frame--scripts'...
[00:50:45] Starting 'frame--styles'...
[00:50:45] Starting 'landing--scripts'...
[00:50:45] Starting 'landing--styles'...
[00:50:45] Starting 'page--styles'...
[00:50:45] Starting 'view--js'...
[00:50:45] Starting 'main--js'...
[00:50:45] Starting 'frame--js'...
[00:50:45] Starting 'landing--js'...
[00:50:46] gulp-inject 2 files into view.php.
[00:50:46] gulp-inject 2 files into index.html.
[00:50:46] Finished 'frame--styles' after 1.11 s
[00:50:46] Finished 'landing--styles' after 1.12 s
[00:50:46] Finished 'page--styles' after 1.12 s
[00:50:46] Finished 'view--svg' after 1.12 s
[00:50:46] Finished 'landing--js' after 693 ms
[00:50:46] Starting '<anonymous>'...
[00:50:46] Finished 'main--svg' after 1.12 s
[00:50:46] Finished 'frame--js' after 855 ms
[00:50:46] Starting '<anonymous>'...
[00:50:47] Finished '<anonymous>' after 511 ms
[00:50:47] Finished 'landing--scripts' after 1.63 s
[00:50:47] Finished 'view--js' after 1.91 s
[00:50:47] Starting '<anonymous>'...
[00:50:47] Finished 'main--styles' after 1.94 s
[00:50:47] Finished '<anonymous>' after 666 ms
[00:50:47] Finished 'frame--scripts' after 1.94 s
[00:50:47] Finished '<anonymous>' after 9.12 ms
[00:50:47] Finished 'view--scripts' after 1.95 s
[00:50:48] Finished 'main--js' after 2.92 s
[00:50:48] Starting '<anonymous>'...
[00:50:48] Finished '<anonymous>' after 14 ms
[00:50:48] Finished 'main--scripts' after 2.97 s
[00:50:48] Starting 'clean'...
[00:50:48] Finished 'clean' after 8.77 ms
[00:50:48] Finished 'default' after 2.98 s
[00:50:48] Starting '<anonymous>'...
[00:50:48] '<anonymous>' errored after 1.41 ms
[00:50:48] Error: watching ./scripts/_gup.js,./scripts/api.js,./scripts/csrf_protection.js,./scripts/frame/main.js: watch task has to be a function (optionally generated by using gulp.parallel or gulp.series)
    at Gulp.watch (/Users/anon/Sites/Lychee/Lychee-front/node_modules/gulp/index.js:31:11)
    at /Users/anon/Sites/Lychee/Lychee-front/gulpfile.js:374:7
    at bound (domain.js:415:14)
    at runBound (domain.js:428:12)
    at asyncRunner (/Users/anon/Sites/Lychee/Lychee-front/node_modules/async-done/index.js:55:18)
    at processTicksAndRejections (internal/process/task_queues.js:82:9)
[00:50:48] 'watch' errored after 2.98 s
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: `gulp watch`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/anon/.npm/_logs/2019-06-15T07_50_48_539Z-debug.log

Browser and system

Mac OS 10.14.5 Mojave
Node v12.4.0
NPM v6.9.0

More Settings: add keybind [Enter] to validate form instead of scrolling down to click.

In More settings, it would be nice if [Enter] would actually send the form.

If this is implemented, it would be convenient to have a confirmation box:

Are you sure? [Enter]: Yes, [Esc]: No

This as a safety check in order to prevent unintended modification by a random [Enter] and a user can do [Enter][Enter] if they are sure of their modifications.

Lychee Photo View "Show Map" alert popup

Let me start off with that I really like Lychee for its good looking and to the point UI. So great job to all you contributors for making it happen :)

Detailed description of the problem

When linking to an image using the Lychee Photo View link it first shows an alert popup with the text "Show map" without clicking on anything. The offending line seems to be this one:

header.dom('#button_map').on('click', alert("Show Map"));

Steps to reproduce the issue

Copy a Lychee Photo View share link and open it in your browser.

Output of the diagnostics (Settings => Diagnostics)

Diagnostics
    -----------
    Warning: Dropbox import not working. dropbox_key is empty.

    System Information
    ------------------
    Lychee-front Version:      3.2.16
    Lychee Version (git):      499a4ba (master) - Data not in Cache
    DB Version:                040000
    System:                    Linux
    PHP Version:               7.4
    MySQL Version:             10.4.11-MariaDB
    
    Lychee total space:        193.58 MB
    Upload folder space:       130.91 MB
    System total space:        290.09 GB
    System free space:         42.58 GB (14%)
    
    Imagick:                   1
    Imagick Active:            1
    Imagick Version:           1801
    GD Version:                2.2.5

    Config Information
    ------------------
    version:                   040000
    check_for_updates:         0
    sorting_Photos_col:        title
    sorting_Photos_order:      ASC
    sorting_Albums_col:        max_takestamp
    sorting_Albums_order:      ASC
    imagick:                   1
    skip_duplicates:           0
    small_max_width:           0
    small_max_height:          360
    medium_max_width:          1920
    medium_max_height:         1080
    lang:                      en
    layout:                    0
    image_overlay:             1
    image_overlay_type:        desc
    default_license:           reserved
    compression_quality:       90
    full_photo:                1
    delete_imported:           0
    Mod_Frame:                 1
    Mod_Frame_refresh:         30
    thumb_2x:                  1
    small_2x:                  1
    medium_2x:                 1
    landing_page_enable:       0
    landing_owner:             
    landing_title:             
    landing_subtitle:          
    landing_facebook:          
    landing_flickr:            
    landing_twitter:           
    landing_instagram:         
    landing_youtube:           
    landing_background:        dist/cat.jpg
    site_title:                Krypt IMG
    site_copyright_enable:     0
    site_copyright_begin:      2019
    site_copyright_end:        2019
    additional_footer_text:    
    display_social_in_gallery: 0
    public_search:             0
    public_recent:             0
    recent_age:                1
    public_starred:            0
    downloadable:              0
    photos_wraparound:         1
    map_display:               0
    zip64:                     1
    map_display_public:        0
    map_provider:              Wikimedia
    force_32bit_ids:           0
    map_include_subalbums:     0
    update_check_every_days:   3
    has_exiftool:              0
    share_button_visible:      0
    has_ffmpeg:                1

Browser and system

Chromium Version 79.0.3945.117 (Official Build) Arch Linux (64-bit)
Firefox Version 72.0.1 Arch Linux (64-bit)
Vivaldi on Windows 7

[Mobile] Toggling of header

Detailed description of the problem

Toggling header by tapping on photo does not work

Steps to reproduce the issue

  1. Open a photo on a mobile device (Android, iOS)
  2. Wait for header to hide
  3. Tap on photo -> header appears again
  4. Tap again on photo -> header should disappear, but doesn't

Analysis

It did some debugging, but was not able to resolve the issue.

The following code line responsible for step 4:

if (visible.header()) header.hide(e);

Function header.hide(..)gets called and should hide the header. The responsible lines of code are:

lychee.imageview.addClass('full');
header.dom().addClass('header--hidden');

Both lines are called, but have no effect.

Proposal: start the gallery with visibility: hidden;

I think it looks pretty ugly when on page reload, at least in Firefox, for a moment those huge icons get displayed as in the first FAQ.

As I understand it, this happens because the CSS is not loaded yet so the browser renders using its built-in style.

I tested adding style='visibility: hidden;' to div#container and clearing it from JS (which runs after the document is ready). It works, although the footer could in principle still be displayed.

A more thorough solution would be to add the above property to the html tag. However, layouts.simple, where html is defined in Lychee-Laravel, is used by multiple blades. I don't use the landing page or any of the rest so I don't know if they are affected by this problem as well or is it just the gallery, so I don't know if it's worth modifying the generic layout and then adding code to each page's JS or should I make a new layout just for the gallery?

Let me know what you think...

Import for Dropbox

If no Dropbox Key is set the menu entry "Import for Dropbox" should a) not vissible or b) when selecting should give a "warning" that a dropbox key has to be set. Right now just nothing happens.

No Social Icons with fresh install

With a fresh install no Social Icons are shown (yes, activated in settings :-)) on Landing Page and Gallery Pages. Tested on my VM and my hosted site.

"username" on the login dialog is not translated

"username" on the login dialog is not translated

The dialog contains:

username
Mot de passe

If I display the HTML code I have:

<input class="text" name="username" autocomplete="Nom d" utilisateur'="" type="text" placeholder="username" autocapitalize="off" autocorrect="off">

Note the use of " in the autocomplete= field.
In php/Locale/French.php we have:
'USERNAME' => 'Nom d\'utilisateur',

It looks like we have a problem with " and '

Maybe the translated text should be for placeholder= and not for autocomplete=

Steps to reproduce the issue

  1. install Lychee
  2. configure l10n for French
  3. go to the login dialog

Output of the diagnostics (Settings => Diagnostics)

Diagnostics

Warning: Dropbox import not working. No property for dropboxKey.
Error: 'uploads/import' is missing or has insufficient read/write privileges

System Information

Lychee Version (json): 3.2.1
DB Version: update_030201
System: Linux
PHP Version: 7
MySQL Version: 50505
Imagick: 1
Imagick Active: 1
Imagick Version: 1687
GD Version: 2.2.4
Plugins:

Browser and system

Firefox 63.0.3 on macOS Mojave

Reset/Leave Search

Reset/Leave search (e.g. X in search box or Back-Button). There is no way resetting a search but deleting the search text.

Documentation missing

A documentation for the front-end would be cool. In particular, I’m wondering where to change the location Lychee loads the photos from.

Selecting Subalbums not possible

I would expect the same behaviour as with albums, being able to select subalbums to e.g. delete more the one at once. Trying to catch a subalbum results in:

image

Fix shift + click

When select an image, shift click on a second image, all images between these two should be selected to mirror usual UX.

Multiple image move between albums

Dear friends, I like this project and I am very sattisfiet with it.
There is one thing, I am missing:
Possibilty to select more than one image and move these selced images to another existing or new album.
Should this be a new feature of any future build?
Many thanks for Lychee-Laravel, the best sel.hosted photo album!

Settings Menu behaviour when in image view

  • Start in Albums View
  • Open Settings so that Settings sidebar is open
  • Open an album
  • Click on Settings Menu Entry
  • Settings are opend
    -> Good

  • Start in Albums View
  • Open Settings so that Settings sidebar is open
  • Open an album
  • Open an Image (image view)
  • Click on settings menu entry
  • Header title change from image name to "Settings"
  • Settings are NOT opend
    -> Bad

image

  • click browser back button
  • Settings are opened with Albums Header Title

image

[Enhancement] Show album description between nav and pics

It would be nice to have option to show album description between the nav and the pictures in every album. This would give context to the user if the album name does not cut it. I know that it can be found behind the info button but that is not something regular/never before used user finds.

optionally it would be nice to have it as an admin (for all) and user (by album) setting to change visibility of this description.

Collapsing sidebar style issues

Detailed description of the problem

When closing the left sidebar the label text drops to a new line below the icon because of the collapsing div. It seems applying a min-width: 210px; to the class .linkMenu fixes this issue.

Another thing I noticed is that all but the Settings menu items have a preceeding whitespace which causes the items to look misaligned.

Apologies for being nitpicky :)

Steps to reproduce the issue

Open and close the sidebar. You can see a glimpse of the text being pushed to a newline before the sidebar completely closes.

Browser and system

Chromium Version 79.0.3945.117 (Official Build) Arch Linux (64-bit)
Firefox Version 72.0.1 Arch Linux (64-bit)

Album text on white background

Detailed description of the problem

This is a fringe case, but when an album thumbnail is white, you cannot see the subfolder icon or the album title. See #27.

Steps to reproduce the issue

Upload a new image to an album that is mostly white. Use Lychee-Laravel for the subfolder icon.

image

It may be worth increasing the bottom gradient. Not sure about ways to solve the subfolder issue other than to maybe invert the icon colors? That doesn't look too great, though.

Weird sub-album renaming behavior

  • Right-click a sub-album and select rename.
  • The dialog window will show the parent album's name (not correct).
  • Change the string to the desired name and hit "Set Title" --> At first, the name of the sub-album does not change, however, the parent album name in the title bar incorrectly gets updated to the previously entered sub-album name.
  • Re-load the page or step out and into the album again --> All names are displayed correctly now. Looks like there is something happening with the display of album names during and after the rename.

Renaming from inside the sub-album works correctly though.

Tested using d2819d4a0193d87498c23dc82cb77838127155d8

Add "copy link" to context menu

1.Hope can add image by using drop upload.
2.Add a one-click copy share link in right click menu, work in album and single image.

UI Issues when "About"-Sidebar is active

Detailed description of the problem

  • Next-Button is hidden behind sidebar so not functional.
  • When sidebar is active, image should be not overlapped by sidebar but still centred in the remaining view area

lychee_ui_sidepane_bug_01
lychee_ui_sidepane_bug_02
lychee_ui_sidepane_bug_03

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.