Problem/Motivation

With the introduction of the form language concept in #1498874: Provide language awareness to entity forms (introduce the form language concept), we will need a language switcher allowing to choose the form active language.

Proposed resolution

Agreement that a drop button as in #7

Remaining tasks

Done: mock ups.
Done: ui element chosen. (We need to figure out if this can be a regular language switcher block or if it will be a UI elelment placed inside the form itself.)
Done: initial implementation (proceeded since form language landed #1498874: Provide language awareness to entity forms (introduce the form language concept)).

Todo:

  • refine according to feedback in #55. Contributor Task to create patch, and interdiff: http://drupal.org/node/1424598
  • (waiting on refinement) manually test, after implementation. Contributor Task to manually test: http://drupal.org/node/1489010 (be sure to note browsers used)
  • final screenshots, after implementation

User interface changes

Before: #5
Proposed: #7

API changes

todo: clarify if there would be api changes. (API changes/additions that would affect module, install profile, and theme developers, including examples of before/after code if appropriate)

Related

#1874102: Rename language switcher blocks (to differentiate content and UI)

Files: 
CommentFileSizeAuthor
#57 interdiff.1498880.56.57.txt936 bytesYesCT
#57 1498880-block-config-57.patch5.18 KBYesCT
PASSED: [[SimpleTest]]: [PHP 5.4 MySQL] 73,148 pass(es). View
#57 pushed-down.png190.02 KBYesCT
#57 no-push.png61.05 KBYesCT
#57 pushed-down.png190.02 KBYesCT
#57 closed.png136.08 KBYesCT
#57 order-lang-config.png232.27 KBYesCT
#56 interdiff-1498880-54-56.txt1008 byteslauriii
#56 1498880-block-config-56.patch5.17 KBlauriii
#55 seven-languge.png712.4 KBYesCT
#55 dropdown-bartik.png30.28 KBYesCT
#55 long-link-underline.png108.67 KBYesCT
#55 language-list.png239.77 KBYesCT
#54 interdiff.1498880.51.54.txt1.6 KBYesCT
#54 1498880-block-config-54.patch4.74 KBYesCT
PASSED: [[SimpleTest]]: [PHP 5.4 MySQL] 72,871 pass(es). View
#53 1498880-block-config-51.patch4.75 KBlauriii
PASSED: [[SimpleTest]]: [PHP 5.4 MySQL] 72,749 pass(es). View
#51 1498880-block-config-51-test.patch2.6 KBlauriii
FAILED: [[SimpleTest]]: [PHP 5.4 MySQL] 72,849 pass(es), 1 fail(s), and 0 exception(s). View
#51 1498880-block-config-51.patch4.75 KBlauriii
PASSED: [[SimpleTest]]: [PHP 5.4 MySQL] 72,976 pass(es). View
#44 1498880-block-config-44.patch3.38 KBSutharsan
PASSED: [[SimpleTest]]: [MySQL] 59,887 pass(es). View
#42 1498880-block-config-41.patch3.35 KBKarmen
FAILED: [[SimpleTest]]: [MySQL] 58,338 pass(es), 24 fail(s), and 267 exception(s). View
#41 1498880-block-config-41.patch3.35 KBKarmen
FAILED: [[SimpleTest]]: [MySQL] 58,313 pass(es), 24 fail(s), and 267 exception(s). View
#30 1498880-block-config-30.patch3.35 KBDragan Eror
FAILED: [[SimpleTest]]: [MySQL] Unable to apply patch 1498880-block-config-30.patch. Unable to apply patch. See the log in the details link for more information. View
#28 lang-block.png30.27 KBandypost
#28 lang-bartik1.png20.92 KBandypost
#28 lang-bartik2.png18.86 KBandypost
#26 1498880-interdiff-26.txt1.23 KBandypost
#26 1498880-lang-26.patch1.87 KBandypost
PASSED: [[SimpleTest]]: [MySQL] 49,068 pass(es). View
#22 1498880-lang-22.patch653 bytesandypost
FAILED: [[SimpleTest]]: [MySQL] Unable to apply patch 1498880-lang-22.patch. Unable to apply patch. See the log in the details link for more information. View
#22 lang-block.png23.87 KBandypost
#7 1498880-7-a.png43.81 KBDragan Eror
#7 1498880-7-b.png45.57 KBDragan Eror
#6 2012-11-05 03.22.21 pm.png9.44 KBytsurk

Comments

plach’s picture

tagging

Gábor Hojtsy’s picture

So I guess #1498874: Provide language awareness to entity forms (introduce the form language concept) should go first? :) Or would you like to get people going with making up ideas about this?

plach’s picture

Well, surely some UX discussion could help here. However the implementation will have to wait for form language to land...

Gábor Hojtsy’s picture

Title: Introduce a form language switcher » Theme language switcher for seven theme
Component: forms system » language.module

Retitling issue for updated thinking, that it should just be the language switcher block reused. Needs to be themed for Seven since it looks bad as-is.

ytsurk’s picture

Assigned: Unassigned » ytsurk

i would work on this,

language switcher block in seven

right now there is a list displayed, what would you imagine instead .. ?
there are also a lot of modules around that block. (dropdown, flags etc.)

could be some show/hide functionality for the list, useful if very big ..
also there are two blocks now (UI text / content) - probably they should have a different feeling

ytsurk’s picture

FileSize
9.44 KB

here again the broken screenshot:

language switcher block in seven

Dragan Eror’s picture

Assigned: ytsurk » Unassigned
FileSize
45.57 KB
43.81 KB

This is first suggestion (UX improvements).

Theme language switcher for seven theme suggestion - A

Theme language switcher for seven theme suggestion - B

So, what you think?

ytsurk’s picture

i like the approach; reuse of the standard - dropbutton (at least looks like it) - this will even be cross-theme !

maybe the title could be placed before, inlined.

Gábor Hojtsy’s picture

Issue tags: +Usability

Wow, it is amazingly fascinating how close is this to Bojhan's suggestion from http://drupal.org/node/1282018#comment-6120798, amazing. Will let him know to look at this one :)

Gábor Hojtsy’s picture

Also, why would you use lowercase at the start? Just to satisfy the general use of this dropdown link link? Languages are uppercase...

Dragan Eror’s picture

Ignore the characters case, It was quick "design in browser" thing.

YesCT’s picture

Issue summary: View changes

Updated issue summary.

YesCT’s picture

Good. Drop button seems to be the right way to go here, since the action of switching will be done right on picking (there is no additional save or switch button).

I'll update the issue summary.
If someone wants to code this up, go ahead and assign the issue to yourself. :) [edit: @plach do you think this could be picked up by someone? I am not sure what level of difficulty it is but it seemed like it might be not too hard for someone to come into.]

