From 23a49167f10e0a6a49431cb177e868fb3c8d3808 Mon Sep 17 00:00:00 2001
From: Julia Radzhabova <Julia.Radzhabova@onlyoffice.com>
Date: Tue, 3 Apr 2018 13:22:24 +0300
Subject: [PATCH] [PE][SSE] Change interface for creating hyperlinks.

---
 .../main/app/view/HyperlinkSettingsDialog.js  |  7 +-
 .../main/app/view/HyperlinkSettingsDialog.js  | 60 ++++++++-------
 apps/presentationeditor/main/locale/en.json   |  2 +-
 .../main/app/view/HyperlinkSettingsDialog.js  | 76 +++++++++++--------
 apps/spreadsheeteditor/main/locale/en.json    |  2 +-
 5 files changed, 78 insertions(+), 69 deletions(-)

diff --git a/apps/documenteditor/main/app/view/HyperlinkSettingsDialog.js b/apps/documenteditor/main/app/view/HyperlinkSettingsDialog.js
index cb1073a77..739f09689 100644
--- a/apps/documenteditor/main/app/view/HyperlinkSettingsDialog.js
+++ b/apps/documenteditor/main/app/view/HyperlinkSettingsDialog.js
@@ -98,7 +98,6 @@ define([
             this.options.tpl = _.template(this.template)(this.options);
             this.api = this.options.api;
             this._originalProps = null;
-            this.linkType = c_oHyperlinkType.WebLink;
 
             Common.UI.Window.prototype.initialize.call(this, this.options);
         },
@@ -257,8 +256,6 @@ define([
 
             } else
                 this.btnOk.setDisabled(false);
-
-            this.linkType = value;
         },
 
         onLinkTypeClick: function(type, btn, event) {
@@ -329,7 +326,7 @@ define([
                 props   = new Asc.CHyperlinkProperty(),
                 display = '';
 
-            if (this.linkType == c_oHyperlinkType.WebLink) {
+            if (this.btnExternal.isActive()) {//WebLink
                 var url     = $.trim(me.inputUrl.getValue());
 
                 if (! /(((^https?)|(^ftp)):\/\/)|(^mailto:)/i.test(url) )
@@ -380,7 +377,7 @@ define([
         _handleInput: function(state) {
             if (this.options.handler) {
                 if (state == 'ok') {
-                    if (this.linkType == c_oHyperlinkType.WebLink) {
+                    if (this.btnExternal.isActive()) {//WebLink
                         if (this.inputUrl.checkValidate() !== true)  {
                             this.inputUrl.cmpEl.find('input').focus();
                             return;
diff --git a/apps/presentationeditor/main/app/view/HyperlinkSettingsDialog.js b/apps/presentationeditor/main/app/view/HyperlinkSettingsDialog.js
index 31cbe3712..796a8e1c9 100644
--- a/apps/presentationeditor/main/app/view/HyperlinkSettingsDialog.js
+++ b/apps/presentationeditor/main/app/view/HyperlinkSettingsDialog.js
@@ -69,14 +69,14 @@ define([
             }, options || {});
 
             this.template = [
-                '<div class="box" style="height: 270px;">',
-                    '<div class="input-row">',
-                        '<label style="font-weight: bold;">' + this.textLinkType + '</label>',
+                '<div class="box" style="height: 250px;">',
+                    '<div class="input-row" style="margin-bottom: 10px;">',
+                        '<button type="button" class="btn btn-text-default auto" id="id-dlg-hyperlink-external" style="border-top-right-radius: 0;border-bottom-right-radius: 0;">', this.textExternalLink,'</button>',
+                        '<button type="button" class="btn btn-text-default auto" id="id-dlg-hyperlink-internal" style="border-top-left-radius: 0;border-bottom-left-radius: 0;">', this.textInternalLink,'</button>',
                     '</div>',
-                    '<div id="id-dlg-hyperlink-type" class="input-row" style="margin-bottom: 5px;"></div>',
                     '<div id="id-external-link">',
                         '<div class="input-row">',
-                            '<label style="font-weight: bold;">' + this.strLinkTo + ' *</label>',
+                            '<label>' + this.strLinkTo + ' *</label>',
                         '</div>',
                         '<div id="id-dlg-hyperlink-url" class="input-row" style="margin-bottom: 5px;"></div>',
                     '</div>',
@@ -89,11 +89,11 @@ define([
                         '<div id="id-dlg-hyperlink-slide" style="display: inline-block;margin-bottom: 10px;"></div>',
                     '</div>',
                     '<div class="input-row">',
-                        '<label style="font-weight: bold;">' + this.strDisplay + '</label>',
+                        '<label>' + this.strDisplay + '</label>',
                     '</div>',
                     '<div id="id-dlg-hyperlink-display" class="input-row" style="margin-bottom: 5px;"></div>',
                     '<div class="input-row">',
-                        '<label style="font-weight: bold;">' + this.textTipText + '</label>',
+                        '<label>' + this.textTipText + '</label>',
                     '</div>',
                         '<div id="id-dlg-hyperlink-tip" class="input-row" style="margin-bottom: 5px;"></div>',
                     '</div>',
@@ -116,23 +116,22 @@ define([
             var me = this,
                 $window = this.getChild();
 
-            me._arrTypeSrc = [
-                {displayValue: me.textInternalLink,   value: c_oHyperlinkType.InternalLink},
-                {displayValue: me.textExternalLink,   value: c_oHyperlinkType.WebLink}
-            ];
-
-            me.cmbLinkType = new Common.UI.ComboBox({
-                el: $('#id-dlg-hyperlink-type'),
-                cls: 'input-group-nr',
-                style: 'width: 100%;',
-                menuStyle: 'min-width: 318px;',
-                editable: false,
-                data: this._arrTypeSrc
+            me.btnExternal = new Common.UI.Button({
+                el: $('#id-dlg-hyperlink-external'),
+                enableToggle: true,
+                toggleGroup: 'hyperlink-type',
+                allowDepress: false,
+                pressed: true
             });
-            me.cmbLinkType.setValue(me._arrTypeSrc[1].value);
-            me.cmbLinkType.on('selected', _.bind(function(combo, record) {
-                this.ShowHideElem(record.value);
-            }, me));
+            me.btnExternal.on('click', _.bind(me.onLinkTypeClick, me, c_oHyperlinkType.WebLink));
+
+            me.btnInternal = new Common.UI.Button({
+                el: $('#id-dlg-hyperlink-internal'),
+                enableToggle: true,
+                toggleGroup: 'hyperlink-type',
+                allowDepress: false
+            });
+            me.btnInternal.on('click', _.bind(me.onLinkTypeClick, me, c_oHyperlinkType.InternalLink));
 
             me.inputUrl = new Common.UI.InputField({
                 el          : $('#id-dlg-hyperlink-url'),
@@ -217,7 +216,7 @@ define([
                 var me = this;
 
                 var type = me.parseUrl(props.get_Value());
-                me.cmbLinkType.setValue(type);
+                (type == c_oHyperlinkType.WebLink) ? me.btnExternal.toggle(true) : me.btnInternal.toggle(true);
                 me.ShowHideElem(type);
                 
                 if (props.get_Text()!==null) {
@@ -239,7 +238,7 @@ define([
             var me      = this,
                 props   = new Asc.CHyperlinkProperty();
             var def_display = '';
-            if (me.cmbLinkType.getValue() == c_oHyperlinkType.InternalLink) {
+            if (this.btnInternal.isActive()) {//InternalLink
                 var url = "ppaction://hlink";
                 var tip = '';
                 var txttip = me.inputTip.getValue();
@@ -298,7 +297,7 @@ define([
         _handleInput: function(state) {
             if (this.options.handler) {
                 if (state == 'ok') {
-                    var checkurl = (this.cmbLinkType.getValue() == c_oHyperlinkType.WebLink) ? this.inputUrl.checkValidate() : true,
+                    var checkurl = (this.btnExternal.isActive()) ? this.inputUrl.checkValidate() : true,
                         checkdisp = this.inputDisplay.checkValidate();
                     if (checkurl !== true)  {
                         this.inputUrl.cmpEl.find('input').focus();
@@ -321,6 +320,10 @@ define([
             this.internalPanel.toggleClass('hidden', value !== c_oHyperlinkType.InternalLink);
         },
 
+        onLinkTypeClick: function(type, btn, event) {
+            this.ShowHideElem(type);
+        },
+
         parseUrl: function(url) {
             if (url===null || url===undefined || url=='' )
                 return c_oHyperlinkType.WebLink;
@@ -364,13 +367,12 @@ define([
         },
 
         textTitle:          'Hyperlink Settings',
-        textInternalLink:   'Place In This Document',
-        textExternalLink:   'File or Web Page',
+        textInternalLink:   'Slide In This Presentation',
+        textExternalLink:   'External Link',
         textEmptyLink:      'Enter link here',
         textEmptyDesc:      'Enter caption here',
         textEmptyTooltip:   'Enter tooltip here',
         txtSlide:           'Slide',
-        textLinkType:       'Link Type',
         strDisplay:         'Display',
         textTipText:        'Screen Tip Text',
         strLinkTo:          'Link To',
diff --git a/apps/presentationeditor/main/locale/en.json b/apps/presentationeditor/main/locale/en.json
index a60255b37..6aba18f05 100644
--- a/apps/presentationeditor/main/locale/en.json
+++ b/apps/presentationeditor/main/locale/en.json
@@ -980,7 +980,7 @@
   "PE.Views.HyperlinkSettingsDialog.textEmptyTooltip": "Enter tooltip here",
   "PE.Views.HyperlinkSettingsDialog.textExternalLink": "External Link",
   "PE.Views.HyperlinkSettingsDialog.textInternalLink": "Slide In This Presentation",
-  "PE.Views.HyperlinkSettingsDialog.textLinkType": "Link Type",
+  "del_PE.Views.HyperlinkSettingsDialog.textLinkType": "Link Type",
   "PE.Views.HyperlinkSettingsDialog.textTipText": "ScreenTip Text",
   "PE.Views.HyperlinkSettingsDialog.textTitle": "Hyperlink Settings",
   "PE.Views.HyperlinkSettingsDialog.txtEmpty": "This field is required",
diff --git a/apps/spreadsheeteditor/main/app/view/HyperlinkSettingsDialog.js b/apps/spreadsheeteditor/main/app/view/HyperlinkSettingsDialog.js
index 4dd36c427..8fb87634e 100644
--- a/apps/spreadsheeteditor/main/app/view/HyperlinkSettingsDialog.js
+++ b/apps/spreadsheeteditor/main/app/view/HyperlinkSettingsDialog.js
@@ -63,18 +63,17 @@ define([
 
             this.template = [
                 '<div class="box">',
-                    '<div class="input-row">',
-                        '<label>' + this.textLinkType + '</label>',
+                    '<div class="input-row" style="margin-bottom: 10px;">',
+                        '<button type="button" class="btn btn-text-default auto" id="id-dlg-hyperlink-external" style="border-top-right-radius: 0;border-bottom-right-radius: 0;">', this.textExternalLink,'</button>',
+                        '<button type="button" class="btn btn-text-default auto" id="id-dlg-hyperlink-internal" style="border-top-left-radius: 0;border-bottom-left-radius: 0;">', this.textInternalLink,'</button>',
                     '</div>',
-                    '<div class="input-row" id="id-dlg-hyperlink-type" style="margin-bottom: 5px;">',
-                    '</div>',
-                    '<div id="id-dlg-hyperlink-external">',
+                    '<div id="id-external-link">',
                         '<div class="input-row">',
                             '<label>' + this.strLinkTo + ' *</label>',
                         '</div>',
                         '<div id="id-dlg-hyperlink-url" class="input-row" style="margin-bottom: 5px;"></div>',
                     '</div>',
-                    '<div id="id-dlg-hyperlink-internal" style="display: none;">',
+                    '<div id="id-internal-link" class="hidden">',
                         '<div class="input-row">',
                             '<label style="width: 50%;">' + this.strSheet + '</label>',
                             '<label style="width: 50%;">' + this.strRange + ' *</label>',
@@ -111,20 +110,22 @@ define([
             var $window = this.getChild(),
                 me = this;
 
-            me.cmbLinkType = new Common.UI.ComboBox({
-                el      : $('#id-dlg-hyperlink-type'),
-                cls     : 'input-group-nr',
-                editable: false,
-                menuStyle: 'min-width: 100%;',
-                data    : [
-                    {displayValue: this.textInternalLink, value: Asc.c_oAscHyperlinkType.RangeLink},
-                    {displayValue: this.textExternalLink, value: Asc.c_oAscHyperlinkType.WebLink}
-                ]
-            }).on('selected', function(combo, record) {
-                $('#id-dlg-hyperlink-external')[record.value == Asc.c_oAscHyperlinkType.WebLink ? 'show' : 'hide']();
-                $('#id-dlg-hyperlink-internal')[record.value != Asc.c_oAscHyperlinkType.WebLink ? 'show' : 'hide']();
+            me.btnExternal = new Common.UI.Button({
+                el: $('#id-dlg-hyperlink-external'),
+                enableToggle: true,
+                toggleGroup: 'hyperlink-type',
+                allowDepress: false,
+                pressed: true
             });
-            me.cmbLinkType.setValue(Asc.c_oAscHyperlinkType.WebLink);
+            me.btnExternal.on('click', _.bind(me.onLinkTypeClick, me, Asc.c_oAscHyperlinkType.WebLink));
+
+            me.btnInternal = new Common.UI.Button({
+                el: $('#id-dlg-hyperlink-internal'),
+                enableToggle: true,
+                toggleGroup: 'hyperlink-type',
+                allowDepress: false
+            });
+            me.btnInternal.on('click', _.bind(me.onLinkTypeClick, me, Asc.c_oAscHyperlinkType.RangeLink));
 
             me.cmbSheets = new Common.UI.ComboBox({
                 el      : $('#id-dlg-hyperlink-sheet'),
@@ -182,6 +183,9 @@ define([
 
             $window.find('.dlg-btn').on('click', _.bind(this.onBtnClick, this));
             $window.find('input').on('keypress', _.bind(this.onKeyPress, this));
+
+            me.externalPanel = $window.find('#id-external-link');
+            me.internalPanel = $window.find('#id-internal-link');
         },
 
         show: function() {
@@ -198,20 +202,18 @@ define([
                 var me = this;
 
                 this.cmbSheets.setData(settings.sheets);
+                var type = (settings.props) ? settings.props.asc_getType() : Asc.c_oAscHyperlinkType.WebLink;
+                (type == Asc.c_oAscHyperlinkType.WebLink) ? me.btnExternal.toggle(true) : me.btnInternal.toggle(true);
+                me.ShowHideElem(type);
+                me.btnInternal.setDisabled(!settings.allowInternal && (type == Asc.c_oAscHyperlinkType.WebLink));
+                me.btnExternal.setDisabled(!settings.allowInternal && (type == Asc.c_oAscHyperlinkType.RangeLink));
+
                 if (!settings.props) {
-                    this.cmbLinkType.setValue(Asc.c_oAscHyperlinkType.WebLink);
-                    this.cmbLinkType.setDisabled(!settings.allowInternal);
                     this.inputDisplay.setValue(settings.isLock ? this.textDefault : settings.text);
                     this.focusedInput = this.inputUrl.cmpEl.find('input');
                     this.cmbSheets.setValue(settings.currentSheet);
                 } else {
-                    this.cmbLinkType.setValue(settings.props.asc_getType());
-                    this.cmbLinkType.setDisabled(!settings.allowInternal);
-
-                    if (settings.props.asc_getType() == Asc.c_oAscHyperlinkType.RangeLink) {
-                        $('#id-dlg-hyperlink-external').hide();
-                        $('#id-dlg-hyperlink-internal').show();
-
+                    if (type == Asc.c_oAscHyperlinkType.RangeLink) {
                         this.cmbSheets.setValue(settings.props.asc_getSheet());
                         this.inputRange.setValue(settings.props.asc_getRange());
                         this.focusedInput = this.inputRange.cmpEl.find('input');
@@ -231,9 +233,9 @@ define([
         getSettings: function() {
             var props = new Asc.asc_CHyperlink(),
                 def_display = "";
-            props.asc_setType(this.cmbLinkType.getValue());
+            props.asc_setType(this.btnInternal.isActive() ? Asc.c_oAscHyperlinkType.RangeLink : Asc.c_oAscHyperlinkType.WebLink);
 
-            if (this.cmbLinkType.getValue() == Asc.c_oAscHyperlinkType.RangeLink) {
+            if (this.btnInternal.isActive()) {
                 props.asc_setSheet(this.cmbSheets.getValue());
                 props.asc_setRange(this.inputRange.getValue());
                 def_display = this.cmbSheets.getValue() + '!' + this.inputRange.getValue();
@@ -273,8 +275,8 @@ define([
         _handleInput: function(state) {
             if (this.options.handler) {
                 if (state == 'ok') {
-                    var checkurl = (this.cmbLinkType.getValue() === Asc.c_oAscHyperlinkType.WebLink) ? this.inputUrl.checkValidate() : true,
-                        checkrange = (this.cmbLinkType.getValue() === Asc.c_oAscHyperlinkType.RangeLink) ? this.inputRange.checkValidate() : true,
+                    var checkurl = (this.btnExternal.isActive()) ? this.inputUrl.checkValidate() : true,
+                        checkrange = (this.btnInternal.isActive()) ? this.inputRange.checkValidate() : true,
                         checkdisp = this.inputDisplay.checkValidate();
                     if (checkurl !== true)  {
                         this.inputUrl.cmpEl.find('input').focus();
@@ -296,6 +298,15 @@ define([
             this.close();
         },
 
+        ShowHideElem: function(value) {
+            this.externalPanel.toggleClass('hidden', value !== Asc.c_oAscHyperlinkType.WebLink);
+            this.internalPanel.toggleClass('hidden', value !== Asc.c_oAscHyperlinkType.RangeLink);
+        },
+
+        onLinkTypeClick: function(type, btn, event) {
+            this.ShowHideElem(type);
+        },
+
         textTitle:          'Hyperlink Settings',
         textInternalLink:   'Internal Data Range',
         textExternalLink:   'Web Link',
@@ -304,7 +315,6 @@ define([
         textEmptyTooltip:   'Enter tooltip here',
         strSheet:           'Sheet',
         strRange:           'Range',
-        textLinkType:       'Link Type',
         strDisplay:         'Display',
         textTipText:        'Screen Tip Text',
         strLinkTo:          'Link To',
diff --git a/apps/spreadsheeteditor/main/locale/en.json b/apps/spreadsheeteditor/main/locale/en.json
index 66a3595d3..f737db215 100644
--- a/apps/spreadsheeteditor/main/locale/en.json
+++ b/apps/spreadsheeteditor/main/locale/en.json
@@ -1322,7 +1322,7 @@
   "SSE.Views.HyperlinkSettingsDialog.textExternalLink": "External Link",
   "SSE.Views.HyperlinkSettingsDialog.textInternalLink": "Internal Data Range",
   "SSE.Views.HyperlinkSettingsDialog.textInvalidRange": "ERROR! Invalid cells range",
-  "SSE.Views.HyperlinkSettingsDialog.textLinkType": "Link Type",
+  "del_SSE.Views.HyperlinkSettingsDialog.textLinkType": "Link Type",
   "SSE.Views.HyperlinkSettingsDialog.textTipText": "ScreenTip Text",
   "SSE.Views.HyperlinkSettingsDialog.textTitle": "Hyperlink Settings",
   "SSE.Views.HyperlinkSettingsDialog.txtEmpty": "This field is required",