Browse Source

Merge branch 'master' into t/ckeditor5-media-embed/35

Aleksander Nowodzinski 7 years ago
parent
commit
f16a68bb50
59 changed files with 710 additions and 37 deletions
  1. 3 0
      packages/ckeditor5-ui/.travis.yml
  2. 16 0
      packages/ckeditor5-ui/CHANGELOG.md
  3. 1 1
      packages/ckeditor5-ui/CONTRIBUTING.md
  4. 2 1
      packages/ckeditor5-ui/lang/contexts.json
  5. 18 0
      packages/ckeditor5-ui/lang/translations/ar.po
  6. 4 0
      packages/ckeditor5-ui/lang/translations/ast.po
  7. 4 0
      packages/ckeditor5-ui/lang/translations/cs.po
  8. 4 0
      packages/ckeditor5-ui/lang/translations/da.po
  9. 18 0
      packages/ckeditor5-ui/lang/translations/de-ch.po
  10. 4 0
      packages/ckeditor5-ui/lang/translations/de.po
  11. 4 0
      packages/ckeditor5-ui/lang/translations/el.po
  12. 4 0
      packages/ckeditor5-ui/lang/translations/en-au.po
  13. 4 0
      packages/ckeditor5-ui/lang/translations/en.po
  14. 4 0
      packages/ckeditor5-ui/lang/translations/eo.po
  15. 4 0
      packages/ckeditor5-ui/lang/translations/es.po
  16. 4 0
      packages/ckeditor5-ui/lang/translations/et.po
  17. 4 0
      packages/ckeditor5-ui/lang/translations/eu.po
  18. 4 0
      packages/ckeditor5-ui/lang/translations/fa.po
  19. 4 0
      packages/ckeditor5-ui/lang/translations/fi.po
  20. 4 0
      packages/ckeditor5-ui/lang/translations/fr.po
  21. 4 0
      packages/ckeditor5-ui/lang/translations/gl.po
  22. 18 0
      packages/ckeditor5-ui/lang/translations/he.po
  23. 4 0
      packages/ckeditor5-ui/lang/translations/hr.po
  24. 4 0
      packages/ckeditor5-ui/lang/translations/hu.po
  25. 4 0
      packages/ckeditor5-ui/lang/translations/it.po
  26. 4 0
      packages/ckeditor5-ui/lang/translations/ja.po
  27. 4 0
      packages/ckeditor5-ui/lang/translations/km.po
  28. 4 0
      packages/ckeditor5-ui/lang/translations/kn.po
  29. 4 0
      packages/ckeditor5-ui/lang/translations/ku.po
  30. 4 0
      packages/ckeditor5-ui/lang/translations/nb.po
  31. 18 0
      packages/ckeditor5-ui/lang/translations/ne.po
  32. 4 0
      packages/ckeditor5-ui/lang/translations/nl.po
  33. 18 0
      packages/ckeditor5-ui/lang/translations/no.po
  34. 18 0
      packages/ckeditor5-ui/lang/translations/pl.po
  35. 4 0
      packages/ckeditor5-ui/lang/translations/pt-br.po
  36. 4 0
      packages/ckeditor5-ui/lang/translations/pt.po
  37. 4 0
      packages/ckeditor5-ui/lang/translations/ro.po
  38. 4 0
      packages/ckeditor5-ui/lang/translations/ru.po
  39. 4 0
      packages/ckeditor5-ui/lang/translations/sk.po
  40. 4 0
      packages/ckeditor5-ui/lang/translations/sq.po
  41. 4 0
      packages/ckeditor5-ui/lang/translations/sv.po
  42. 4 0
      packages/ckeditor5-ui/lang/translations/tr.po
  43. 4 0
      packages/ckeditor5-ui/lang/translations/ug.po
  44. 4 0
      packages/ckeditor5-ui/lang/translations/uk.po
  45. 4 0
      packages/ckeditor5-ui/lang/translations/zh-cn.po
  46. 4 0
      packages/ckeditor5-ui/lang/translations/zh.po
  47. 21 21
      packages/ckeditor5-ui/package.json
  48. 13 0
      packages/ckeditor5-ui/src/dropdown/dropdownpanelview.js
  49. 135 0
      packages/ckeditor5-ui/src/dropdown/dropdownview.js
  50. 13 4
      packages/ckeditor5-ui/src/dropdown/utils.js
  51. 2 1
      packages/ckeditor5-ui/src/toolbar/block/blocktoolbar.js
  52. 8 0
      packages/ckeditor5-ui/tests/dropdown/dropdownpanelview.js
  53. 132 3
      packages/ckeditor5-ui/tests/dropdown/dropdownview.js
  54. 8 4
      packages/ckeditor5-ui/tests/dropdown/manual/dropdown.js
  55. 28 0
      packages/ckeditor5-ui/tests/dropdown/manual/panelposition.html
  56. 49 0
      packages/ckeditor5-ui/tests/dropdown/manual/panelposition.js
  57. 5 0
      packages/ckeditor5-ui/tests/dropdown/manual/panelposition.md
  58. 2 0
      packages/ckeditor5-ui/tests/toolbar/block/blocktoolbar.js
  59. 20 2
      packages/ckeditor5-ui/theme/components/dropdown/dropdown.css

+ 3 - 0
packages/ckeditor5-ui/.travis.yml

@@ -12,6 +12,9 @@ node_js:
 - '8'
 cache:
 - node_modules
+branches:
+   except:
+   - stable
 before_install:
 - export DISPLAY=:99.0
 - sh -e /etc/init.d/xvfb start

+ 16 - 0
packages/ckeditor5-ui/CHANGELOG.md

@@ -1,6 +1,22 @@
 Changelog
 =========
 
