From fddff9c62782a0aae74a5f01afe1b491ef385a14 Mon Sep 17 00:00:00 2001 From: Jure Grabnar Date: Tue, 19 Mar 2019 20:41:16 +0100 Subject: [PATCH] Perform styling on the WOPI modal --- app/assets/images/office/ms-excel-active.svg | 15 +++++ .../images/office/ms-excel-inactive.svg | 15 +++++ app/assets/images/office/ms-pwrpt-active.svg | 15 +++++ .../images/office/ms-pwrpt-inactive.svg | 15 +++++ app/assets/images/office/ms-word-active.svg | 15 +++++ app/assets/images/office/ms-word-inactive.svg | 15 +++++ .../assets/wopi/create_wopi_file.js | 23 ++++++++ app/assets/stylesheets/constants.scss | 4 ++ app/assets/stylesheets/my_modules.scss | 56 +++++++++++++++++++ .../wopi/_create_wopi_file_button.html.erb | 7 ++- .../wopi/_create_wopi_file_modal.html.erb | 33 ++++++++--- config/locales/en.yml | 4 ++ 12 files changed, 206 insertions(+), 11 deletions(-) create mode 100644 app/assets/images/office/ms-excel-active.svg create mode 100644 app/assets/images/office/ms-excel-inactive.svg create mode 100644 app/assets/images/office/ms-pwrpt-active.svg create mode 100644 app/assets/images/office/ms-pwrpt-inactive.svg create mode 100644 app/assets/images/office/ms-word-active.svg create mode 100644 app/assets/images/office/ms-word-inactive.svg diff --git a/app/assets/images/office/ms-excel-active.svg b/app/assets/images/office/ms-excel-active.svg new file mode 100644 index 000000000..47a97c318 --- /dev/null +++ b/app/assets/images/office/ms-excel-active.svg @@ -0,0 +1,15 @@ + + + + 1DBED704-6E88-4AE3-B2F9-3410F58D52C1 + Created with sketchtool. + + + + + + + + + + \ No newline at end of file diff --git a/app/assets/images/office/ms-excel-inactive.svg b/app/assets/images/office/ms-excel-inactive.svg new file mode 100644 index 000000000..82d34f527 --- /dev/null +++ b/app/assets/images/office/ms-excel-inactive.svg @@ -0,0 +1,15 @@ + + + + 4C8BB196-A5E9-45E1-A350-99BB0AD162B7 + Created with sketchtool. + + + + + + + + + + \ No newline at end of file diff --git a/app/assets/images/office/ms-pwrpt-active.svg b/app/assets/images/office/ms-pwrpt-active.svg new file mode 100644 index 000000000..7d8cec25e --- /dev/null +++ b/app/assets/images/office/ms-pwrpt-active.svg @@ -0,0 +1,15 @@ + + + + 20B71793-99D3-4CCE-9F03-A003272E0F54 + Created with sketchtool. + + + + + + + + + + \ No newline at end of file diff --git a/app/assets/images/office/ms-pwrpt-inactive.svg b/app/assets/images/office/ms-pwrpt-inactive.svg new file mode 100644 index 000000000..27ae531bd --- /dev/null +++ b/app/assets/images/office/ms-pwrpt-inactive.svg @@ -0,0 +1,15 @@ + + + + 7D86E2E5-6A35-46CC-B7FA-7880CD9FA8DB + Created with sketchtool. + + + + + + + + + + \ No newline at end of file diff --git a/app/assets/images/office/ms-word-active.svg b/app/assets/images/office/ms-word-active.svg new file mode 100644 index 000000000..e9a0450be --- /dev/null +++ b/app/assets/images/office/ms-word-active.svg @@ -0,0 +1,15 @@ + + + + 58A7CABD-8C13-4F38-A224-E58B3FEF6D9B + Created with sketchtool. + + + + + + + + + + \ No newline at end of file diff --git a/app/assets/images/office/ms-word-inactive.svg b/app/assets/images/office/ms-word-inactive.svg new file mode 100644 index 000000000..166bbb5fd --- /dev/null +++ b/app/assets/images/office/ms-word-inactive.svg @@ -0,0 +1,15 @@ + + + + 31E0F97F-2288-43F7-8844-5D70AE3003E4 + Created with sketchtool. + + + + + + + + + + \ No newline at end of file diff --git a/app/assets/javascripts/assets/wopi/create_wopi_file.js b/app/assets/javascripts/assets/wopi/create_wopi_file.js index 9ce511490..9eb66c27f 100644 --- a/app/assets/javascripts/assets/wopi/create_wopi_file.js +++ b/app/assets/javascripts/assets/wopi/create_wopi_file.js @@ -3,6 +3,7 @@ function applyCreateWopiFileCallback() { $(".create-wopi-file-btn").off().on('click', function(e){ var $modal = $('#new-office-file-modal'); $($modal).find('form').clearFormErrors(); + $($modal).find('#new-wopi-file-name').val(''); // Append element info to which the new file will be attached $modal.find('#element_id').val($(this).data('id')); @@ -19,6 +20,8 @@ function initCreateWopiFileModal() { $("#new-office-file-modal form") .on('ajax:success', function(ev, data) { window.open(data.edit_url, '_blank'); + $('#new-office-file-modal').modal('hide'); + //location.reload(); }) .on('ajax:error', function(ev, response) { @@ -39,6 +42,26 @@ function initCreateWopiFileModal() { }); } +// I couldn't make this work through CSS +function applyImageChangeOnButtons() { + var resetToInActive = function (modal) { + modal.find('img.act').hide(); + modal.find('img.inactive').show(); + }; + + var modal = $('#new-office-file-modal'); + modal.find('.btn-group label').off().click(function () { + resetToInActive(modal); + + $(this).find('img.act').show(); + $(this).find('img.inactive').hide(); + }) + + // Set default value + modal.find('label#word-btn').click(); +} + $(document).ready(function() { initCreateWopiFileModal(); + applyImageChangeOnButtons(); }); diff --git a/app/assets/stylesheets/constants.scss b/app/assets/stylesheets/constants.scss index 9b6cd3ab2..6fd2c216c 100644 --- a/app/assets/stylesheets/constants.scss +++ b/app/assets/stylesheets/constants.scss @@ -31,6 +31,10 @@ $brand-warning-light: #fcf7e4; $brand-danger-light: #efdfdf; $brand-light-blue: #e3f1f9; +// MS Office colors: +$office-ms-word: #2B579A; +$office-ms-excel: #217346; +$office-ms-powerpoint: #D24726; //============================================================================== // Other diff --git a/app/assets/stylesheets/my_modules.scss b/app/assets/stylesheets/my_modules.scss index c1d22bed7..541eb218a 100644 --- a/app/assets/stylesheets/my_modules.scss +++ b/app/assets/stylesheets/my_modules.scss @@ -46,3 +46,59 @@ word-wrap: break-word; } } + +/* Create wopi file */ +.create-wopi-file-btn { + border: 0px; +} + +#new-office-file-modal { + .modal-header { + border-bottom: none; + } + .modal-body { + margin-bottom: 80px; + } + .modal-footer { + border-top: none; + } + + label.btn { + text-align: left; + padding-left: 15px; + + background-color: $color-white; + color: $color-emperor; + + &#word-btn.active { + background-color: $office-ms-word; + color: $color-white; + } + + &#excel-btn.active { + background-color: $office-ms-excel; + color: $color-white; + } + + &#powerpoint-btn.active { + background-color: $office-ms-powerpoint; + color: $color-white; + } + + span { + display: inline-block; + vertical-align: middle; + text-align: left; + margin-left: 15px; + } + } + + #submit-btn-cont { + padding: 0; + + // Stretch button + .btn { + width: 100%; + } + } +} diff --git a/app/views/assets/wopi/_create_wopi_file_button.html.erb b/app/views/assets/wopi/_create_wopi_file_button.html.erb index d84c0183a..b0048f0ad 100644 --- a/app/views/assets/wopi/_create_wopi_file_button.html.erb +++ b/app/views/assets/wopi/_create_wopi_file_button.html.erb @@ -1,5 +1,5 @@ <%= link_to create_wopi_file_path, - class: 'btn btn-link create-wopi-file-btn', + class: 'btn btn-default create-wopi-file-btn', target: '_blank', title: 'Create_new_file', style: 'display: inline-block', @@ -7,5 +7,8 @@ 'id': element_id, 'type': element_type, } do %> - 'create file' + + + + <%= t('assets.create_wopi_file.button_text') %> <% end %> diff --git a/app/views/assets/wopi/_create_wopi_file_modal.html.erb b/app/views/assets/wopi/_create_wopi_file_modal.html.erb index acdc41867..ce15d9cd4 100644 --- a/app/views/assets/wopi/_create_wopi_file_modal.html.erb +++ b/app/views/assets/wopi/_create_wopi_file_modal.html.erb @@ -7,6 +7,10 @@
+ + @@ -24,15 +28,23 @@
-
@@ -40,8 +52,11 @@
- <%= f.submit t('assets.create_wopi_file.create_document_button'), - class: 'btn btn-toggle' %> +
+
+ <%= f.submit t('assets.create_wopi_file.create_document_button'), + class: 'btn btn-toggle' %> +
diff --git a/config/locales/en.yml b/config/locales/en.yml index 0bde97a76..63c850e95 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -1888,9 +1888,13 @@ en: wopi_supported_table_formats_title: 'Only .xlsx, .xlsm, .xlsb, .ods file formats are supported for editing in Excel Online.' wopi_supported_presentation_formats_title: 'Only .pptx, ppsx, .odp file formats are supported for editing in Powerpoint Online.' create_wopi_file: + button_text: 'New Office file' modal_title: 'Create new Microsoft Office Online document' text_field_label: 'Document name & type' text_field_placeholder: 'New Document' + ms_word: 'Word
Online' + ms_excel: 'Excel
Online' + ms_powerpoint: 'PowerPoint
Online' create_document_button: 'Create Document' errors: forbidden: 'You do not have permission to add files.'