Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Web-Interface Refactoring #1320

Open
herrbischoff opened this Issue Dec 7, 2017 · 9 comments

Comments

7 participants
@herrbischoff
Copy link

herrbischoff commented Dec 7, 2017

As started to being discussed here, we will attempt to rewrite the web interface in Vue.js.

I suggest starting with the very basics: proper definition of all API routes as well as their improvements, followed by a click-dummy prototype as a Vue project. I can definitely do the latter. Maybe you're open to an interface refresh. I like the look and modular use of Bulma quite a lot. Regarding tooling, Webpack is pretty much set. Besides that, I'd like to use Single File Components as they are one of the core strengths of Vue.

Regarding coordination and collaboration, we could work in one or more new repos, either public or private ones, according to your preference. Maybe it would be better to first start private, as we're probably shuffling things around quite a bit, breaking and rebuilding as we go. I suggest running a private development instance of the Modoboa API you push to and run your intended changes on so I can test the routes and their functionality on.

If you have a paid GitHub account that allows for private repos, that would be nice since I don't have one. I run a private GitLab installation for my closed work and client projects. We could use that for the initial work if you prefer. As far as communication is concerned, I also run a private Mattermost instance (Slack-like open source chat) we could leverage for a quicker turnaround.

Let me know what you think.

@tonioo

This comment has been minimized.

Copy link
Member

tonioo commented Dec 7, 2017

Your suggestion looks fine. A separated (private or public) repository is a good idea for a start, we could also work on a dedicated branch. Don't know what's best... If we go for a private one, I don't have any paid plan so your Gitlab instance would be appreciated ;-) We can indeed use Mattermost for communication.

About the interface, I agree it needs a refresh. I was thinking about CoPilot which is based on BS3 and AdminLTE but suggestions like Bulma are welcome.

Still talking about the interface, I think it could be simplified too. For example, 'domains', 'identities' and modoboa sections could be merged into a single 'administration' one.

@hadifarnoud

This comment has been minimized.

Copy link

hadifarnoud commented Dec 17, 2017

CoPilot looks a lot better imo.

@fyfe

This comment has been minimized.

Copy link
Collaborator

fyfe commented Jan 3, 2018

I think the current url structure of Modoboa is good, it's very clean and the urls are clear about what they do i.e. section/model/action or section/model/id/action. I've outlined the current url structure at the bottom with some of my comments and suggestions for improvement.

As far as the actual graphical layout goes I do like the look of CoPilot. I agree the menu should be simplified. If you used something like CoPilots vertical menu on the left I think following the existing url structure would be a good base for the menu layout:

for simple users

  • dashboard
  • webmail (if installed)
  • sieve filters (if installed)
  • quarantine (if installed)
  • settings
  • ...

for admins

  • dashboard
  • user
    • would contain everything from simple users above
  • admin
    • domains
    • identities
    • ...
  • settings (currently core/parameters)
    • general
    • administration
    • ...

It would be nice to see better separation between the business logic and the UI. I would have Vue get all its data through the REST API, the current REST API would need extended to fully support this.


Current structure (without extensions)

  • dashboard/
  • core/ redirects to core/parameters Modoboa on the top menu
    • info/ (1)
    • logs/ (1)
    • parameters/ (2)
      • #<panel number> settings panel tabs (3)
  • admin/ redirects to admin/domains/
    • domains/ list all domains
      • <domain pk>/ domain details (4)
        • edit/
        • delete/
        • mx/
        • dnsbl/
      • new/
      • quotas/
      • import/
      • export/
    • identities/ list all identities
      • accounts/ currently no view (5)
        • <account pk>/ account details (4)
          • edit/
          • delete/
        • new/
      • aliases/ currently no view (5)
        • <alias pk>/ alias details (4)
          • edit/
          • delete/
        • new/
      • quotas/
      • import/
      • export/
  • user/ redirects to user/profile/
    • api/
    • preferences/
      • #<panel number> settings panel tabs (3)
    • profile/
  • accounts/ Django's authentication pages (6)
    • login/
    • logout/
    • password_reset/
      • done/
    • reset/
      • <uid>/<token>/
      • done/

Improvements

  1. Move info and logs to dashboard, either incorporate them into the dashboard view or as a subpage i.e. dashboard/logs
  2. Move parameters to admin/settings/
  3. Use tab names instead of numbers
  4. Currently model views (admin/domains/<id>) can only look up models by id, allow name to be used i.e. admin/domains/example.com
  5. Add missing list views, they are currently accomplished by using the idtfilter query string on the parent page i.e. admin/identities/?idtfilter=account
  6. It's possible to move these, requires setting LOGIN_URL etc in settings.py
@tonioo

This comment has been minimized.

Copy link
Member

tonioo commented Feb 1, 2018

Here is a proposal for a new layout of the admin section: https://wireframe.cc/xSBuDu
(sorry for the colors, the tool seems pretty limited)

@fyfe

This comment has been minimized.

Copy link
Collaborator

fyfe commented Feb 1, 2018

Looks good, I was thinking of something like this for the side menu.

@tonioo

This comment has been minimized.

Copy link
Member

tonioo commented Feb 2, 2018

So no more top menu in your idea?

@fyfe

This comment has been minimized.

Copy link
Collaborator

fyfe commented Feb 3, 2018

I'm not a fan of the top menu I prefer having maximum vertical space available for content, but that's just my personal preference.

@tuxis-ie

This comment has been minimized.

Copy link

tuxis-ie commented Feb 3, 2018

Please note that we (Tuxis) are willing to provide some VM’s for development, testing, Gitlab, matter most, whatever. :)

@genofire

This comment has been minimized.

Copy link

genofire commented Mar 18, 2018

hopefully with theming (or create a own themen) like: https://bootswatch.com/ or http://semantic-org.github.io/example-github/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.