Merge pull request #208 from ONLYOFFICE/feature/reporter_trans_layout

reporter mode (translations and buttons layout)

slide/Drawing/HtmlPage.js

@@ -3013,34 +3013,99 @@ function CEditorPage(api)
 			var _labelMain = document.getElementById("dem_id_slides");
 			var _buttonSeparator2 = document.getElementById("dem_id_sep2");
 			var _buttonPointer = document.getElementById("dem_id_pointer");
+			var _buttonEnd = document.getElementById("dem_id_end");
+
+			_label1.style.display = "block";
+			_buttonPlay.style.display = "block";
+			_buttonReset.style.display = "block";
+			_buttonEnd.style.display = "block";
+
+			var _label1_width = _label1.offsetWidth;
+			var _main_width = _labelMain.offsetWidth;
+			var _buttonReset_width = _buttonReset.offsetWidth;
+			var _buttonEnd_width = _buttonEnd.offsetWidth;
+
+			if (0 == _label1_width)
+				_label1_width = 45;
+			if (0 == _main_width)
+				_main_width = 55;
+			if (0 == _buttonReset_width)
+				_buttonReset_width = 45;
+			if (0 == _buttonEnd_width)
+				_buttonEnd_width = 60;
 
 			var _width = parseInt(this.m_oMainView.HtmlElement.style.width);
-			var _posStart = 10;
-			if (_width >= 340)
+
+			// test first mode
+			// [10][time][6][play/pause(20)][6][reset]----[10]----[prev(20)][next(20)][15][slide x of x][15][pointer(20)]----[10]----[end][10]
+			var _widthCenter = (20 + 20 + 15 + _main_width + 15 + 20);
+			var _posCenter = (_width - _widthCenter) >> 1;
+
+			var _test_width1 = 10 + _label1_width + 6 + 20 + 6 + _buttonReset_width + 10 + 20 + 20 + 15 + _main_width + 15 + 20 + 10 + _buttonEnd_width + 10;
+			var _is1 = ((10 + _label1_width + 6 + 20 + 6 + _buttonReset_width + 10) <= _posCenter) ? true : false;
+			var _is2 = ((_posCenter + _widthCenter) <= (_width - 20 - _buttonEnd_width)) ? true : false;
+			if (_is2 && (_test_width1 <= _width))
 			{
 				_label1.style.display = "block";
 				_buttonPlay.style.display = "block";
 				_buttonReset.style.display = "block";
+				_buttonEnd.style.display = "block";
+
+				_label1.style.left = "10px";
+				_buttonPlay.style.left = (10 + _label1_width + 6) + "px";
+				_buttonReset.style.left = (10 + _label1_width + 6 + 20 + 6) + "px";
+
+				if (!_is1)
+				{
+					_posCenter = 10 + _label1_width + 6 + 20 + 6 + _buttonReset_width + 10 + ((_width - _test_width1) >> 1);
+				}
 
-				_posStart = (_width >> 1) - 60;
+				_buttonPrev.style.left = _posCenter + "px";
+				_buttonNext.style.left = (_posCenter + 20) + "px";
+				_buttonSeparator.style.left = (_posCenter + 48 - 10) + "px";
+				_labelMain.style.left = (_posCenter + 55) + "px";
+				_buttonSeparator2.style.left = (_posCenter + 55 + _main_width + 7 - 10) + "px";
+				_buttonPointer.style.left = (_posCenter + 70 + _main_width) + "px";
+
+				return;
 			}
-			else
+
+			// test second mode
+			// [10][prev(20)][next(20)][15][slide x of x][15][pointer(20)]----[10]----[end][10]
+			var _test_width2 = 10 + 20 + 20 + 15 + _main_width + 15 + 20 + 10 + _buttonEnd_width + 10;
+			if (_test_width2 <= _width)
 			{
 				_label1.style.display = "none";
 				_buttonPlay.style.display = "none";
 				_buttonReset.style.display = "none";
+				_buttonEnd.style.display = "block";
+
+				_buttonPrev.style.left = "10px";
+				_buttonNext.style.left = "30px";
+				_buttonSeparator.style.left = (58 - 10) + "px";
+				_labelMain.style.left = "65px";
+				_buttonSeparator2.style.left = (65 + _main_width + 7 - 10) + "px";
+				_buttonPointer.style.left = (80 + _main_width) + "px";
+				return;
 			}
 
-			_buttonPrev.style.left = _posStart + "px";
-			_buttonNext.style.left = _posStart + 20 + "px";
-			_buttonSeparator.style.left = _posStart + 35 + "px";
-			_labelMain.style.left = _posStart + 57 + "px";
-			var _mainW = _labelMain.offsetWidth;
-			if (_mainW == 0)
-				_mainW = 55;
-			var _leftPos = _posStart + 57 + _mainW + 2;
-			_buttonSeparator2.style.left = _leftPos + "px";
-			_buttonPointer.style.left = _leftPos + 15 + "px";
+			// test third mode
+			// ---------[prev(20)][next(20)][15][slide x of x][15][pointer(20)]---------
+			// var _test_width3 = 20 + 20 + 15 + _main_width + 15 + 20;
+			if (_posCenter < 0)
+				_posCenter = 0;
+
+			_label1.style.display = "none";
+			_buttonPlay.style.display = "none";
+			_buttonReset.style.display = "none";
+			_buttonEnd.style.display = "none";
+
+			_buttonPrev.style.left = _posCenter + "px";
+			_buttonNext.style.left = (_posCenter + 20) + "px";
+			_buttonSeparator.style.left = (_posCenter + 48 - 10) + "px";
+			_labelMain.style.left = (_posCenter + 55) + "px";
+			_buttonSeparator2.style.left = (_posCenter + 55 + _main_width + 7 - 10) + "px";
+			_buttonPointer.style.left = (_posCenter + 70 + _main_width) + "px";
 		}
 	};