Dragan Eror’s picture

Maybe I can do it.
Just curious, do you consider to do it with:

  • Default block for switching language, just put that block in some region and adjust css/theme
  • Default block render in theme directly (without region), adjust css
  • Create new theme function (or other custom coding) to render language links as dropbutton-widget

What are preferences here? This is what determines this task hard or easy.

Gábor Hojtsy’s picture

@Dragan Eror: I'd add a theme function override for the language list in the Seven theme (it does not currently have its own theme I think although it might in fact have). If/when blocks as plugins are committed, we could have instance settings on blocks, so we can set a block instance in the frontend theme to be a classic HTML list display and on the backend as a dropbutton.

YesCT’s picture

I think this is the issue Gabor refers to: #1535868: Convert all blocks into plugins

We could get a start on this without worrying about that, or use one of the recent patches there, and do something on top of that.

I'm guessing this is a good issue for someone to jump into, but that it might be challenging (not novice).

The desired UI is agreed on, any initial patch is good at spurring on progress.

I'll update the issue summary remaining tasks.

YesCT’s picture

Issue summary: View changes

Updated issue summary with issue summary template and remaining tasks.

YesCT’s picture

YesCT’s picture

Issue summary: View changes

Updated issue summary remaining tasks to help someone jump in to this.

jibran’s picture

Assigned: Unassigned » jibran

I am going to work on this one. Going to create a language switcher block with drop button language list.

Gaelan’s picture

Assigned: jibran » Gaelan

