8
0
Quellcode durchsuchen

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

Aleksander Nowodzinski vor 7 Jahren
Ursprung
Commit
f16a68bb50
59 geänderte Dateien mit 710 neuen und 37 gelöschten Zeilen
  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'
 - '8'
 cache:
 cache:
 - node_modules
 - node_modules
+branches:
+   except:
+   - stable
 before_install:
 before_install:
 - export DISPLAY=:99.0
 - export DISPLAY=:99.0
 - sh -e /etc/init.d/xvfb start
 - sh -e /etc/init.d/xvfb start

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

@@ -1,6 +1,22 @@
 Changelog
 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)
 ## [11.0.0](https://github.com/ckeditor/ckeditor5-ui/compare/v10.1.0...v11.0.0) (2018-07-18)
 
 
 ### Features
 ### Features

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

@@ -1,4 +1,4 @@
 Contributing
 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, %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."
 msgctxt "Title of the CKEditor5 editor."
 msgid "Rich Text Editor"
 msgid "Rich Text Editor"
 msgstr "Editor de testu arriquecíu"
 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."
 msgctxt "Title of the CKEditor5 editor."
 msgid "Rich Text Editor"
 msgid "Rich Text Editor"
 msgstr "Textový 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."
 msgctxt "Title of the CKEditor5 editor."
 msgid "Rich Text Editor"
 msgid "Rich Text Editor"
 msgstr "Wysiwyg 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."
 msgctxt "Title of the CKEditor5 editor."
 msgid "Rich Text Editor"
 msgid "Rich Text Editor"
 msgstr "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."
 msgctxt "Title of the CKEditor5 editor."
 msgid "Rich Text Editor"
 msgid "Rich Text Editor"
 msgstr "Επεξεργαστής Πλούσιου Κειμένου"
 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."
 msgctxt "Title of the CKEditor5 editor."
 msgid "Rich Text Editor"
 msgid "Rich Text Editor"
 msgstr "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."
 msgctxt "Title of the CKEditor5 editor."
 msgid "Rich Text Editor"
 msgid "Rich Text Editor"
 msgstr "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."
 msgctxt "Title of the CKEditor5 editor."
 msgid "Rich Text Editor"
 msgid "Rich Text Editor"
 msgstr "Redaktilo de Riĉa Teksto"
 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."
 msgctxt "Title of the CKEditor5 editor."
 msgid "Rich Text Editor"
 msgid "Rich Text Editor"
 msgstr "Editor de Texto Enriquecido"
 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."
 msgctxt "Title of the CKEditor5 editor."
 msgid "Rich Text Editor"
 msgid "Rich Text Editor"
 msgstr "Tekstiredaktor"
 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."
 msgctxt "Title of the CKEditor5 editor."
 msgid "Rich Text Editor"
 msgid "Rich Text Editor"
 msgstr "Testu aberastuaren editorea"
 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."
 msgctxt "Title of the CKEditor5 editor."
 msgid "Rich Text Editor"
 msgid "Rich Text Editor"
 msgstr "ویرایشگر متن غنی"
 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."
 msgctxt "Title of the CKEditor5 editor."
 msgid "Rich Text Editor"
 msgid "Rich Text Editor"
 msgstr "Rikas tekstieditori"
 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."
 msgctxt "Title of the CKEditor5 editor."
 msgid "Rich Text Editor"
 msgid "Rich Text Editor"
 msgstr "Éditeur de texte enrichi"
 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."
 msgctxt "Title of the CKEditor5 editor."
 msgid "Rich Text Editor"
 msgid "Rich Text Editor"
 msgstr "Editor de texto mellorado"
 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."
 msgctxt "Title of the CKEditor5 editor."
 msgid "Rich Text Editor"
 msgid "Rich Text Editor"
 msgstr "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."
 msgctxt "Title of the CKEditor5 editor."
 msgid "Rich Text Editor"
 msgid "Rich Text Editor"
 msgstr "Bővített szövegszerkesztő"
 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."
 msgctxt "Title of the CKEditor5 editor."
 msgid "Rich Text Editor"
 msgid "Rich Text Editor"
 msgstr "Editor di testo Rich Text"
 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."
 msgctxt "Title of the CKEditor5 editor."
 msgid "Rich Text Editor"
 msgid "Rich Text Editor"
 msgstr "リッチテキストエディター"
 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."
 msgctxt "Title of the CKEditor5 editor."
 msgid "Rich Text Editor"
 msgid "Rich Text Editor"
 msgstr "កម្មវិធី​កែសម្រួល​អត្ថបទ​សម្បូរបែប"
 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."
 msgctxt "Title of the CKEditor5 editor."
 msgid "Rich Text Editor"
 msgid "Rich Text Editor"
 msgstr "‍ಸಮೃದ್ಧ ಪಠ್ಯ ಸಂಪಾದಕ‍‍"
 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."
 msgctxt "Title of the CKEditor5 editor."
 msgid "Rich Text Editor"
 msgid "Rich Text Editor"
 msgstr "سەرنوسەری دەقی بەپیت"
 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."
 msgctxt "Title of the CKEditor5 editor."
 msgid "Rich Text Editor"
 msgid "Rich Text Editor"
 msgstr "Rikteksteditor"
 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."
 msgctxt "Title of the CKEditor5 editor."
 msgid "Rich Text Editor"
 msgid "Rich Text Editor"
 msgstr "Tekstbewerker"
 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."
 msgctxt "Title of the CKEditor5 editor."
 msgid "Rich Text Editor"
 msgid "Rich Text Editor"
 msgstr "Editor de Formatação"
 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."
 msgctxt "Title of the CKEditor5 editor."
 msgid "Rich Text Editor"
 msgid "Rich Text Editor"
 msgstr "Editor de texto avançado"
 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."
 msgctxt "Title of the CKEditor5 editor."
 msgid "Rich Text Editor"
 msgid "Rich Text Editor"
 msgstr "Editor de text îmbunătățit"
 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."
 msgctxt "Title of the CKEditor5 editor."
 msgid "Rich Text Editor"
 msgid "Rich Text Editor"
 msgstr "Редактор"
 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."
 msgctxt "Title of the CKEditor5 editor."
 msgid "Rich Text Editor"
 msgid "Rich Text Editor"
 msgstr "Editor s formátovaním"
 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."
 msgctxt "Title of the CKEditor5 editor."
 msgid "Rich Text Editor"
 msgid "Rich Text Editor"
 msgstr "Redaktues i Tekstit të Pasur"
 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."
 msgctxt "Title of the CKEditor5 editor."
 msgid "Rich Text Editor"
 msgid "Rich Text Editor"
 msgstr "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."
 msgctxt "Title of the CKEditor5 editor."
 msgid "Rich Text Editor"
 msgid "Rich Text Editor"
 msgstr "Zengin İçerik Editörü"
 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."
 msgctxt "Title of the CKEditor5 editor."
 msgid "Rich Text Editor"
 msgid "Rich Text Editor"
 msgstr "تېكىست تەھرىرلىگۈچ"
 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."
 msgctxt "Title of the CKEditor5 editor."
 msgid "Rich Text Editor"
 msgid "Rich Text Editor"
 msgstr "Розширений текстовий редактор"
 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."
 msgctxt "Title of the CKEditor5 editor."
 msgid "Rich Text Editor"
 msgid "Rich Text Editor"
 msgstr "富文本编辑器"
 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."
 msgctxt "Title of the CKEditor5 editor."
 msgid "Rich Text Editor"
 msgid "Rich Text Editor"
 msgstr "豐富文字編輯器"
 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",
   "name": "@ckeditor/ckeditor5-ui",
