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

Orchard admin : todo general #7016

Closed
40 of 53 tasks
Skrypt opened this issue Jun 30, 2016 · 22 comments
Closed
40 of 53 tasks

Orchard admin : todo general #7016

Skrypt opened this issue Jun 30, 2016 · 22 comments

Comments

@Skrypt
Copy link
Contributor

Skrypt commented Jun 30, 2016

Here is a list of the core modules that still need to have adjustments for making them display better on mobile devices :

Main tasks

Other general tasks status :

  • Refactor LESS implementation of panels for Orchard using inheritance
  • General Layout and specific optimizations for cell phones
  • Remove right side panel. We currently still can open it by swiping on mobile devices.
  • RTL

Here are the things that needs to be improved generally in all views :

  • File uploads controls
  • buttons ".btn" needs to use icons
  • almost every form controls must have the .form-control class
  • checkbox and option buttons have special classes now
  • every buttons must be big enough to be pushed by a finger
  • tables must be inside a <div class="table-responsive"> to make them overflow
  • use the new no-content boxes when lists have no records
    • don't display buttons or filters if there is no records in those lists
  • use progressbars
  • use Toastr notifications
  • use modal confirmations
  • use new token picker
@Skrypt Skrypt added the Admin label Jun 30, 2016
@Skrypt Skrypt changed the title Orchard admin : status and todo Orchard admin : todo general Jun 30, 2016
@sfmskywalker
Copy link
Member

Contents -> Improve LocalizationPart rendering in SummaryAdmin mode:
image

@Skrypt
Copy link
Contributor Author

Skrypt commented Jul 24, 2016

We could replace the Navigation UI tree jquery plugin with an Angular one.
https://github.com/angular-ui-tree/angular-ui-tree

@sfmskywalker
Copy link
Member

I actually prefer to stick with what comes with Amaretti as much as possible as that makes it easier to apply updates. Unless there is a compelling reason to switch to Angular UI tree?

@Skrypt
Copy link
Contributor Author

Skrypt commented Jul 24, 2016

Amaretti uses jquery.nestable
https://github.com/dbushell/Nestable
It's not supported by the owner of the repository. That's mainly why. Other than that I did not have time to make a comparison of features between both.
At first sight I would say that I prefer the styling of the UI tree in the Amaretti theme.
I like that when you take an element it puts a dashed box where there element was. The Angular UI Tree will higlight the zone of all the grouped elements that you are moving too. It's been a while that I've looked at that view code so I don't know if Angular would be too complex for nothing on that one. I just thought Angular would be cleaner.

On second thought there is no need to replace if it works. I will just make some styling tweaks, it will be faster.

@Skrypt
Copy link
Contributor Author

Skrypt commented Jul 27, 2016

We need to improve the responsive behavior of the top menu. Right now the only the "culture picker" and the "user menu" appears in it. It misses "dashboard" and "content definition" menus. I believe that the culture picker should not appear on that "hamburger" menu but should appear on the top right green portion of the header. Same goes for the user menu. Then the 2 other top left menus should appear in the "hamburger" menu.

@Skrypt
Copy link
Contributor Author

Skrypt commented Jul 28, 2016

After working a little on the top menu I think we will need to be able to display the culture picker and the user menu in that "hamburger" menu. There is not enough space left on the top green portion of the header when we are on smart phone devices. Right now they are display: none because those 2 menus need responsive styling.

@Skrypt
Copy link
Contributor Author

Skrypt commented Jul 28, 2016

We need to do a better javascript validation on the email test form. Right now I used the new Toastr plugin for displaying validation errors but I should not have done it that way. Reason is that we can now spam that send button to get notifiers stacking one on top of the other.

image

I could also set the Toastr plugin to simply not allow duplicate messages. Which I will do for now.

    toastr.options = {
       preventDuplicates: true
    };

@agriffard
Copy link
Member

I moved the Localization to Meta properties in Summary admin.

@Skrypt
Copy link
Contributor Author

Skrypt commented Jul 29, 2016

Need to refactor the implementation of panels by inheriting them instead of overriding them. See orchard-panels.less. We need to have our own panels and inherit them for reusability of the Amaretti panels.

.or-panel-main{
  .panel;
  /* our customizations */
}

This is what prevents me from using them right now in the Module / Features view. We overrided them with Flexbox and changed the default margin / padding of those.

@Skrypt
Copy link
Contributor Author

