UI/UX improvements

[seballot]

Hello !
First, thanks a lot for this awesome application :)

I'm a fullstack developer, and I would like to propose myself for helping improving the UI.
Sympa UI design has not evolved since few time, and I think is now a bit old fashion.
Also, the software is growing and growing, and there is now a lot of functionalities, which is a bit difficult to handle by standard user. I would like to make easier to access the major functionalities.

So the idea would be to not touch any functionality, just change the style and re order some part of the UI.
Those change would not be mandatory in the code, a configuration will allow to activate the new UI, or just keep the old one. Like a skin/theme system, so any instance of sympa can choose to enable it or not.
I just did a similar contribution to etherpad : ether/etherpad-lite#3441

Just one thing, I do not know nothing about Perl, so if you could just help me giving the templates and the css folder, it would be great :)

So... WDYT?

Have a nice evening,
Sebastian

[ldidry]

Hello @seballot!

Templates and CSS are in default/web_tt2. You can override them by having a directory named web_tt2 in Sympa’s etc directory to start (overrides doesn’t need to restart Sympa’s fcgi process, so it would be more simple for you to dev like that, then report back your changes in your git folder).
You may want to have a look at https://github.com/sympa-community/sympa-ansible to ease your dev.

If you install Sympa from the sources the default way, those directory will be ~sympa/default/web_tt2 and ~sympa/etc/web_tt2.

My two cents:
There is no skin/theme system right now, and I think it would not be a good idea to have this: it would mean, for developpers, that you have to edit each template twice everytime you change a template.
You’ll see there is a shitload of template files, it would be painful to maintain two or more skins (although, other Sympa’s devs may have a different opinion).
Anyway, Sympa has already changed its interface in the pastee it can be done again.
Or the new UI can be provided has a zip file, that admins can unzip in ~sympa/etc/web_tt2
/My two cents

Hell yeah, Sympa’UI desesperately needs some love and I know you and @mrflos did a really great job on Etherpad 👍 Except for some grumpy people who don’t like changes, every user of Framapad likes the colibris skin.

I think every Sympa’s dev will agree with me and say "Please, go for it!" 🙂

Note:
There is a project to rewrite the web interface of Sympa with modern techs like Mojolicious or Dancer for the backend and VueJs for the frontend (see https://github.com/sympa-community/sympa-vue and https://github.com/sympa-community/sympa-design, PoF stucked for a year now) but it's kind of slow work: the frontend waits for the backend, and I don’t know if the backend is actively developped. Anyway, admins don’t rush for new versions (even less for such the big leap that will be), so if you redesign Sympa, it will be used for a long time: it surely will not be a waste of time at all.

[seballot]

Salut @ldidry ! Thanks for the support :)

Re skin, I was thinking of CSS skins, not template skins. I will probably change the templates to add some new css classes, but then the skin will be managed only by css.
But let's try first to create a new UI, will see then if we want to make it the new default theme or if we should implement a skin feature

I'll try to install this afternoon ! 💃

[ldidry]

Oh, just CSS. Well then, a choose default CSS system may be doable 🙂

[seballot]

Sorry, I think I need a bit help for installing :)
I followed the instructions with ansible, I manage to have it running and I can access http://lists.example.com/sympa

But

1. when I do vagrant ssh (I assume this is for connecting to the VM? just like I connect to a docker container?), I do not find the code in it. I saw I might need to change install_from_repository: 0 to install_from_repository: 1 to install via repository, but when the change is done, what should I do? I tried ansible-playbook site.yml -i environments/local/inventory again (equivalent to docker build?) but it get stuck on TASK [sympa : Download sources from repository]. In my config I got the default repository: https://github.com/sympa-community/git. Here is the full log. any idea?
2. In the web interface, I need to create a user, but it rely on sending an email. Does it mean I'm obliged to configure some mail server? if yes, how to do this?
3. How do I start and shutdown the VM? vagrant up for starting? and for stoping? For example, I tried to change the colors in sympa-ansible/roles/sympa/defaults/main.yml, but it does not affect the UI

Sorry, first time for me using vagrant, VM and Ansible...

[ldidry]

Well, I never used sympa-ansible (I use a VM with an installation from sources), but I thought it would easy to use. I guess it’s not :/

Ping @dverdin for help

Otherwise, you can do like me and follow the instructions on https://sympa-community.github.io/manual/install/install-sympa-distribution-source.html. Sorry for the loss of time.

[racke]

Or ping @racke. I will follow up on this ticket, but I'm at a conference today.

[racke]

Fix for repository URL: sympa-community/sympa-ansible#67

[seballot]

Hello again !
We decide with our non profit organisation to ask help from a designer so we would have a better UI. But the guy is not available until next month, and then it's summer so it could take some time.

Anyway, just to let you know that the work on the UI will probably be delayed a bit, in the meantime I'm working on ethercalc !

Talk soon !

[ldidry]

Don’t worry, Sympa is in great need for new UI, but it’s not recent for it, so some months of delay is not a problem 😉

[seballot]

Hi ! 2 years later, I'm trying to install sympa again so I could finally do something on the UI... but still failing ! :)

This time I tried "installaing from source" as @ldidry suggested, a lot of things have been installed, but still I cannot go to the end, I don't understand how to open the website in localhost. Isn't any Perl server to be run?

In the doc I have done until setup database : https://sympa-community.github.io/manual/install/setup-database.html

@ldidry or @racke would you be available to spend 30minutes in a call with me in order to setup my local machine?

[racke]

Time flies 😁. I can arrange a call next week. Please contact me at racke@linuxia.de and share details about your distribution and what you did so far with the installation.

[seballot]

Thanks :)

I'm on Debian 10, and here are following command I have run so far

sudo groupadd sympa
sudo useradd -g sympa -c 'Sympa user' -s /sbin/nologin sympa

git clone https://github.com/sympa-community/sympa.git

autoreconf -i
./configure --enable-fhs --prefix=/usr/local --with-confdir=/etc/sympa
make
sudo make install
sudo apt install cpanminus
cpanm --installdeps --with-recommends --with-develop .

touch sympa.sqlite
chown sympa:sympa sympa.sqlite
sudo chown sympa:sympa sympa.sqlite
cpan DBD::SQLite

I have contacted you by email