+## [11.1.0](https://github.com/ckeditor/ckeditor5-ui/compare/v11.0.0...v11.1.0) (2018-10-08)
+
+### Features
+
+* Allowed displaying an error message next to the `LabeledInputVIew` (see [ckeditor/ckeditor5-media-embed#1](https://github.com/ckeditor/ckeditor5-media-embed/issues/1)). ([81aaea4](https://github.com/ckeditor/ckeditor5-ui/commit/81aaea4))
+
+### Bug fixes
+
+* Made the `Edit block` string translatable. Closes [#445](https://github.com/ckeditor/ckeditor5-ui/issues/445). ([1fa84e9](https://github.com/ckeditor/ckeditor5-ui/commit/1fa84e9))
+
+### Other changes
+
+* Updated translations. ([baff3c9](https://github.com/ckeditor/ckeditor5-ui/commit/baff3c9))
+* Updated translations. ([e58bcbb](https://github.com/ckeditor/ckeditor5-ui/commit/e58bcbb))
+
+
 ## [11.0.0](https://github.com/ckeditor/ckeditor5-ui/compare/v10.1.0...v11.0.0) (2018-07-18)
 
 ### Features

+ 1 - 1
packages/ckeditor5-ui/CONTRIBUTING.md

@@ -1,4 +1,4 @@
 Contributing
 ========================================
 
-Information about contributing can be found at the following page: <https://github.com/ckeditor/ckeditor5/blob/master/CONTRIBUTING.md>.
+See the [official contributors' guide to CKEditor 5](https://ckeditor.com/docs/ckeditor5/latest/framework/guides/contributing/contributing.html) to learn more.

+ 2 - 1
packages/ckeditor5-ui/lang/contexts.json

@@ -1,4 +1,5 @@
 {
 	"Rich Text Editor, %0": "Title of the CKEditor5 editor.",
-	"Rich Text Editor": "Title of the CKEditor5 editor."
+	"Rich Text Editor": "Title of the CKEditor5 editor.",
+	"Edit block": "Label of the block toolbar icon (a block toolbar is displayed next to each paragraph, heading, list item, etc. and contains e.g. block formatting options)"
 }

+ 18 - 0
packages/ckeditor5-ui/lang/translations/ar.po

@@ -0,0 +1,18 @@
+# Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+msgid ""
+msgstr ""
+"Language-Team: Arabic (https://www.transifex.com/ckeditor/teams/11143/ar/)\n"
+"Language: ar\n"
+"Plural-Forms: nplurals=6; plural=n==0 ? 0 : n==1 ? 1 : n==2 ? 2 : n%100>=3 && n%100<=10 ? 3 : n%100>=11 && n%100<=99 ? 4 : 5;\n"
+
+msgctxt "Title of the CKEditor5 editor."
+msgid "Rich Text Editor, %0"
+msgstr "معالج نصوص، 0%"
+
+msgctxt "Title of the CKEditor5 editor."
+msgid "Rich Text Editor"
+msgstr "معالج نصوص"
+
+msgctxt "Label of the block toolbar icon (a block toolbar is displayed next to each paragraph, heading, list item, etc. and contains e.g. block formatting options)"
+msgid "Edit block"
+msgstr ""

+ 4 - 0
packages/ckeditor5-ui/lang/translations/ast.po

@@ -12,3 +12,7 @@ msgstr "Editor de testu arriquecíu, %0"
 msgctxt "Title of the CKEditor5 editor."
 msgid "Rich Text Editor"
 msgstr "Editor de testu arriquecíu"
+
+msgctxt "Label of the block toolbar icon (a block toolbar is displayed next to each paragraph, heading, list item, etc. and contains e.g. block formatting options)"
+msgid "Edit block"
+msgstr ""

+ 4 - 0
packages/ckeditor5-ui/lang/translations/cs.po

@@ -12,3 +12,7 @@ msgstr "Textový editor, %0"
 msgctxt "Title of the CKEditor5 editor."
 msgid "Rich Text Editor"
 msgstr "Textový editor"
+
+msgctxt "Label of the block toolbar icon (a block toolbar is displayed next to each paragraph, heading, list item, etc. and contains e.g. block formatting options)"
+msgid "Edit block"
+msgstr ""

+ 4 - 0
packages/ckeditor5-ui/lang/translations/da.po

@@ -12,3 +12,7 @@ msgstr "Wysiwyg editor, %0"
 msgctxt "Title of the CKEditor5 editor."
 msgid "Rich Text Editor"
 msgstr "Wysiwyg editor"
+
+msgctxt "Label of the block toolbar icon (a block toolbar is displayed next to each paragraph, heading, list item, etc. and contains e.g. block formatting options)"
+msgid "Edit block"
+msgstr ""

+ 18 - 0
packages/ckeditor5-ui/lang/translations/de-ch.po

@@ -0,0 +1,18 @@
+# Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+msgid ""
+msgstr ""
+"Language-Team: German (Switzerland) (https://www.transifex.com/ckeditor/teams/11143/de_CH/)\n"
+"Language: de_CH\n"
+"Plural-Forms: nplurals=2; plural=(n != 1);\n"
+
+msgctxt "Title of the CKEditor5 editor."
+msgid "Rich Text Editor, %0"
+msgstr "Rich-Text-Editor, %0"
+
+msgctxt "Title of the CKEditor5 editor."
+msgid "Rich Text Editor"
+msgstr "Rich-Text-Edito"
+
+msgctxt "Label of the block toolbar icon (a block toolbar is displayed next to each paragraph, heading, list item, etc. and contains e.g. block formatting options)"
+msgid "Edit block"
+msgstr ""

+ 4 - 0
packages/ckeditor5-ui/lang/translations/de.po

@@ -12,3 +12,7 @@ msgstr "Rich-Text-Editor, %0"
 msgctxt "Title of the CKEditor5 editor."
 msgid "Rich Text Editor"
 msgstr "Rich Text Editor"
+
+msgctxt "Label of the block toolbar icon (a block toolbar is displayed next to each paragraph, heading, list item, etc. and contains e.g. block formatting options)"
+msgid "Edit block"
+msgstr "Absatz bearbeiten"

+ 4 - 0
packages/ckeditor5-ui/lang/translations/el.po

@@ -12,3 +12,7 @@ msgstr "Επεξεργαστής Πλούσιου Κειμένου, 0%"
 msgctxt "Title of the CKEditor5 editor."
 msgid "Rich Text Editor"
 msgstr "Επεξεργαστής Πλούσιου Κειμένου"
+
+msgctxt "Label of the block toolbar icon (a block toolbar is displayed next to each paragraph, heading, list item, etc. and contains e.g. block formatting options)"
+msgid "Edit block"
+msgstr ""

+ 4 - 0
packages/ckeditor5-ui/lang/translations/en-au.po

@@ -12,3 +12,7 @@ msgstr "Rich Text Editor, %0"
 msgctxt "Title of the CKEditor5 editor."
 msgid "Rich Text Editor"
 msgstr "Rich Text Editor"
+
+msgctxt "Label of the block toolbar icon (a block toolbar is displayed next to each paragraph, heading, list item, etc. and contains e.g. block formatting options)"
+msgid "Edit block"
+msgstr ""

+ 4 - 0
packages/ckeditor5-ui/lang/translations/en.po

@@ -12,3 +12,7 @@ msgstr "Rich Text Editor, %0"
 msgctxt "Title of the CKEditor5 editor."
 msgid "Rich Text Editor"
 msgstr "Rich Text Editor"
+
+msgctxt "Label of the block toolbar icon (a block toolbar is displayed next to each paragraph, heading, list item, etc. and contains e.g. block formatting options)"
+msgid "Edit block"
+msgstr "Edit block"

+ 4 - 0
packages/ckeditor5-ui/lang/translations/eo.po

@@ -12,3 +12,7 @@ msgstr "Redaktilo de Riĉa Teksto, %0"
 msgctxt "Title of the CKEditor5 editor."
 msgid "Rich Text Editor"
 msgstr "Redaktilo de Riĉa Teksto"
+
+msgctxt "Label of the block toolbar icon (a block toolbar is displayed next to each paragraph, heading, list item, etc. and contains e.g. block formatting options)"
+msgid "Edit block"
+msgstr ""

+ 4 - 0
packages/ckeditor5-ui/lang/translations/es.po

@@ -12,3 +12,7 @@ msgstr "Editor de Texto Enriquecido, %0"
 msgctxt "Title of the CKEditor5 editor."
 msgid "Rich Text Editor"
 msgstr "Editor de Texto Enriquecido"
+
+msgctxt "Label of the block toolbar icon (a block toolbar is displayed next to each paragraph, heading, list item, etc. and contains e.g. block formatting options)"
+msgid "Edit block"
+msgstr ""

+ 4 - 0
packages/ckeditor5-ui/lang/translations/et.po

@@ -12,3 +12,7 @@ msgstr "Tekstiredaktor, %0"
 msgctxt "Title of the CKEditor5 editor."
 msgid "Rich Text Editor"
 msgstr "Tekstiredaktor"
+
+msgctxt "Label of the block toolbar icon (a block toolbar is displayed next to each paragraph, heading, list item, etc. and contains e.g. block formatting options)"
+msgid "Edit block"
+msgstr ""

+ 4 - 0
packages/ckeditor5-ui/lang/translations/eu.po

@@ -12,3 +12,7 @@ msgstr "Testu aberastuaren editorea, %0"
 msgctxt "Title of the CKEditor5 editor."
 msgid "Rich Text Editor"
 msgstr "Testu aberastuaren editorea"
+
+msgctxt "Label of the block toolbar icon (a block toolbar is displayed next to each paragraph, heading, list item, etc. and contains e.g. block formatting options)"
+msgid "Edit block"
+msgstr ""

+ 4 - 0
packages/ckeditor5-ui/lang/translations/fa.po

@@ -12,3 +12,7 @@ msgstr "ویرایشگر متن غنی، %0"
 msgctxt "Title of the CKEditor5 editor."
 msgid "Rich Text Editor"
 msgstr "ویرایشگر متن غنی"
+
+msgctxt "Label of the block toolbar icon (a block toolbar is displayed next to each paragraph, heading, list item, etc. and contains e.g. block formatting options)"
+msgid "Edit block"
+msgstr ""

+ 4 - 0
packages/ckeditor5-ui/lang/translations/fi.po

@@ -12,3 +12,7 @@ msgstr "Rikas tekstieditori, %0"
 msgctxt "Title of the CKEditor5 editor."
 msgid "Rich Text Editor"
 msgstr "Rikas tekstieditori"
+
+msgctxt "Label of the block toolbar icon (a block toolbar is displayed next to each paragraph, heading, list item, etc. and contains e.g. block formatting options)"
+msgid "Edit block"
+msgstr ""

+ 4 - 0
packages/ckeditor5-ui/lang/translations/fr.po

@@ -12,3 +12,7 @@ msgstr "Éditeur de texte enrichi, %0"
 msgctxt "Title of the CKEditor5 editor."
 msgid "Rich Text Editor"
 msgstr "Éditeur de texte enrichi"
+
+msgctxt "Label of the block toolbar icon (a block toolbar is displayed next to each paragraph, heading, list item, etc. and contains e.g. block formatting options)"
+msgid "Edit block"
+msgstr ""

+ 4 - 0
packages/ckeditor5-ui/lang/translations/gl.po

@@ -12,3 +12,7 @@ msgstr "Editor de texto mellorado, %0"
 msgctxt "Title of the CKEditor5 editor."
 msgid "Rich Text Editor"
 msgstr "Editor de texto mellorado"
+
+msgctxt "Label of the block toolbar icon (a block toolbar is displayed next to each paragraph, heading, list item, etc. and contains e.g. block formatting options)"
+msgid "Edit block"
+msgstr ""

+ 18 - 0
packages/ckeditor5-ui/lang/translations/he.po

@@ -0,0 +1,18 @@
+# Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+msgid ""
+msgstr ""
+"Language-Team: Hebrew (https://www.transifex.com/ckeditor/teams/11143/he/)\n"
+"Language: he\n"
+"Plural-Forms: nplurals=4; plural=(n == 1 && n % 1 == 0) ? 0 : (n == 2 && n % 1 == 0) ? 1: (n % 10 == 0 && n % 1 == 0 && n > 10) ? 2 : 3;\n"
+
+msgctxt "Title of the CKEditor5 editor."
+msgid "Rich Text Editor, %0"
+msgstr "עורך טקסט עשיר"
+
+msgctxt "Title of the CKEditor5 editor."
+msgid "Rich Text Editor"
+msgstr ""
+
+msgctxt "Label of the block toolbar icon (a block toolbar is displayed next to each paragraph, heading, list item, etc. and contains e.g. block formatting options)"
+msgid "Edit block"
+msgstr ""

+ 4 - 0
packages/ckeditor5-ui/lang/translations/hr.po

@@ -12,3 +12,7 @@ msgstr "Rich Text Editor, %0"
 msgctxt "Title of the CKEditor5 editor."
 msgid "Rich Text Editor"
 msgstr "Rich Text Editor"
+
+msgctxt "Label of the block toolbar icon (a block toolbar is displayed next to each paragraph, heading, list item, etc. and contains e.g. block formatting options)"
+msgid "Edit block"
+msgstr ""

+ 4 - 0
packages/ckeditor5-ui/lang/translations/hu.po

@@ -12,3 +12,7 @@ msgstr "Bővített szövegszerkesztő, %0"
 msgctxt "Title of the CKEditor5 editor."
 msgid "Rich Text Editor"
 msgstr "Bővített szövegszerkesztő"
+
+msgctxt "Label of the block toolbar icon (a block toolbar is displayed next to each paragraph, heading, list item, etc. and contains e.g. block formatting options)"
+msgid "Edit block"
+msgstr "Blokk szerkesztése"

+ 4 - 0
packages/ckeditor5-ui/lang/translations/it.po

@@ -12,3 +12,7 @@ msgstr "Editor di testo Rich Text, %0"
 msgctxt "Title of the CKEditor5 editor."
 msgid "Rich Text Editor"
 msgstr "Editor di testo Rich Text"
+
+msgctxt "Label of the block toolbar icon (a block toolbar is displayed next to each paragraph, heading, list item, etc. and contains e.g. block formatting options)"
+msgid "Edit block"
+msgstr ""

+ 4 - 0
packages/ckeditor5-ui/lang/translations/ja.po

@@ -12,3 +12,7 @@ msgstr "リッチテキストエディター, %0"
 msgctxt "Title of the CKEditor5 editor."
 msgid "Rich Text Editor"
 msgstr "リッチテキストエディター"
+
+msgctxt "Label of the block toolbar icon (a block toolbar is displayed next to each paragraph, heading, list item, etc. and contains e.g. block formatting options)"
+msgid "Edit block"
+msgstr ""

+ 4 - 0
packages/ckeditor5-ui/lang/translations/km.po

@@ -12,3 +12,7 @@ msgstr "កម្មវិធី​កែសម្រួល​អត្ថបទ
 msgctxt "Title of the CKEditor5 editor."
 msgid "Rich Text Editor"
 msgstr "កម្មវិធី​កែសម្រួល​អត្ថបទ​សម្បូរបែប"
+
+msgctxt "Label of the block toolbar icon (a block toolbar is displayed next to each paragraph, heading, list item, etc. and contains e.g. block formatting options)"
+msgid "Edit block"
+msgstr ""

+ 4 - 0
packages/ckeditor5-ui/lang/translations/kn.po

@@ -12,3 +12,7 @@ msgstr "‍ಸಮೃದ್ಧ ಪಠ್ಯ ಸಂಪಾದಕ‍, %0"
 msgctxt "Title of the CKEditor5 editor."
 msgid "Rich Text Editor"
 msgstr "‍ಸಮೃದ್ಧ ಪಠ್ಯ ಸಂಪಾದಕ‍‍"
+
+msgctxt "Label of the block toolbar icon (a block toolbar is displayed next to each paragraph, heading, list item, etc. and contains e.g. block formatting options)"
+msgid "Edit block"
+msgstr ""

+ 4 - 0
packages/ckeditor5-ui/lang/translations/ku.po

@@ -12,3 +12,7 @@ msgstr "سەرنوسەری دەقی بەپیت, %0"
 msgctxt "Title of the CKEditor5 editor."
 msgid "Rich Text Editor"
 msgstr "سەرنوسەری دەقی بەپیت"
+
+msgctxt "Label of the block toolbar icon (a block toolbar is displayed next to each paragraph, heading, list item, etc. and contains e.g. block formatting options)"
+msgid "Edit block"
+msgstr ""

+ 4 - 0
packages/ckeditor5-ui/lang/translations/nb.po

@@ -12,3 +12,7 @@ msgstr "Rikteksteditor, %0"
 msgctxt "Title of the CKEditor5 editor."
 msgid "Rich Text Editor"
 msgstr "Rikteksteditor"
+
+msgctxt "Label of the block toolbar icon (a block toolbar is displayed next to each paragraph, heading, list item, etc. and contains e.g. block formatting options)"
+msgid "Edit block"
+msgstr ""

+ 18 - 0
packages/ckeditor5-ui/lang/translations/ne.po

@@ -0,0 +1,18 @@
+# Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+msgid ""
+msgstr ""
+"Language-Team: Nepali (Nepal) (https://www.transifex.com/ckeditor/teams/11143/ne_NP/)\n"
+"Language: ne_NP\n"
+"Plural-Forms: nplurals=2; plural=(n != 1);\n"
+
+msgctxt "Title of the CKEditor5 editor."
+msgid "Rich Text Editor, %0"
+msgstr "धनी पाठ सम्पादक, %0"
+
+msgctxt "Title of the CKEditor5 editor."
+msgid "Rich Text Editor"
+msgstr "धनी पाठ सम्पादक"
+
+msgctxt "Label of the block toolbar icon (a block toolbar is displayed next to each paragraph, heading, list item, etc. and contains e.g. block formatting options)"
+msgid "Edit block"
+msgstr ""

+ 4 - 0
packages/ckeditor5-ui/lang/translations/nl.po

@@ -12,3 +12,7 @@ msgstr "Tekstbewerker, 0%"
 msgctxt "Title of the CKEditor5 editor."
 msgid "Rich Text Editor"
 msgstr "Tekstbewerker"
+
+msgctxt "Label of the block toolbar icon (a block toolbar is displayed next to each paragraph, heading, list item, etc. and contains e.g. block formatting options)"
+msgid "Edit block"
+msgstr ""

+ 18 - 0
packages/ckeditor5-ui/lang/translations/no.po

@@ -0,0 +1,18 @@
+# Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+msgid ""
+msgstr ""
+"Language-Team: Norwegian (https://www.transifex.com/ckeditor/teams/11143/no/)\n"
+"Language: no\n"
+"Plural-Forms: nplurals=2; plural=(n != 1);\n"
+
+msgctxt "Title of the CKEditor5 editor."
+msgid "Rich Text Editor, %0"
+msgstr "Tekstredigeringsverktøy for rik tekst, %0"
+
+msgctxt "Title of the CKEditor5 editor."
+msgid "Rich Text Editor"
+msgstr "Tekstredigeringsverktøy for rik tekst"
+
+msgctxt "Label of the block toolbar icon (a block toolbar is displayed next to each paragraph, heading, list item, etc. and contains e.g. block formatting options)"
+msgid "Edit block"
+msgstr ""

+ 18 - 0
packages/ckeditor5-ui/lang/translations/pl.po

@@ -0,0 +1,18 @@
+# Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+msgid ""
+msgstr ""
+"Language-Team: Polish (https://www.transifex.com/ckeditor/teams/11143/pl/)\n"
+"Language: pl\n"
+"Plural-Forms: nplurals=4; plural=(n==1 ? 0 : (n%10>=2 && n%10<=4) && (n%100<12 || n%100>14) ? 1 : n!=1 && (n%10>=0 && n%10<=1) || (n%10>=5 && n%10<=9) || (n%100>=12 && n%100<=14) ? 2 : 3);\n"
+
+msgctxt "Title of the CKEditor5 editor."
+msgid "Rich Text Editor, %0"
+msgstr "Edytor tekstu RTF, %0"
+
+msgctxt "Title of the CKEditor5 editor."
+msgid "Rich Text Editor"
+msgstr "Edytor tekstu RTF"
+
+msgctxt "Label of the block toolbar icon (a block toolbar is displayed next to each paragraph, heading, list item, etc. and contains e.g. block formatting options)"
+msgid "Edit block"
+msgstr ""

+ 4 - 0
packages/ckeditor5-ui/lang/translations/pt-br.po

@@ -12,3 +12,7 @@ msgstr "Editor de Formatação, %0"
 msgctxt "Title of the CKEditor5 editor."
 msgid "Rich Text Editor"
 msgstr "Editor de Formatação"
+
+msgctxt "Label of the block toolbar icon (a block toolbar is displayed next to each paragraph, heading, list item, etc. and contains e.g. block formatting options)"
+msgid "Edit block"
+msgstr ""

+ 4 - 0
packages/ckeditor5-ui/lang/translations/pt.po

@@ -12,3 +12,7 @@ msgstr "Editor de texto avançado, %0"
 msgctxt "Title of the CKEditor5 editor."
 msgid "Rich Text Editor"
 msgstr "Editor de texto avançado"
+
+msgctxt "Label of the block toolbar icon (a block toolbar is displayed next to each paragraph, heading, list item, etc. and contains e.g. block formatting options)"
+msgid "Edit block"
+msgstr ""

+ 4 - 0
packages/ckeditor5-ui/lang/translations/ro.po

@@ -12,3 +12,7 @@ msgstr "Editor de text îmbunătățit, %0"
 msgctxt "Title of the CKEditor5 editor."
 msgid "Rich Text Editor"
 msgstr "Editor de text îmbunătățit"
+
+msgctxt "Label of the block toolbar icon (a block toolbar is displayed next to each paragraph, heading, list item, etc. and contains e.g. block formatting options)"
+msgid "Edit block"
+msgstr ""

+ 4 - 0
packages/ckeditor5-ui/lang/translations/ru.po

@@ -12,3 +12,7 @@ msgstr "Редактор, %0"
 msgctxt "Title of the CKEditor5 editor."
 msgid "Rich Text Editor"
 msgstr "Редактор"
+
+msgctxt "Label of the block toolbar icon (a block toolbar is displayed next to each paragraph, heading, list item, etc. and contains e.g. block formatting options)"
+msgid "Edit block"
+msgstr ""

+ 4 - 0
packages/ckeditor5-ui/lang/translations/sk.po

@@ -12,3 +12,7 @@ msgstr "Editor s formátovaním, %0"
 msgctxt "Title of the CKEditor5 editor."
 msgid "Rich Text Editor"
 msgstr "Editor s formátovaním"
+
+msgctxt "Label of the block toolbar icon (a block toolbar is displayed next to each paragraph, heading, list item, etc. and contains e.g. block formatting options)"
+msgid "Edit block"
+msgstr ""

+ 4 - 0
packages/ckeditor5-ui/lang/translations/sq.po

@@ -12,3 +12,7 @@ msgstr "Redaktues i Tekstit të Pasur, %0"
 msgctxt "Title of the CKEditor5 editor."
 msgid "Rich Text Editor"
 msgstr "Redaktues i Tekstit të Pasur"
+
+msgctxt "Label of the block toolbar icon (a block toolbar is displayed next to each paragraph, heading, list item, etc. and contains e.g. block formatting options)"
+msgid "Edit block"
+msgstr ""

+ 4 - 0
packages/ckeditor5-ui/lang/translations/sv.po

@@ -12,3 +12,7 @@ msgstr "Rich Text-editor, %0"
 msgctxt "Title of the CKEditor5 editor."
 msgid "Rich Text Editor"
 msgstr "Rich Text-editor"
+
+msgctxt "Label of the block toolbar icon (a block toolbar is displayed next to each paragraph, heading, list item, etc. and contains e.g. block formatting options)"
+msgid "Edit block"
+msgstr ""

+ 4 - 0
packages/ckeditor5-ui/lang/translations/tr.po

@@ -12,3 +12,7 @@ msgstr "Zengin İçerik Editörü, %0"
 msgctxt "Title of the CKEditor5 editor."
 msgid "Rich Text Editor"
 msgstr "Zengin İçerik Editörü"
+
+msgctxt "Label of the block toolbar icon (a block toolbar is displayed next to each paragraph, heading, list item, etc. and contains e.g. block formatting options)"
+msgid "Edit block"
+msgstr ""

+ 4 - 0
packages/ckeditor5-ui/lang/translations/ug.po

@@ -12,3 +12,7 @@ msgstr "تېكىست تەھرىرلىگۈچ، 0%"
 msgctxt "Title of the CKEditor5 editor."
 msgid "Rich Text Editor"
 msgstr "تېكىست تەھرىرلىگۈچ"
+
+msgctxt "Label of the block toolbar icon (a block toolbar is displayed next to each paragraph, heading, list item, etc. and contains e.g. block formatting options)"
+msgid "Edit block"
+msgstr ""

+ 4 - 0
packages/ckeditor5-ui/lang/translations/uk.po

@@ -12,3 +12,7 @@ msgstr "Розширений текстовий редактор, %0"
 msgctxt "Title of the CKEditor5 editor."
 msgid "Rich Text Editor"
 msgstr "Розширений текстовий редактор"
+
+msgctxt "Label of the block toolbar icon (a block toolbar is displayed next to each paragraph, heading, list item, etc. and contains e.g. block formatting options)"
+msgid "Edit block"
+msgstr ""

+ 4 - 0
packages/ckeditor5-ui/lang/translations/zh-cn.po

@@ -12,3 +12,7 @@ msgstr "富文本编辑器, %0"
 msgctxt "Title of the CKEditor5 editor."
 msgid "Rich Text Editor"
 msgstr "富文本编辑器"
+
+msgctxt "Label of the block toolbar icon (a block toolbar is displayed next to each paragraph, heading, list item, etc. and contains e.g. block formatting options)"
+msgid "Edit block"
+msgstr ""

+ 4 - 0
packages/ckeditor5-ui/lang/translations/zh.po

@@ -12,3 +12,7 @@ msgstr "豐富文字編輯器,%0"
 msgctxt "Title of the CKEditor5 editor."
 msgid "Rich Text Editor"
 msgstr "豐富文字編輯器"
+
+msgctxt "Label of the block toolbar icon (a block toolbar is displayed next to each paragraph, heading, list item, etc. and contains e.g. block formatting options)"
+msgid "Edit block"
+msgstr ""

+ 21 - 21
packages/ckeditor5-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-ui",
-  "version": "11.0.0",
+  "version": "11.1.0",
   "description": "The UI framework and standard UI library of CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -9,29 +9,29 @@
     "ckeditor5-lib"
   ],
   "dependencies": {
-    "@ckeditor/ckeditor5-core": "^11.0.0",
-    "@ckeditor/ckeditor5-theme-lark": "^11.0.0",
-    "@ckeditor/ckeditor5-utils": "^10.2.0",
+    "@ckeditor/ckeditor5-core": "^11.0.1",
+    "@ckeditor/ckeditor5-theme-lark": "^11.1.0",
+    "@ckeditor/ckeditor5-utils": "^11.0.0",
     "lodash-es": "^4.17.10"
   },
   "devDependencies": {
-    "@ckeditor/ckeditor5-basic-styles": "^10.0.2",
-    "@ckeditor/ckeditor5-block-quote": "^10.0.2",
-    "@ckeditor/ckeditor5-build-balloon": "^11.0.0",
-    "@ckeditor/ckeditor5-cloud-services": "^10.0.2",
-    "@ckeditor/ckeditor5-editor-balloon": "^11.0.0",
-    "@ckeditor/ckeditor5-editor-classic": "^11.0.0",
-    "@ckeditor/ckeditor5-engine": "^10.2.0",
-    "@ckeditor/ckeditor5-enter": "^10.1.1",
-    "@ckeditor/ckeditor5-easy-image": "^10.0.2",
-    "@ckeditor/ckeditor5-essentials": "^10.1.1",
-    "@ckeditor/ckeditor5-heading": "^10.0.2",
-    "@ckeditor/ckeditor5-image": "^10.2.0",
-    "@ckeditor/ckeditor5-link": "^10.0.3",
-    "@ckeditor/ckeditor5-list": "^11.0.1",
-    "@ckeditor/ckeditor5-paragraph": "^10.0.2",
-    "@ckeditor/ckeditor5-typing": "^11.0.0",
-    "@ckeditor/ckeditor5-undo": "^10.0.2",
+    "@ckeditor/ckeditor5-basic-styles": "^10.0.3",
+    "@ckeditor/ckeditor5-block-quote": "^10.1.0",
+    "@ckeditor/ckeditor5-build-balloon": "^11.1.0",
+    "@ckeditor/ckeditor5-cloud-services": "^10.1.0",
+    "@ckeditor/ckeditor5-editor-balloon": "^11.0.1",
+    "@ckeditor/ckeditor5-editor-classic": "^11.0.1",
+    "@ckeditor/ckeditor5-engine": "^11.0.0",
+    "@ckeditor/ckeditor5-enter": "^10.1.2",
+    "@ckeditor/ckeditor5-easy-image": "^10.0.3",
+    "@ckeditor/ckeditor5-essentials": "^10.1.2",
+    "@ckeditor/ckeditor5-heading": "^10.1.0",
+    "@ckeditor/ckeditor5-image": "^11.0.0",
+    "@ckeditor/ckeditor5-link": "^10.0.4",
+    "@ckeditor/ckeditor5-list": "^11.0.2",
+    "@ckeditor/ckeditor5-paragraph": "^10.0.3",
+    "@ckeditor/ckeditor5-typing": "^11.0.1",
+    "@ckeditor/ckeditor5-undo": "^10.0.3",
     "del": "^2.2.0",
     "eslint": "^5.5.0",
     "eslint-config-ckeditor5": "^1.0.7",

+ 13 - 0
packages/ckeditor5-ui/src/dropdown/dropdownpanelview.js

@@ -34,6 +34,18 @@ export default class DropdownPanelView extends View {
 		this.set( 'isVisible', false );
 
 		/**
+		 * The position of the panel, relative to the parent.
+		 *
+		 * This property is reflected in the CSS class set to {@link #element} that controls
+		 * the position of the panel.
+		 *
+		 * @observable
+		 * @default 'se'
+		 * @member {'se'|'sw'|'ne'|'nw'} #position
+		 */
+		this.set( 'position', 'se' );
+
+		/**
 		 * Collection of the child views in this panel.
 		 *
 		 * A common child type is the {@link module:ui/list/listview~ListView} and {@link module:ui/toolbar/toolbarview~ToolbarView}.
@@ -53,6 +65,7 @@ export default class DropdownPanelView extends View {
 					'ck',
 					'ck-reset',
 					'ck-dropdown__panel',
+					bind.to( 'position', value => `ck-dropdown__panel_${ value }` ),
 					bind.if( 'isVisible', 'ck-dropdown__panel-visible' )
 				]
 			},

+ 135 - 0
packages/ckeditor5-ui/src/dropdown/dropdownview.js

@@ -13,6 +13,8 @@ import KeystrokeHandler from '@ckeditor/ckeditor5-utils/src/keystrokehandler';
 
 import '../../theme/components/dropdown/dropdown.css';
 
+import { getOptimalPosition } from '@ckeditor/ckeditor5-utils/src/dom/position';
+
 /**
  * The dropdown view class. It manages the dropdown button and dropdown panel.
  *
@@ -121,6 +123,31 @@ export default class DropdownView extends View {
 		this.set( 'isEnabled', true );
 
 		/**
+		 * (Optional) The additional CSS class set on the dropdown {@link #element}.
+		 *
+		 * @observable
+		 * @member {String} #class
+		 */
+		this.set( 'class' );
+
+		/**
+		 * The position of the panel, relative to the dropdown.
+		 *
+		 * **Note**: When `'auto'`, the panel will use one of the remaining positions to stay
+		 * in the viewport, visible to the user. The positions correspond directly to
+		 * {@link module:ui/dropdown/dropdownview~DropdownView.defaultPanelPositions default panel positions}.
+		 *
+		 * **Note**: This value has an impact on the
+		 * {@link module:ui/dropdown/dropdownpanelview~DropdownPanelView#position} property
+		 * each time the panel becomes {@link #isOpen open}.
+		 *
+		 * @observable
+		 * @default 'auto'
+		 * @member {'auto'|'se'|'sw'|'ne'|'nw'} #panelPosition
+		 */
+		this.set( 'panelPosition', 'auto' );
+
+		/**
 		 * Tracks information about DOM focus in the dropdown.
 		 *
 		 * @readonly
@@ -147,6 +174,7 @@ export default class DropdownView extends View {
 				class: [
 					'ck',
 					'ck-dropdown',
+					bind.to( 'class' ),
 					bind.if( 'isEnabled', 'ck-disabled', value => !value )
 				]
 			},
@@ -215,6 +243,34 @@ export default class DropdownView extends View {
 		// Toggle the visibility of the panel when the dropdown becomes open.
 		this.panelView.bind( 'isVisible' ).to( this, 'isOpen' );
 
+		// Let the dropdown control the position of the panel. The position must
+		// be updated every time the dropdown is open.
+		this.on( 'change:isOpen', () => {
+			if ( !this.isOpen ) {
+				return;
+			}
+
+			// If "auto", find the best position of the panel to fit into the viewport.
+			// Otherwise, simply assign the static position.
+			if ( this.panelPosition === 'auto' ) {
+				const defaultPanelPositions = DropdownView.defaultPanelPositions;
+
+				this.panelView.position = getOptimalPosition( {
+					element: this.panelView.element,
+					target: this.buttonView.element,
+					fitInViewport: true,
+					positions: [
+						defaultPanelPositions.southEast,
+						defaultPanelPositions.southWest,
+						defaultPanelPositions.northEast,
+						defaultPanelPositions.northWest
+					]
+				} ).name;
+			} else {
+				this.panelView.position = this.panelPosition;
+			}
+		} );
+
 		// Listen for keystrokes coming from within #element.
 		this.keystrokes.listenTo( this.element );
 
@@ -257,3 +313,82 @@ export default class DropdownView extends View {
 		this.buttonView.focus();
 	}
 }
+
+/**
+ * A set of positioning functions used by the dropdown view to determine
+ * the optimal position (i.e. fitting into the browser viewport) of its
+ * {@link module:ui/dropdown/dropdownview~DropdownView#panelView panel} when
+ * {@link module:ui/dropdown/dropdownview~DropdownView#panelPosition} is set to 'auto'`.
+ *
+ * The available positioning functions are as follow:
+ *
+ * **South**
+ *
+ * * `southEast`
+ *
+ *		[ Button ]
+ *		+-----------------+
+ *		|      Panel      |
+ *		+-----------------+
+ *
+ * * `southWest`
+ *
+ *		         [ Button ]
+ *		+-----------------+
+ *		|      Panel      |
+ *		+-----------------+
+ *
+ * **North**
+ *
+ * * `northEast`
+ *
+ *		+-----------------+
+ *		|      Panel      |
+ *		+-----------------+
+ *		[ Button ]
+ *
+ * * `northWest`
+ *
+ *		+-----------------+
+ *		|      Panel      |
+ *		+-----------------+
+ *		         [ Button ]
+ *
+ * Positioning functions are compatible with {@link module:utils/dom/position~Position}.
+ *
+ * The name that position function returns will be reflected in dropdown panel's class that
+ * controls its placement. See {@link module:ui/dropdown/dropdownview~DropdownView#panelPosition}
+ * to learn more.
+ *
+ * @member {Object} module:ui/dropdown/dropdownview~DropdownView.defaultPanelPositions
+ */
+DropdownView.defaultPanelPositions = {
+	southEast: buttonRect => {
+		return {
+			top: buttonRect.bottom,
+			left: buttonRect.left,
+			name: 'se'
+		};
+	},
+	southWest: ( buttonRect, panelRect ) => {
+		return {
+			top: buttonRect.bottom,
+			left: buttonRect.left - panelRect.width + buttonRect.width,
+			name: 'sw'
+		};
+	},
+	northEast: ( buttonRect, panelRect ) => {
+		return {
+			top: buttonRect.top - panelRect.height,
+			left: buttonRect.left,
+			name: 'ne'
+		};
+	},
+	northWest: ( buttonRect, panelRect ) => {
+		return {
+			top: buttonRect.bottom - panelRect.height,
+			left: buttonRect.left - panelRect.width + buttonRect.width,
+			name: 'nw'
+		};
+	}
+};

+ 13 - 4
packages/ckeditor5-ui/src/dropdown/utils.js

@@ -46,7 +46,7 @@ import '../../theme/components/dropdown/listdropdown.css';
  *		document.body.appendChild( dropdown.element );
  *
  * You can also provide other button views (they need to implement the
- * {module:ui/dropdown/button/dropdownbutton~DropdownButton} interface). For instance, you can use
+ * {@link module:ui/dropdown/button/dropdownbutton~DropdownButton} interface). For instance, you can use
  * {@link module:ui/dropdown/button/splitbuttonview~SplitButtonView} to create a dropdown with a split button.
  *
  *		const dropdown = createDropdown( model, SplitButtonView );
@@ -150,13 +150,22 @@ export function addToolbarToDropdown( dropdownView, buttons ) {
  *
  *		items.add( {
  *			type: 'button',
- *			model: new Model( { label: 'First item', labelStyle: 'color: red' } )
+ *			model: new Model( {
+ *				withText: true,
+ *				label: 'First item',
+ *				labelStyle: 'color: red'
+ *			} )
  *		} );
  *
  *		items.add( {
  *			 type: 'button',
- *			 model: new Model( { label: 'Second item', labelStyle: 'color: green', class: 'foo' } )
- * 		} );
+ *			 model: new Model( {
+ *				withText: true,
+ *				label: 'Second item',
+ *				labelStyle: 'color: green',
+ *				class: 'foo'
+ *			} )
+ *		} );
  *
  *		const dropdown = createDropdown( locale );
  *

+ 2 - 1
packages/ckeditor5-ui/src/toolbar/block/blocktoolbar.js

@@ -208,10 +208,11 @@ export default class BlockToolbar extends Plugin {
 	 */
 	_createButtonView() {
 		const editor = this.editor;
+		const t = editor.t;
 		const buttonView = new BlockButtonView( editor.locale );
 
 		buttonView.set( {
-			label: editor.t( 'Edit block' ),
+			label: t( 'Edit block' ),
 			icon: iconPilcrow,
 			withText: false
 		} );

+ 8 - 0
packages/ckeditor5-ui/tests/dropdown/dropdownpanelview.js

@@ -50,6 +50,14 @@ describe( 'DropdownPanelView', () => {
 					view.isVisible = false;
 					expect( view.element.classList.contains( 'ck-dropdown__panel-visible' ) ).to.be.false;
 				} );
+
+				it( 'reacts on view#position', () => {
+					expect( view.element.classList.contains( 'ck-dropdown__panel_se' ) ).to.be.true;
+
+					view.position = 'nw';
+					expect( view.element.classList.contains( 'ck-dropdown__panel_se' ) ).to.be.false;
+					expect( view.element.classList.contains( 'ck-dropdown__panel_nw' ) ).to.be.true;
+				} );
 			} );
 
 			describe( 'listeners', () => {

+ 132 - 3
packages/ckeditor5-ui/tests/dropdown/dropdownview.js

@@ -9,10 +9,15 @@ import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
 import { keyCodes } from '@ckeditor/ckeditor5-utils/src/keyboard';
 import ButtonView from '../../src/button/buttonview';
 import DropdownPanelView from '../../src/dropdown/dropdownpanelview';
+import global from '@ckeditor/ckeditor5-utils/src/dom/global';
+import Rect from '@ckeditor/ckeditor5-utils/src/dom/rect';
+import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
 
 describe( 'DropdownView', () => {
 	let view, buttonView, panelView, locale;
 
+	testUtils.createSinonSandbox();
+
 	beforeEach( () => {
 		locale = { t() {} };
 
@@ -21,6 +26,15 @@ describe( 'DropdownView', () => {
 
 		view = new DropdownView( locale, buttonView, panelView );
 		view.render();
+
+		// The #panelView positioning depends on the utility that uses DOM Rects.
+		// To avoid an avalanche of warnings (DOM Rects do not work until
+		// the element is in DOM), let's allow the dropdown to render in DOM.
+		global.document.body.appendChild( view.element );
+	} );
+
+	afterEach( () => {
+		view.element.remove();
 	} );
 
 	describe( 'constructor()', () => {
@@ -44,6 +58,10 @@ describe( 'DropdownView', () => {
 			expect( view.isEnabled ).to.be.true;
 		} );
 
+		it( 'sets view#panelPosition "auto"', () => {
+			expect( view.panelPosition ).to.equal( 'auto' );
+		} );
+
 		it( 'creates #focusTracker instance', () => {
 			expect( view.focusTracker ).to.be.instanceOf( FocusTracker );
 		} );
@@ -97,15 +115,117 @@ describe( 'DropdownView', () => {
 				} );
 			} );
 
-			describe( 'DOM', () => {
-				describe( 'view#element .ck-disabled class to view#isEnabled', () => {
-					it( 'is activated', () => {
+			describe( 'view.panelView#position to view#panelPosition', () => {
+				it( 'does not update until the dropdown is opened', () => {
+					view.isOpen = false;
+					view.panelPosition = 'nw';
+
+					expect( panelView.position ).to.equal( 'se' );
+
+					view.isOpen = true;
+
+					expect( panelView.position ).to.equal( 'nw' );
+				} );
+
+				describe( 'in "auto" mode', () => {
+					beforeEach( () => {
+						// Bloat the panel a little to give the positioning algorithm something to
+						// work with. If the panel was empty, any smart positioning is pointless.
+						// Placing an empty element in the viewport isn't that hard, right?
+						panelView.element.style.width = '200px';
+						panelView.element.style.height = '200px';
+					} );
+
+					it( 'defaults to "south-east" when there is a plenty of space around', () => {
+						const windowRect = new Rect( global.window );
+
+						// "Put" the dropdown in the middle of the viewport.
+						stubElementClientRect( view.buttonView.element, {
+							top: windowRect.height / 2,
+							left: windowRect.width / 2,
+							width: 10,
+							height: 10
+						} );
+
+						view.isOpen = true;
+
+						expect( panelView.position ).to.equal( 'se' );
+					} );
+
+					it( 'when the dropdown in the north-west corner of the viewport', () => {
+						stubElementClientRect( view.buttonView.element, {
+							top: 0,
+							left: 0,
+							width: 100,
+							height: 10
+						} );
+
+						view.isOpen = true;
+
+						expect( panelView.position ).to.equal( 'se' );
+					} );
+
+					it( 'when the dropdown in the north-east corner of the viewport', () => {
+						const windowRect = new Rect( global.window );
+
+						stubElementClientRect( view.buttonView.element, {
+							top: 0,
+							left: windowRect.right - 100,
+							width: 100,
+							height: 10
+						} );
+
+						view.isOpen = true;
+
+						expect( panelView.position ).to.equal( 'sw' );
+					} );
+
+					it( 'when the dropdown in the south-west corner of the viewport', () => {
+						const windowRect = new Rect( global.window );
+
+						stubElementClientRect( view.buttonView.element, {
+							top: windowRect.bottom - 10,
+							left: 0,
+							width: 100,
+							height: 10
+						} );
+
+						view.isOpen = true;
+
+						expect( panelView.position ).to.equal( 'ne' );
+					} );
+
+					it( 'when the dropdown in the south-east corner of the viewport', () => {
+						const windowRect = new Rect( global.window );
+
+						stubElementClientRect( view.buttonView.element, {
+							top: windowRect.bottom - 10,
+							left: windowRect.right - 100,
+							width: 100,
+							height: 10
+						} );
+
+						view.isOpen = true;
+
+						expect( panelView.position ).to.equal( 'nw' );
+					} );
+				} );
+			} );
+
+			describe( 'DOM element bindings', () => {
+				describe( 'class', () => {
+					it( 'reacts on view#isEnabled', () => {
 						view.isEnabled = true;
 						expect( view.element.classList.contains( 'ck-disabled' ) ).to.be.false;
 
 						view.isEnabled = false;
 						expect( view.element.classList.contains( 'ck-disabled' ) ).to.be.true;
 					} );
+
+					it( 'reacts on view#class', () => {
+						view.class = 'custom-css-class';
+						expect( view.element.classList.contains( 'custom-css-class' ) ).to.be.true;
+					} );
 				} );
 			} );
 		} );
@@ -253,3 +373,12 @@ describe( 'DropdownView', () => {
 		} );
 	} );
 } );
+
+function stubElementClientRect( element, data ) {
+	const clientRect = Object.assign( {}, data );
+
+	clientRect.right = clientRect.left + clientRect.width;
+	clientRect.bottom = clientRect.top + clientRect.height;
+
+	testUtils.sinon.stub( element, 'getBoundingClientRect' ).returns( clientRect );
+}

+ 8 - 4
packages/ckeditor5-ui/tests/dropdown/manual/dropdown.js

@@ -45,10 +45,14 @@ function testList() {
 	const collection = new Collection( { idProperty: 'label' } );
 
 	[ '0.8em', '1em', '1.2em', '1.5em', '2.0em', '3.0em' ].forEach( font => {
-		collection.add( new Model( {
-			label: font,
-			style: `font-size: ${ font }`
-		} ) );
+		collection.add( {
+			type: 'button',
+			model: new Model( {
+				label: font,
+				labelStyle: `font-size: ${ font }`,
+				withText: true
+			} )
+		} );
 	} );
 
 	const dropdownView = createDropdown( {} );

+ 28 - 0
packages/ckeditor5-ui/tests/dropdown/manual/panelposition.html

@@ -0,0 +1,28 @@
+<style>
+	div[id^="dropdown-"].ck {
+		position: fixed;
+	}
+
+	#dropdown-nw {
+		top: 20px;
+	}
+
+	#dropdown-ne {
+		top: 20px;
+		right: 20px;
+	}
+
+	#dropdown-sw {
+		bottom: 20px;
+	}
+
+	#dropdown-se {
+		bottom: 20px;
+		right: 20px;
+	}
+</style>
+
+<div id="dropdown-nw" class="ck ck-reset_all"></div>
+<div id="dropdown-ne" class="ck ck-reset_all"></div>
+<div id="dropdown-se" class="ck ck-reset_all"></div>
+<div id="dropdown-sw" class="ck ck-reset_all"></div>

+ 49 - 0
packages/ckeditor5-ui/tests/dropdown/manual/panelposition.js

@@ -0,0 +1,49 @@
+/**
+ * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+import Model from '../../../src/model';
+import Collection from '@ckeditor/ckeditor5-utils/src/collection';
+import testUtils from '../../_utils/utils';
+import { createDropdown, addListToDropdown } from '../../../src/dropdown/utils';
+
+const ui = testUtils.createTestUIView( {
+	dropdownNW: '#dropdown-nw',
+	dropdownNE: '#dropdown-ne',
+	dropdownSE: '#dropdown-se',
+	dropdownSW: '#dropdown-sw'
+} );
+
+function createPositionedDropdown( position ) {
+	const collection = new Collection( { idProperty: 'label' } );
+
+	[
+		'long label of a first item of the list',
+		'long label of a second item of the list',
+		'long label of a third item of the list'
+	].forEach( label => {
+		collection.add( {
+			type: 'button',
+			model: new Model( { label, withText: true } )
+		} );
+	} );
+
+	const dropdownView = createDropdown( {} );
+
+	dropdownView.buttonView.set( {
+		label: `Dropdown ${ position }`,
+		isEnabled: true,
+		isOn: false,
+		withText: true
+	} );
+
+	addListToDropdown( dropdownView, collection );
+
+	ui[ `dropdown${ position }` ].add( dropdownView );
+}
+
+createPositionedDropdown( 'NW' );
+createPositionedDropdown( 'NE' );
+createPositionedDropdown( 'SW' );
+createPositionedDropdown( 'SE' );

+ 5 - 0
packages/ckeditor5-ui/tests/dropdown/manual/panelposition.md

@@ -0,0 +1,5 @@
+## Automatic position of the dropdown panel
+
+1. Open a dropdown located in the corner of the page.
+2. Check if the panel shows up fully visible in the viewport.
+3. Repeat for the rest of dropdowns. Panels should appear above, below, right and left to the button.

+ 2 - 0
packages/ckeditor5-ui/tests/toolbar/block/blocktoolbar.js

@@ -135,6 +135,8 @@ describe( 'BlockToolbar', () => {
 			} );
 
 			it( 'should hide the panel on toolbar blur', () => {
+				blockToolbar.toolbarView.focusTracker.isFocused = true;
+
 				blockToolbar.buttonView.fire( 'execute' );
 
 				expect( blockToolbar.panelView.isVisible ).to.be.true;

+ 20 - 2
packages/ckeditor5-ui/theme/components/dropdown/dropdown.css

@@ -34,8 +34,6 @@
 		z-index: var(--ck-z-modal);
 
 		position: absolute;
-		left: 0px;
-		transform: translate3d( 0, 100%, 0 );
 
 		&.ck-dropdown__panel-visible {
 			display: inline-block;
@@ -43,5 +41,25 @@
 			/* This will prevent blurry icons in dropdown on Firefox. See #340. */
 			will-change: transform;
 		}
+
+		&.ck-dropdown__panel_ne,
+		&.ck-dropdown__panel_nw {
+			bottom: 100%;
+		}
+
+		&.ck-dropdown__panel_se,
+		&.ck-dropdown__panel_sw {
+			transform: translate3d( 0, 100%, 0 );
+		}
+
+		&.ck-dropdown__panel_ne,
+		&.ck-dropdown__panel_se {
+			left: 0px;
+		}
+
+		&.ck-dropdown__panel_nw,
+		&.ck-dropdown__panel_sw {
+			right: 0px;
+		}
 	}
 }