From 17bd64b0cb02f29fd53fd7dc906243f0e38c4148 Mon Sep 17 00:00:00 2001 From: Michael Flucher Date: Tue, 15 Dec 2020 21:10:01 +0100 Subject: [PATCH 1/2] BLOCKS-228 change tab content to icons [MF] --- assets/scripts.svg | 5 ++++ src/library/css/share.css | 5 ++++ src/library/js/share/share.js | 47 +++++++++++++++++++---------------- src/library/js/share/utils.js | 4 +-- 4 files changed, 37 insertions(+), 24 deletions(-) create mode 100644 assets/scripts.svg diff --git a/assets/scripts.svg b/assets/scripts.svg new file mode 100644 index 00000000..88159c15 --- /dev/null +++ b/assets/scripts.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/library/css/share.css b/src/library/css/share.css index db1ad391..feba29ac 100644 --- a/src/library/css/share.css +++ b/src/library/css/share.css @@ -101,6 +101,11 @@ img { cursor: pointer; } +.catblocks-tab-icon { + height: 2rem; + font-size: 2rem; +} + .catblocks-script { padding: 0 20px; } diff --git a/src/library/js/share/share.js b/src/library/js/share/share.js index fd921cca..ef80fe2c 100644 --- a/src/library/js/share/share.js +++ b/src/library/js/share/share.js @@ -600,8 +600,8 @@ export class Share { 'data-parent': `#${accordionID}`, 'data-object': object.name }); - const currentLocaleValues = Blockly.CatblocksMsgs.getCurrentLocaleValues(); - this.generateTabs(objectContentContainer, objectID, object, currentLocaleValues); + + this.generateTabs(objectContentContainer, objectID, object); const contentContainer = this.generateOrInjectNewDOM(objectContentContainer, 'div', { class: 'tab-content card-body' }); @@ -615,13 +615,13 @@ export class Share { let objectsWorkspace = undefined; if (this.config.renderScripts) { - objectsWorkspace = this.generateScripts(contentContainer, objectID, object, currentLocaleValues, scriptToDisplay); + objectsWorkspace = this.generateScripts(contentContainer, objectID, object, scriptToDisplay); } if (this.config.renderLooks) { - this.generateLooks(contentContainer, objectID, object, currentLocaleValues, options); + this.generateLooks(contentContainer, objectID, object, options); } if (this.config.renderSounds) { - this.generateSounds(contentContainer, objectID, object, currentLocaleValues, options); + this.generateSounds(contentContainer, objectID, object, options); } return objectsWorkspace; } @@ -631,10 +631,9 @@ export class Share { * @param {Element} container * @param {string} objectID * @param {Object} object - * @param {Object} currentLocaleValues * @param {Object} [options=defaultOptions.object] */ - generateSounds(container, objectID, object, currentLocaleValues, options = defaultOptions.object) { + generateSounds(container, objectID, object, options = defaultOptions.object) { const soundsContainer = this.generateOrInjectNewDOM(container, 'div', { class: 'tab-pane fade p-3', id: `${objectID}-sounds`, @@ -642,7 +641,7 @@ export class Share { 'aria-labelledby': `${objectID}-sounds-tab` }); - const noSoundsText = 'No ' + currentLocaleValues['SOUNDS'] + ' found'; + const noSoundsText = 'No Sounds found'; if (!object || !object.soundList || object.soundList.length <= 0) { soundsContainer.appendChild( this.generateOrInjectNewDOM( @@ -717,7 +716,7 @@ export class Share { } if (failed > 0) { - const failedSoundsText = 'ERROR parsing ' + failed + ' ' + currentLocaleValues['SOUNDS']; + const failedSoundsText = 'ERROR parsing ' + failed + ' Sounds'; soundsContainer.appendChild( this.generateOrInjectNewDOM( soundsContainer, @@ -736,10 +735,9 @@ export class Share { * @param {Element} container * @param {string} objectID * @param {Object} object - * @param {Object} currentLocaleValues * @param {Object} [options=defaultOptions.object] */ - generateLooks(container, objectID, object, currentLocaleValues, options = defaultOptions.object) { + generateLooks(container, objectID, object, options = defaultOptions.object) { const looksContainer = this.generateOrInjectNewDOM(container, 'div', { class: 'tab-pane fade p-3', id: `${objectID}-looks`, @@ -747,7 +745,7 @@ export class Share { 'aria-labelledby': `${objectID}-looks-tab` }); - const noLooksText = 'No ' + currentLocaleValues['LOOKS'] + ' found'; + const noLooksText = 'No Looks found'; if (!object || !object.lookList || object.lookList.length <= 0) { looksContainer.appendChild( this.generateOrInjectNewDOM( @@ -863,7 +861,7 @@ export class Share { } if (failed > 0) { - const failedLooksText = 'ERROR parsing ' + failed + ' ' + currentLocaleValues['LOOKS']; + const failedLooksText = 'ERROR parsing ' + failed + ' Looks'; looksContainer.appendChild( this.generateOrInjectNewDOM( looksContainer, @@ -930,9 +928,9 @@ export class Share { * @param {Element} container * @param {string} objectID * @param {Object} object - * @param {Object} currentLocaleValues + * @param {number} scriptToDisplay */ - generateScripts(container, objectID, object, currentLocaleValues, scriptToDisplay) { + generateScripts(container, objectID, object, scriptToDisplay) { const wrapperContainer = this.generateOrInjectNewDOM(container, 'div', { class: 'tab-pane show active fade p-3', id: `${objectID}-scripts`, @@ -940,7 +938,7 @@ export class Share { 'aria-labelledby': `${objectID}-scripts-tab` }); if (!object || !object.scriptList || object.scriptList.length <= 0) { - const noScriptText = 'No ' + currentLocaleValues['SCRIPTS'] + ' found'; + const noScriptText = 'No Scripts found'; wrapperContainer.appendChild( this.generateOrInjectNewDOM( wrapperContainer, @@ -1058,7 +1056,7 @@ export class Share { } if (failed > 0) { - const failedScriptText = 'ERROR parsing ' + failed + ' ' + currentLocaleValues['SCRIPTS']; + const failedScriptText = 'ERROR parsing ' + failed + ' Scripts'; wrapperContainer.appendChild( this.generateOrInjectNewDOM( wrapperContainer, @@ -1078,9 +1076,8 @@ export class Share { * @param {Element} container * @param {string} objectID * @param {Object} object - * @param {Object} currentLocaleValues */ - generateTabs(container, objectID, object, currentLocaleValues) { + generateTabs(container, objectID, object) { if (!object) { object = { scriptList: [], @@ -1112,6 +1109,12 @@ export class Share { const liScript = this.generateOrInjectNewDOM(ul, 'li', { class: 'nav-item' }); + let mediapath = `${this.config.shareRoot}${this.config.media}`; + // full link or absolute path given + if (this.config.media.startsWith('http') || this.config.media.startsWith('/')) { + mediapath = this.config.media; + } + this.generateOrInjectNewDOM( liScript, 'a', @@ -1124,7 +1127,7 @@ export class Share { 'aria-controls': 'scripts', 'aria-selected': 'true' }, - `${currentLocaleValues['SCRIPTS']} (${object.scriptList.length})` + ` (${object.scriptList.length})` ); } @@ -1144,7 +1147,7 @@ export class Share { 'aria-controls': 'looks', 'aria-selected': 'false' }, - `${currentLocaleValues['LOOKS']} (${object.lookList.length})` + `visibility (${object.lookList.length})` ); } @@ -1164,7 +1167,7 @@ export class Share { 'aria-controls': 'sounds', 'aria-selected': 'false' }, - `${currentLocaleValues['SOUNDS']} (${object.soundList.length})` + `volume_up (${object.soundList.length})` ); } } diff --git a/src/library/js/share/utils.js b/src/library/js/share/utils.js index 28d17ce4..5a290c3e 100644 --- a/src/library/js/share/utils.js +++ b/src/library/js/share/utils.js @@ -83,7 +83,7 @@ export const injectNewDom = (container, tagName, attributes, textContent) => { subContainer.setAttribute(attrKey, attributes[attrKey]); }); if (typeof textContent !== 'undefined') { - subContainer.textContent = textContent; + subContainer.innerHTML = textContent; } getDomElement(container).appendChild(subContainer); @@ -97,7 +97,7 @@ export const generateNewDOM = (container, tagName, attrs, textContent) => { } if (textContent) { - newElement.textContent = textContent; + newElement.innerHTML = textContent; } if (container) { From 83fbc1c04153fac292fe32fdb963fd2166be96dd Mon Sep 17 00:00:00 2001 From: Michael Flucher Date: Tue, 15 Dec 2020 21:10:41 +0100 Subject: [PATCH 2/2] BLOCKS-228 fix tests for new icon tabs [MF] --- .vscode/launch.json | 2 +- test/jsunit/msg/msg.test.js | 122 ++++++++++++++++++++++-------------- 2 files changed, 75 insertions(+), 49 deletions(-) diff --git a/.vscode/launch.json b/.vscode/launch.json index d3b762e4..200c2a5b 100644 --- a/.vscode/launch.json +++ b/.vscode/launch.json @@ -11,7 +11,7 @@ "url": "http://localhost:8080", "webRoot": "${workspaceFolder}", "sourceMapPathOverrides": { - "webpack://CatBlocks/./*": "${workspaceFolder}/*" + "webpack:///./*": "${workspaceFolder}/*" } }, { diff --git a/test/jsunit/msg/msg.test.js b/test/jsunit/msg/msg.test.js index 7d8b64e9..d3e97314 100644 --- a/test/jsunit/msg/msg.test.js +++ b/test/jsunit/msg/msg.test.js @@ -1,7 +1,7 @@ /** * @description Msg tests */ -/* global share, shareUtils, page, SERVER, playground, playgroundWS, toolboxWS, Blockly */ +/* global share, page, SERVER, playground, playgroundWS, toolboxWS, Blockly */ /* eslint no-global-assign:0 */ 'use strict'; @@ -201,19 +201,23 @@ describe('share displays language of UI elements correctly', () => { const defaultLanguageObject = JSON.parse( utils.readFileSync(`${utils.PATHS.CATBLOCKS_MSGS}${defaultLanguage}.json`) ); - await page.evaluate(defaultLanguage => { - return Blockly.CatblocksMsgs.setLocale(defaultLanguage); + await page.evaluate(pDefaultLanguage => { + return Blockly.CatblocksMsgs.setLocale(pDefaultLanguage); }, defaultLanguage); - expect(await executeShareLanguageUITest(defaultLanguageObject)).toBeTruthy(); + + const result = await executeShareLanguageUITest(defaultLanguageObject); + expect(result).toBeTruthy(); }); test('check >de< language of tabs and error messages of scripts, looks and sounds', async () => { const testLanguage = 'de'; const testLanguageObject = JSON.parse(utils.readFileSync(`${utils.PATHS.CATBLOCKS_MSGS}${testLanguage}.json`)); - await page.evaluate(testLanguage => { - return Blockly.CatblocksMsgs.setLocale(testLanguage); + await page.evaluate(pTestLanguage => { + return Blockly.CatblocksMsgs.setLocale(pTestLanguage); }, testLanguage); - expect(await executeShareLanguageUITest(testLanguageObject)).toBeTruthy(); + + const result = await executeShareLanguageUITest(testLanguageObject); + expect(result).toBeTruthy(); }); test('check if unknown >es_US< language is handled as >es<', async () => { @@ -222,10 +226,12 @@ describe('share displays language of UI elements correctly', () => { const fallbackLanguageObject = JSON.parse( utils.readFileSync(`${utils.PATHS.CATBLOCKS_MSGS}${fallbackLanguage}.json`) ); - await page.evaluate(testLanguage => { - return Blockly.CatblocksMsgs.setLocale(testLanguage); + await page.evaluate(pTestLanguage => { + return Blockly.CatblocksMsgs.setLocale(pTestLanguage); }, testLanguage); - expect(await executeShareLanguageUITest(fallbackLanguageObject)).toBeTruthy(); + + const result = await executeShareLanguageUITest(fallbackLanguageObject); + expect(result).toBeTruthy(); }); test('check if invalid >de_XY< language is handled as >de<', async () => { @@ -234,10 +240,12 @@ describe('share displays language of UI elements correctly', () => { const fallbackLanguageObject = JSON.parse( utils.readFileSync(`${utils.PATHS.CATBLOCKS_MSGS}${fallbackLanguage}.json`) ); - await page.evaluate(testLanguage => { - return Blockly.CatblocksMsgs.setLocale(testLanguage); + await page.evaluate(pTestLanguage => { + return Blockly.CatblocksMsgs.setLocale(pTestLanguage); }, testLanguage); - expect(await executeShareLanguageUITest(fallbackLanguageObject)).toBeTruthy(); + + const result = await executeShareLanguageUITest(fallbackLanguageObject); + expect(result).toBeTruthy(); }); test('check if >xy_za< language is handled as default >en<', async () => { @@ -246,45 +254,63 @@ describe('share displays language of UI elements correctly', () => { const fallbackLanguageObject = JSON.parse( utils.readFileSync(`${utils.PATHS.CATBLOCKS_MSGS}${fallbackLanguage}.json`) ); - await page.evaluate(testLanguage => { - return Blockly.CatblocksMsgs.setLocale(testLanguage); + await page.evaluate(pTestLanguage => { + return Blockly.CatblocksMsgs.setLocale(pTestLanguage); }, testLanguage); - expect(await executeShareLanguageUITest(fallbackLanguageObject)).toBeTruthy(); + + const result = await executeShareLanguageUITest(fallbackLanguageObject); + expect(result).toBeTruthy(); }); async function executeShareLanguageUITest(languageObject) { - return await page.evaluate(languageObject => { + const catObj = { + scenes: [ + { + name: 'testscene', + objectList: [ + { + name: 'tobject', + scriptList: [ + { + name: 'StartScript', + brickList: [ + { + name: 'WaitBrick', + loopOrIfBrickList: [], + elseBrickList: [], + formValues: {}, + colorVariation: 0 + }, + { + name: 'SceneStartBrick', + loopOrIfBrickList: [], + elseBrickList: [], + formValues: {}, + colorVariation: 0 + } + ], + formValues: {} + } + ] + } + ] + } + ] + }; + + await page.evaluate(pObj => { const shareTestContainer = document.getElementById('shareprogs'); - const xmlString = ``; - const catXml = new DOMParser().parseFromString(xmlString, 'text/xml'); - const catObj = { - scenes: [ - { - name: 'tscene', - objectList: [ - { - name: 'toobject' - } - ] - } - ] - }; - share.renderProgramJSON('programID', shareTestContainer, catObj, catXml); - const obj1ID = shareUtils.generateID('programID-tscene-toobject'); - const scriptsText = shareTestContainer.querySelector('#' + obj1ID + '-scripts').textContent; - const scriptsTabText = shareTestContainer.querySelector('#' + obj1ID + '-scripts-tab').textContent; - const looksText = shareTestContainer.querySelector('#' + obj1ID + '-looks').textContent; - const looksTabText = shareTestContainer.querySelector('#' + obj1ID + '-looks-tab').textContent; - const soundsText = shareTestContainer.querySelector('#' + obj1ID + '-sounds').textContent; - const soundsTabText = shareTestContainer.querySelector('#' + obj1ID + '-sounds-tab').textContent; - return ( - scriptsTabText.includes(languageObject['SCRIPTS']) && - scriptsText.includes(languageObject['SCRIPTS']) && - looksTabText.includes(languageObject['LOOKS']) && - looksText.includes(languageObject['LOOKS']) && - soundsTabText.includes(languageObject['SOUNDS']) && - soundsText.includes(languageObject['SOUNDS']) - ); - }, languageObject); + share.renderProgramJSON('programID', shareTestContainer, pObj); + }, catObj); + + let startBrickTextContent = await page.$eval( + '.catblocks-script-container svg .blocklyText', + node => node.textContent + ); + + // nbsp to space + startBrickTextContent = startBrickTextContent.replace(new RegExp(String.fromCharCode(160), 'g'), ' '); + + return startBrickTextContent == languageObject['EVENT_WHENSCENESTARTS']; } });