New design for sort options

[trang]

We discussed in #2108 about a new design for the sort options.

The idea looks basically like this:

See #2108 (comment) and the next few replies for the wording of each option.

Consider implementing this together with #1063.

[gioele-santi]

So instead of the line with 4 anchors we should add a button with a drop down list with all possible sort options.
I would like to work on this.

[trang]

Great, I am assigning this to you then! 😄

Please make sure to check the comment mentioned in the description, as there is some draft of code already.

There are several places where the "Sort" links are used, so it is not always 4 anchors. But yes, the point is to remove those links and replace them with a button + dropdown list instead.

The pages where the "Sort" links are being used are listed in another comment in the same thread.

I suggest you implement this new design in one only page at first, then do a draft PR like you did previously. We can check if it's alright on this page and you can finish with the other pages once we have settled down on the wording.

[gioele-santi]

Yesterday I finally had time to start studying this issue.Since there are several pages with the same inline sort options, I decided to focus on one first, in particular src/Template/SentenceLists/index.ctp.
First I focus on the styling.

The box has alway a top bar with <div class="md-toolbar-tools"> with a title inside.
To add a button I am using <md-button class="md-icon-button" aria-label="Sort by">

I am checking if there's an existing css class to allign on right, otherwise I found out that I can get the right placement with this kind of styling:

position: absolute;
margin-right: 1em !important;
right: 0px;

My main concern with the looks is how to load an icon in md-icon

<md-icon md-svg-src="img/list.svg"> 

tries to load http://localhost:8080/eng/sentences_lists/img/list.svg instead of http://localhost:8080/img/list.svg (which should be the right path (then I will find the proper sort icon)

Then I will figure out how to display the dropdown list (I have to understand ho to display it, maybe using javascript and an a select)

[trang]

I am checking if there's an existing css class to allign on right

Rather than aligning to the right, you can make the <h2> element expand to take all the available space. That is done by adding the flex attribute in the element (<h2 flex>).

My main concern with the looks is how to load an icon in md-icon

At the moment we are not using SVGs but the Material Font Icons with ligatures.

<md-icon>sort</md-icon>

Then I will figure out how to display the dropdown list

Perhaps you've missed the info but there is already an example of how to display the sort menu. I should have probably posted here all the relevant info from the other thread.

Code sample

        <md-toolbar class="md-hue-2">
            <div class="md-toolbar-tools">
                <h2 flex><?= $title ?></h2>

                <md-menu md-offset="5 50" md-position-mode="target-right target">
                    <md-button ng-click="$mdOpenMenu($event)">
                        <md-icon>sort</md-icon> Sort by
                    </md-button>
                    <md-menu-content>
                        <md-menu-item ng-repeat="item in ['list', 2, 22223, 9324, 02934, 12]">
                            <md-button>
                                <md-icon>{{ $index === 1 ? 'check' : 'blank'}}</md-icon>
                                <span style="padding-right: 12px">Option {{item}}</span>
                            </md-button>
                        </md-menu-item>
                    </md-menu-content>
                </md-menu>
            </div>
        </md-toolbar>

If you replace the toolbar code in src/Template/SentencesLists/index.ctp by this code, you should see exactly what is displayed in the screenshot.

Sort option labels

For each sort link that we currently have, there will be 2 options in the menu. Below is the list of every page where there are sort links and the corresponding suggested labels.

https://tatoeba.org/eng/sentences_lists/index

• list name
  • List name (alphabetical)
  • List name (reverse alphabetical)
• date created
  • Newest first
  • Oldest
• number of sentences
  • Highest number of sentences
  • Lowest number of sentences
• last updated
  • Most recently updated
  • Least recently updated

https://tatoeba.org/eng/sentences_lists/show/9633

• date added to list
  • Most recently added
  • Least recently added
• date created
  • Newest sentences
  • Oldest sentences

https://tatoeba.org/eng/tags/view_all

• count
  • Highest number of sentences
  • Lowest number of sentences
• name
  • Tag name (alphabetical)
  • Tag name (reverse alphabetical)

https://tatoeba.org/eng/tags/show_sentences_with_tag/2139

• date created
  • Newest sentences first
  • Oldest sentences first
• date of tag
  • Most recently tagged
  • Least recently tagged

https://tatoeba.org/eng/users/all

• Username
  • Username (alphabetical)
  • Username (reverse alphabetical)
• Member since
  • Newest first
  • Oldest first
• Member status
  • Status (admin to contributor)
  • Status (contributor to admin)

