mirror of
https://github.com/modoboa/modoboa.git
synced 2026-04-25 00:46:03 +03:00
[GH-ISSUE #1320] Web-Interface Refactoring #1063
Labels
No labels
bug
bug
dependencies
design
documentation
duplicate
enhancement
enhancement
enhancement
feedback-needed
help-needed
help-needed
installer
invalid
looking-for-sponsors
modoboa-contacts
new-ui
new-ui
pr
pull-request
pyconfr
python
question
security
stale
webmail
wontfix
No milestone
No project
No assignees
1 participant
Notifications
Due date
No due date set.
Dependencies
No dependencies set.
Reference
starred/modoboa-modoboa#1063
Loading…
Add table
Add a link
Reference in a new issue
No description provided.
Delete branch "%!s()"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
Originally created by @herrbischoff on GitHub (Dec 7, 2017).
Original GitHub issue: https://github.com/modoboa/modoboa/issues/1320
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 commented on GitHub (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 commented on GitHub (Dec 17, 2017):
CoPilot looks a lot better imo.
@ghost commented on GitHub (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/actionorsection/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
for admins
core/parameters)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 menuinfo/(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 identitiesaccounts/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
dashboard, either incorporate them into the dashboard view or as a subpage i.e.dashboard/logsadmin/settings/admin/domains/<id>) can only look up models byid, allow name to be used i.e.admin/domains/example.comidtfilterquery string on the parent page i.e.admin/identities/?idtfilter=accountLOGIN_URLetc insettings.py@tonioo commented on GitHub (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)
@ghost commented on GitHub (Feb 1, 2018):
Looks good, I was thinking of something like this for the side menu.
@tonioo commented on GitHub (Feb 2, 2018):
So no more top menu in your idea?
@ghost commented on GitHub (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 commented on GitHub (Feb 3, 2018):
Please note that we (Tuxis) are willing to provide some VM’s for development, testing, Gitlab, matter most, whatever. :)
@genofire commented on GitHub (Mar 18, 2018):
hopefully with theming (or create a own themen) like: https://bootswatch.com/ or http://semantic-org.github.io/example-github/
@hadifarnoud commented on GitHub (May 13, 2019):
is this effort stopped?