Skrypt commented Aug 16, 2016

Merged the latest dev in the new admin theme branch

@Skrypt
Copy link
Contributor Author

Skrypt commented Aug 16, 2016

Created a new token picker that has no dependencies on JQuery UI. I've not implemented autocomplete because most of the time the textbox that has a token picker will already have a text which makes the autocomplete list filtering useless. I used a Boostrap button dropdown with some tweaks. That way we can make the pop-up box responsive and we get rid of the bug that adds a text in the bottom of the view that indicates that we can use arrows to navigate the token picker values. Feel free to look at it on the autoroute part settings. Also by using a Bootstrap input-group with a button we no longer have to fix the margins of that icon inside the textbox for each browsers which was still clunky at some places. I used a leaf for the icon, so a token is like an Orchard leaf 😉

image

@Skrypt
Copy link
Contributor Author

Skrypt commented Aug 16, 2016

I needed to add a validation if there was submenu items on that function so that it not apply the "open" class to a root menu item that has no submenu. It needs to be added to the Amaretti base theme main.js file.

        function openSubMenu(el, event, click) {
            var li = $(el).parent();
            var orScroller = li.find(".or-scroller");
            var subMenu = li.find("> ul");
            var isOpen = li.hasClass('open');

            //Show sub menu element
            if (!$.isXs()) {
                $("ul.visible", leftSidebar).removeClass("visible").parent().removeClass('open');

                //Add classes to create a delay on sub menu close action after mouse leave
                if (subMenu.length > 0) {
                    if (!click || (click && !isOpen && subMenu)) {
                        li.addClass('open');
                        subMenu.addClass("visible");
                    }
                    subMenu.removeClass("hide");
                }
            }

@Skrypt
Copy link
Contributor Author

Skrypt commented Aug 16, 2016

@Piedone I would need you to provide me with a Lombiq module that I could use for backward compatibility tests.

@Piedone
Copy link
Member

Piedone commented Aug 16, 2016

@Skrypt could you elaborate please? I presume it should have admin features, but anything special? (BTW all of them are here: https://github.com/Lombiq/).

@Skrypt
Copy link
Contributor Author

Skrypt commented Aug 16, 2016

Yes, I need one that uses admin views. I've had issues installing modules so I need one that works with the dev branch ; if you could point me on a specific one that would help.

@Piedone
Copy link
Member

Piedone commented Aug 16, 2016

Hmm. These are some modules having admin functionality and are easy to test:

Always use the version from the dev branches.

Let me know if something doesn't look right.

@Skrypt
Copy link
Contributor Author

Skrypt commented Aug 17, 2016

The checkboxes are not displaying in some places after upgrading the Amaretti Theme. The reason is that we need absolutely to have the checkbox input right before it's label. In some places there is more than one input in the <div class="or-checkbox"> and that makes the checkbox disappear. I tried finding where this second input comes from and so far no clue.

Thanks @Piedone I will do.

@Skrypt
Copy link
Contributor Author

Skrypt commented Aug 17, 2016

Just to summarize this feature TODO. We have 2 bugs left to fix. We need to test if old modules still works. And we need to figure out if RTL still works. Will revert my current work on Content Items list header just to get a clean working version in the feature-admin branch. I'm stopping adding things in this branch. We need to ship it and I'm getting short on time. So please, feel free to help on the remaining tasks 😉

@Skrypt
Copy link
Contributor Author

Skrypt commented Aug 17, 2016

I reverted back the work on content list filters. Now the filters works as before. I also added some minor responsive styling.

@Skrypt
Copy link
Contributor Author

Skrypt commented Aug 19, 2016

Culture picker is now added to the top hamburger menu. Sipke look at the background color of those icon-nav pop-up. They look different than on the Amaretti demo website.

@Skrypt
Copy link
Contributor Author

Skrypt commented Sep 30, 2016

@rtpHarry please use the admin label on your issues so that we can filter those issues directly in the issues list. And thanx for your help. It's always good to have people to test/help and have second view on this.

@rtpHarry
Copy link
Contributor

@Skrypt I don't have that level of access to the repo. I'm just a "docs team" member so I can't do tags or manage issues on the main repo

@Skrypt Skrypt added the wontfix label Nov 3, 2018
@Skrypt Skrypt closed this as completed Nov 3, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Status: Done
Development

No branches or pull requests

5 participants