I'm working on this. Here are the options I can see:

  • Add a new element (I'll call it a popbutton)
  • Just CSS it
  • Use the existing dropbutton element

I personally prefer the popbutton element because I think we need CSS, and I think the dropbutton is meant for "you haven't selected any of these options, select one now", instead of "this is your current option, you can switch to a new one if you want." Going to start on the popbutton.

Gaelan’s picture

Now that I think about it, we could also extend the existing dropbutton. I think this is the way to go.

YesCT’s picture

I dont know implementation details of how to do that, but extending the existing dropbutton *sounds* better to me.

plach’s picture

Currently the language switcher is output as plain links, we should either alter them only for seven or have a dropbutton also in the default theme. Not sure this would be a good choice. Again a word from @Bojhan would be welcome.

andypost’s picture

Status: Active » Needs review
FileSize
23.87 KB
653 bytes
FAILED: [[SimpleTest]]: [MySQL] Unable to apply patch 1498880-lang-22.patch. Unable to apply patch. See the log in the details link for more information. View

Here's a simple patch and screenshot.
The main problem that active item by default does not show active language, suppose language_negotiation_get_switch_links() needs to be modified to order the list

Another issue that default block title is too big and probably we need to ship 2 css files to make this block float (rtl second one)

lang-block.png

andypost’s picture

Issue tags: -needs initial patch

Also it's possible that block should know the default language and make a sort inside

Status: Needs review » Needs work

The last submitted patch, 1498880-lang-22.patch, failed testing.

plach’s picture

In #1874102: Rename language switcher blocks (to differentiate content and UI) we agreed about going for a just "Language" as title, if only one configurable langauge is enabled. This will probably happen in #1833022: Only display interface language detection options to customize more granularity .

andypost’s picture

Status: Needs work » Needs review
FileSize
1.87 KB
PASSED: [[SimpleTest]]: [MySQL] 49,068 pass(es). View
1.23 KB

Not sure I get how to make default title for block, but it's title is not affected by the patch.

Just fixed tests

plach’s picture

Can we get a screenshot of the language switcher in Bartik?

andypost’s picture

FileSize
18.86 KB
20.92 KB
30.27 KB

Configuring a block
lang-block.png
Switch language (closed)
lang-bartik1.png
Switch language (open)
lang-bartik2.png

plach’s picture

Thanks, looks acceptable to me in Bartik too. As you were saying we probably need to change the order of links so that the current one is always first, i.e. the visible one.

Dragan Eror’s picture

FileSize
3.35 KB
FAILED: [[SimpleTest]]: [MySQL] Unable to apply patch 1498880-block-config-30.patch. Unable to apply patch. See the log in the details link for more information. View

Here is block config patch. Now it is possible to configure how you want to show languages in the block

  1. As a HTML list
  2. As JavaScript operations
Dragan Eror’s picture

Issue tags: +SprintWeekend2013

Adding #SprintWeekend tag

plach’s picture

Status: Needs review » Needs work

Functionally the patch looks good to me, but it seriously needs more styling work as now the language switcher has no margins and looks sloppy on most seven pages. We could consider floating the language switcher on the right to match Bojhan's proposal: #1282018-99: Improve UX of language-aware entity forms.

+++ b/core/modules/language/lib/Drupal/language/Plugin/block/block/LanguageBlock.php
@@ -31,6 +40,29 @@ function blockAccess() {
+        'theme' => t('HTML List'),
+        'type' => t('JavaScript operations'),

These labels do not look very user-friendly to me. What about:

  • List
  • Dropbutton
+++ b/core/modules/language/lib/Drupal/language/Plugin/block/block/LanguageBlock.php
@@ -49,6 +80,17 @@ public function build() {
+      // Attach some logic.

This comment is not very informative.

YesCT’s picture

Issue tags: -challenging +medium

updating tags, looks a bit more reasonable (medium instead of challenging) with some specific things to fix.

also updating issue summary remaining tasks.

YesCT’s picture

Issue summary: View changes

added related novice issue to retitle blocks

YesCT’s picture

Issue summary: View changes

updated remaining tasks

YesCT’s picture

Issue tags: +frontend

Tagging to show on the frontend section of http://www.drupal8multilingual.org/

YesCT’s picture

Assigned: Gaelan » Unassigned

it's been a while. I think ok to unassign.
@Gaelan post to get back into it. :)

Gaelan’s picture

YesCT: That's fine. I should have done so earlier.

YesCT’s picture

Status: Needs work » Needs review
Issue tags: -Usability, -frontend, -D8MI, -language-config, -language-content, -medium, -SprintWeekend2013

#22: 1498880-lang-22.patch queued for re-testing.

dagmita’s picture

#30: 1498880-block-config-30.patch queued for re-testing.

Status: Needs review » Needs work
Issue tags: +Usability, +frontend, +D8MI, +language-config, +language-content, +medium, +SprintWeekend2013

The last submitted patch, 1498880-block-config-30.patch, failed testing.

jair’s picture

Issue tags: +Needs reroll

Needs reroll

Karmen’s picture

Status: Needs work » Needs review
FileSize
3.35 KB
FAILED: [[SimpleTest]]: [MySQL] 58,313 pass(es), 24 fail(s), and 267 exception(s). View

Rerolled #30 and run test.

Karmen’s picture

FileSize
3.35 KB
FAILED: [[SimpleTest]]: [MySQL] 58,338 pass(es), 24 fail(s), and 267 exception(s). View

Rerolled #30 and run test.

The last submitted patch, 1498880-block-config-41.patch, failed testing.

Anonymous’s picture

Issue summary: View changes

moved done to done list

Sutharsan’s picture

Issue summary: View changes
Status: Needs work » Needs review
Issue tags: -Needs reroll
FileSize
3.38 KB
PASSED: [[SimpleTest]]: [MySQL] 59,887 pass(es). View

Rerolled #44

dawehner’s picture

  1. +++ b/core/modules/language/lib/Drupal/language/Plugin/Block/LanguageBlock.php
    @@ -73,6 +81,29 @@ function access(AccountInterface $account) {
    +
    +  /**
    +   * Overrides \Drupal\block\BlockBase::blockSubmit().
    +   */
    

    This should be {@inheritdoc}

  2. +++ b/core/modules/language/lib/Drupal/language/Plugin/Block/LanguageBlock.php
    @@ -73,6 +81,29 @@ function access(AccountInterface $account) {
    +        'type' => t('JavaScript operations'),
    

    What about naming it "operations dropdown"? I had no idea what "Javascript operations" would be.

  3. +++ b/core/modules/language/lib/Drupal/language/Plugin/Block/LanguageBlock.php
    @@ -89,6 +119,17 @@ public function build() {
    +      // Attach some logic.
    

    This comment is kinda pointless

  4. +++ b/core/modules/language/lib/Drupal/language/Tests/LanguageSwitchingTest.php
    @@ -69,7 +69,7 @@ function testLanguageBlock() {
    +    foreach ($language_switcher_item as $link) {
    
    +++ b/core/modules/language/lib/Drupal/language/Plugin/Block/LanguageBlock.php
    @@ -89,6 +119,17 @@ public function build() {
    diff --git a/core/modules/language/lib/Drupal/language/Tests/LanguageSwitchingTest.php b/core/modules/language/lib/Drupal/language/Tests/LanguageSwitchingTest.php
    
    diff --git a/core/modules/language/lib/Drupal/language/Tests/LanguageSwitchingTest.php b/core/modules/language/lib/Drupal/language/Tests/LanguageSwitchingTest.php
    index 4613f43..1676f28 100644
    
    index 4613f43..1676f28 100644
    --- a/core/modules/language/lib/Drupal/language/Tests/LanguageSwitchingTest.php
    
    --- a/core/modules/language/lib/Drupal/language/Tests/LanguageSwitchingTest.php
    +++ b/core/modules/language/lib/Drupal/language/Tests/LanguageSwitchingTest.php
    
    +++ b/core/modules/language/lib/Drupal/language/Tests/LanguageSwitchingTest.php
    +++ b/core/modules/language/lib/Drupal/language/Tests/LanguageSwitchingTest.php
    @@ -60,7 +60,7 @@ function testLanguageBlock() {
    
    @@ -60,7 +60,7 @@ function testLanguageBlock() {
         $this->assertText($block->label(), 'Language switcher block found.');
     
         // Assert that only the current language is marked as active.
    -    list($language_switcher) = $this->xpath('//div[@id=:id]/div[contains(@class, "content")]', array(':id' => 'block-test-language-block'));
    +    $language_switcher_item = $this->xpath('//div[@id=:id]//li', array(':id' => 'block-test-language-block'));
         $links = array(
           'active' => array(),
           'inactive' => array(),
    @@ -69,7 +69,7 @@ function testLanguageBlock() {
    
    @@ -69,7 +69,7 @@ function testLanguageBlock() {
           'active' => array(),
           'inactive' => array(),
         );
    -    foreach ($language_switcher->ul->li as $link) {
    

    Should we also add some test coverage that the operations are rendered properly?

MacMladen’s picture

Assigned: Unassigned » MacMladen

I'll take on this

emma.maria’s picture

Status: Needs review » Needs work

Actions in #45 still needs to be completed, setting to Needs work and unassigning as no movement in 4 months.

emma.maria’s picture

Assigned: MacMladen » Unassigned
plach’s picture

lauriii’s picture

Assigned: Unassigned » lauriii
lauriii’s picture

Assigned: lauriii » Unassigned
Status: Needs work » Needs review
FileSize
4.75 KB
PASSED: [[SimpleTest]]: [PHP 5.4 MySQL] 72,976 pass(es). View
2.6 KB
FAILED: [[SimpleTest]]: [PHP 5.4 MySQL] 72,849 pass(es), 1 fail(s), and 0 exception(s). View

Status: Needs review » Needs work

The last submitted patch, 51: 1498880-block-config-51-test.patch, failed testing.

lauriii’s picture

Status: Needs work » Needs review
FileSize
4.75 KB
PASSED: [[SimpleTest]]: [PHP 5.4 MySQL] 72,749 pass(es). View
YesCT’s picture

FileSize
4.74 KB
PASSED: [[SimpleTest]]: [PHP 5.4 MySQL] 72,871 pass(es). View
1.6 KB

I read all the lines of the patch. Looks good to me.
===
just a little clean up in the test:
removing double ..

using third person verb for function one line summary
"summary lines must start with a third person singular present tense verb, and they must explain what the function does. Example: "Calculates the maximum weight for a list." https://www.drupal.org/node/1354#functions

taking out an unused var ($block return value)

taking out a trailing whitespace

attaching interdiff (For instructions on creating an interdiff, see https://drupal.org/documentation/git/interdiff | Microbranching workflow: http://xjm.drupalgardens.com/blog/interdiffs-how-make-them-and-why-they-... )

YesCT’s picture

Issue summary: View changes
Status: Needs review » Needs work
FileSize
239.77 KB
108.67 KB
30.28 KB
712.4 KB

manually tested.

Bartik

note #890362: Links should not be indicated by color only
and maybe #2271341: Drop button anchors easily broken by common theme styles
so that is not the problem of this issue.

Seven

==========

Needs work
a) for the super long select, (note this is both in bartik and seven) I think the width should just be the width of the longest language.

b) and also for #29: needs to show the current language, not always just the first one in the list (English)

#32 said

seriously needs more styling work as now the language switcher has no margins and looks sloppy on most seven pages.

But without a screenshot of that at the time, I'm not sure what it exactly might have needed done.

lauriii’s picture

Reason for current language not going to first position is as far as I know that operation form element doesn't support #default_value parameter. We could rearrange the array somehow by hand to get the current language as first. I attached patch for an example.

YesCT’s picture

Status: Needs work » Needs review
FileSize
232.27 KB
136.08 KB
190.02 KB
61.05 KB
190.02 KB
5.18 KB
PASSED: [[SimpleTest]]: [PHP 5.4 MySQL] 73,148 pass(es). View
936 bytes

reordering to put the current one first (in the operations like drop down) did work. but we should maybe only get the current language if we need to know it, so I put it inside the if.
----------

are we re-using the same input field as is used for other operations?
Our's is pushing down the stuff below it when opened, and other operations (like on the manage fields), go over other things, and do not push them down. See video: http://screencast.com/t/CdqUBaCKHnm4 (and outs is taking up the entire available width)

closed:

open (pushes stuff down)

a different operations input field that does not push stuff down, and instead overlays the next things is on the manage fields tab for node types.

This made me wonder how the languages are ordered anyway?
How should they be ordered?
Eventually, we want to show them in their localized/translated name, so Spanish would say Espanol (no matter what language the page was in). So... what order should they be? Because Alphabetical doesn't really make sense if each language name is in it's own language. I thought maybe they would be int he order they are ordered on the language config page, but they are not.

...
Anyway, other issues like #2239399: Languages should be sorted by label instead of title are having trouble with ordering languages. So let's just make the current language the one shown in the drop down (the default value or the first value), and more than that, we will not touch the ordering here.

YesCT’s picture

Status: Needs review » Needs work

back to needs work for the width of the drop-down

LewisNyman’s picture

Sorry to bring this up now, I don't think the dropbutton is the correct element to use in this situation. The primary action in a dropbutton, the one that always shown, should do something. See 'edit' in the language listing table. What would the primary action do with the current implementation? I don't think it would do anything.

A more appropriate element would be a select element, the value that's always shown there is the default/current value, reading over the issue that is actually what Bojhan originally suggested

Dropbuttons and select elements do look similar, but they behave differently and have different use cases.

yoroy’s picture

Version: 8.0.x-dev » 8.2.x-dev

Version: 8.2.x-dev » 8.3.x-dev

Drupal 8.2.0-beta1 was released on August 3, 2016, which means new developments and disruptive changes should now be targeted against the 8.3.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.3.x-dev » 8.4.x-dev

Drupal 8.3.0-alpha1 will be released the week of January 30, 2017, which means new developments and disruptive changes should now be targeted against the 8.4.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.