sympa icon indicating copy to clipboard operation
sympa copied to clipboard

UI/UX improvements

Open seballot opened this issue 5 years ago • 12 comments

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 : https://github.com/ether/etherpad-lite/issues/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

seballot avatar May 14 '19 18:05 seballot

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 :+1: 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!" :slightly_smiling_face:

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.

ldidry avatar May 15 '19 10:05 ldidry

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 ! :dancer:

seballot avatar May 15 '19 11:05 seballot

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

ldidry avatar May 15 '19 11:05 ldidry

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...

seballot avatar May 15 '19 16:05 seballot

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.

ldidry avatar May 16 '19 06:05 ldidry

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

racke avatar May 16 '19 07:05 racke

Fix for repository URL: https://github.com/sympa-community/sympa-ansible/pull/67

racke avatar May 16 '19 08:05 racke

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 !

seballot avatar Jun 02 '19 07:06 seballot

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 :wink:

ldidry avatar Jun 02 '19 09:06 ldidry

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?

seballot avatar Aug 20 '21 09:08 seballot

Time flies :grin:. I can arrange a call next week. Please contact me at [email protected] and share details about your distribution and what you did so far with the installation.

racke avatar Aug 20 '21 10:08 racke

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

seballot avatar Aug 20 '21 11:08 seballot