https://tatoeba.org/eng/sentences/of_user/TRANG

• date modified
  • Most recently updated
  • Least recently updated
• date created
  • Newest first
  • Oldest first

https://tatoeba.org/eng/reviews/of/TRANG

• date modified
  • Most recently updated
  • Least recently updated
• date created
  • Newest first
  • Oldest first
• sentence id
  • Newest sentences
  • Oldest sentences

There was also some mention of the sort section from the advanced search but we can leave this out of scope for this issue.

[gioele-santi]

@trang Thank you very much. I checked and it works as expected. I am sorry but I didn't think about checking about the other discussion.
Now I am studying how the buttons should work.
As I understand in current version links are generated using CakePHP Paginator.
In the new menu the list of buttons is generated in ng-repeat = "item in [...]".

I was wondering, should I put links inside the menu or try to work with a directive in app.module.js ?
So that when clicking I open the page with the right sort option via js
or create code in background using php (maybe Paginator)?

[trang]

No problem @gioele-santi 🙂

In the code sample, the ng-repeat was used only to quickly generate menu items. In your case, you won't have much use of ng-repeat because there's no angular data that holds the information for the options. You have to define manually the HTML for each menu item.

You can replace the <md-button> by link that is generated by $this->Paginator->sort() and it should still display properly.

<md-menu-item>
    <?= $this->Paginator->sort( ... ) ?>
</md-menu-item>

I'll leave it to you to figure out how to handle the indicator for the current selected sort.

[gioele-santi]

Thank you very much.
Next days I will be able to finally take care of this.
I thought I had more time during summer but unfortunately a very big deadline came up with university and since I am the only developer there now it is taking a lot of my efforts (by the way the experience with the other issue helped me improve the javascript approach in the university project).

[gioele-santi]

Ok, today I was able to reprise my work on this issue.
I fixed aspect of drop down menu and its alignment in the top bar.

Currently options are visualized with this code:

<md-menu-item>
    <md-button>
        <md-icon>{{ $index === 1 ? 'check' : 'blank'}}</md-icon>
        <span style="padding-right: 12px">
            <?php echo $this->Paginator->sort('created', __('date created')); ?>
        </span>
   </md-button>
</md-menu-item>

I already know the management of md-icon is not (yet) correct.
I think I need to better figure out how Paginator->sort() works to visualize the options.

First parameter should be the database column used for sorting, second parameter the localized name for the link.

Ascending or descending has no direct control, so I am not sure if I can generate two links for each options as ascending/descending are automatically alternated by Paginator->sort().
So I should not double the links in the drop down list right? (eg: date ascending/date descending)

Then I am focusing on the check mark with md-icon as of now the only way to figure out if an option was selected is to check the <a></a> element to see if it has class asc or desc.
Should I hack that or is there any other way to figure out which option is selected?

[AndiPersti]

Ascending or descending has no direct control, so I am not sure if I can generate two links for each options as ascending/descending are automatically alternated by Paginator->sort().
So I should not double the links in the drop down list right? (eg: date ascending/date descending)

You should create two links for each sort key, see Trang's comment above.
Paginator->sort() takes as a third parameter an options array which makes it possible to create links with a locked direction:

echo $this->Paginator->sort('name', __('list name'), ['direction' => 'asc', 'lock' => true]);
// Result: <a class="desc locked" href="/eng/sentences_lists/index?sort=name&amp;direction=asc">list name</a>
echo $this->Paginator->sort('name', __('list name'), ['direction' => 'desc', 'lock' => true]);
// Result: <a class="asc locked" href="/eng/sentences_lists/index?sort=name&amp;direction=desc">list name</a>

Then I am focusing on the check mark with md-icon as of now the only way to figure out if an option was selected is to check the <a></a> element to see if it has class asc or desc.
Should I hack that or is there any other way to figure out which option is selected?

Since we reload the page after each new sort selection, you can set the correct icon already on the server (i.e. in the PHP code). Paginator->sortKey() and Paginator->sorDir() give you the current sort key and direction respectively.

[gioele-santi]

Thank you. I looked for documentation about Paginator but it is hard to find.
I would also like to see the documentation to better understand it.
It should be in CakePHP documentation, right? Can you point me the page so I can also read the description there?
I was looking at this but it lacks examples for sort.

[AndiPersti]

You want to look at the documentation for the PaginatorHelper.
CakePHP's API reference is also quite helpful.

[gioele-santi]

Thank you very much!