-  "version": "11.0.0",
+  "version": "11.1.0",
   "description": "The UI framework and standard UI library of CKEditor 5.",
   "description": "The UI framework and standard UI library of CKEditor 5.",
   "keywords": [
   "keywords": [
     "ckeditor",
     "ckeditor",
@@ -9,29 +9,29 @@
     "ckeditor5-lib"
     "ckeditor5-lib"
   ],
   ],
   "dependencies": {
   "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"
     "lodash-es": "^4.17.10"
   },
   },
   "devDependencies": {
   "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",
     "del": "^2.2.0",
     "eslint": "^5.5.0",
     "eslint": "^5.5.0",
     "eslint-config-ckeditor5": "^1.0.7",
     "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 );
 		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.
 		 * 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}.
 		 * 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',
 					'ck-reset',
 					'ck-reset',
 					'ck-dropdown__panel',
 					'ck-dropdown__panel',
+					bind.to( 'position', value => `ck-dropdown__panel_${ value }` ),
 					bind.if( 'isVisible', 'ck-dropdown__panel-visible' )
 					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 '../../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.
  * 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 );
 		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.
 		 * Tracks information about DOM focus in the dropdown.
 		 *
 		 *
 		 * @readonly
 		 * @readonly
@@ -147,6 +174,7 @@ export default class DropdownView extends View {
 				class: [
 				class: [
 					'ck',
 					'ck',
 					'ck-dropdown',
 					'ck-dropdown',
+					bind.to( 'class' ),
 					bind.if( 'isEnabled', 'ck-disabled', value => !value )
 					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.
 		// Toggle the visibility of the panel when the dropdown becomes open.
 		this.panelView.bind( 'isVisible' ).to( this, 'isOpen' );
 		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.
 		// Listen for keystrokes coming from within #element.
 		this.keystrokes.listenTo( this.element );
 		this.keystrokes.listenTo( this.element );
 
 
@@ -257,3 +313,82 @@ export default class DropdownView extends View {
 		this.buttonView.focus();
 		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 );
  *		document.body.appendChild( dropdown.element );
  *
  *
  * You can also provide other button views (they need to implement the
  * 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.
  * {@link module:ui/dropdown/button/splitbuttonview~SplitButtonView} to create a dropdown with a split button.
  *
  *
  *		const dropdown = createDropdown( model, SplitButtonView );
  *		const dropdown = createDropdown( model, SplitButtonView );
@@ -150,13 +150,22 @@ export function addToolbarToDropdown( dropdownView, buttons ) {
  *
  *
  *		items.add( {
  *		items.add( {
  *			type: 'button',
  *			type: 'button',
- *			model: new Model( { label: 'First item', labelStyle: 'color: red' } )
+ *			model: new Model( {
+ *				withText: true,
+ *				label: 'First item',
+ *				labelStyle: 'color: red'
+ *			} )
  *		} );
  *		} );
  *
  *
  *		items.add( {
  *		items.add( {
  *			 type: 'button',
  *			 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 );
  *		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() {
 	_createButtonView() {
 		const editor = this.editor;
 		const editor = this.editor;
+		const t = editor.t;
 		const buttonView = new BlockButtonView( editor.locale );
 		const buttonView = new BlockButtonView( editor.locale );
 
 
 		buttonView.set( {
 		buttonView.set( {
-			label: editor.t( 'Edit block' ),
+			label: t( 'Edit block' ),
 			icon: iconPilcrow,
 			icon: iconPilcrow,
 			withText: false
 			withText: false
 		} );
 		} );

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

@@ -50,6 +50,14 @@ describe( 'DropdownPanelView', () => {
 					view.isVisible = false;
 					view.isVisible = false;
 					expect( view.element.classList.contains( 'ck-dropdown__panel-visible' ) ).to.be.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', () => {
 			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 { keyCodes } from '@ckeditor/ckeditor5-utils/src/keyboard';
 import ButtonView from '../../src/button/buttonview';
 import ButtonView from '../../src/button/buttonview';
 import DropdownPanelView from '../../src/dropdown/dropdownpanelview';
 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', () => {
 describe( 'DropdownView', () => {
 	let view, buttonView, panelView, locale;
 	let view, buttonView, panelView, locale;
 
 
+	testUtils.createSinonSandbox();
+
 	beforeEach( () => {
 	beforeEach( () => {
 		locale = { t() {} };
 		locale = { t() {} };
 
 
@@ -21,6 +26,15 @@ describe( 'DropdownView', () => {
 
 
 		view = new DropdownView( locale, buttonView, panelView );
 		view = new DropdownView( locale, buttonView, panelView );
 		view.render();
 		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()', () => {
 	describe( 'constructor()', () => {
@@ -44,6 +58,10 @@ describe( 'DropdownView', () => {
 			expect( view.isEnabled ).to.be.true;
 			expect( view.isEnabled ).to.be.true;
 		} );
 		} );
 
 
+		it( 'sets view#panelPosition "auto"', () => {
+			expect( view.panelPosition ).to.equal( 'auto' );
+		} );
+
 		it( 'creates #focusTracker instance', () => {
 		it( 'creates #focusTracker instance', () => {
 			expect( view.focusTracker ).to.be.instanceOf( FocusTracker );
 			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;
 						view.isEnabled = true;
 						expect( view.element.classList.contains( 'ck-disabled' ) ).to.be.false;
 						expect( view.element.classList.contains( 'ck-disabled' ) ).to.be.false;
 
 
 						view.isEnabled = false;
 						view.isEnabled = false;
 						expect( view.element.classList.contains( 'ck-disabled' ) ).to.be.true;
 						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' } );
 	const collection = new Collection( { idProperty: 'label' } );
 
 
 	[ '0.8em', '1em', '1.2em', '1.5em', '2.0em', '3.0em' ].forEach( font => {
 	[ '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( {} );
 	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', () => {
 			it( 'should hide the panel on toolbar blur', () => {
+				blockToolbar.toolbarView.focusTracker.isFocused = true;
+
 				blockToolbar.buttonView.fire( 'execute' );
 				blockToolbar.buttonView.fire( 'execute' );
 
 
 				expect( blockToolbar.panelView.isVisible ).to.be.true;
 				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);
 		z-index: var(--ck-z-modal);
 
 
 		position: absolute;
 		position: absolute;
-		left: 0px;
-		transform: translate3d( 0, 100%, 0 );
 
 
 		&.ck-dropdown__panel-visible {
 		&.ck-dropdown__panel-visible {
 			display: inline-block;
 			display: inline-block;
@@ -43,5 +41,25 @@
 			/* This will prevent blurry icons in dropdown on Firefox. See #340. */
 			/* This will prevent blurry icons in dropdown on Firefox. See #340. */
 			will-change: transform;
 			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;
+		}
 	}
 	}
 }
 }