New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: 🍰 Post Editor Legend #4492

Merged

Tirokk merged 10 commits into master from 3673_post_editor_legend

Jul 19, 2021

Contributor

Blargian commented Jun 22, 2021 •

edited by Tirokk

Loading

🍰 Pullrequest

Added a new component called MenuLegend (adapted the content menu component) with localised content for Deutsch, English and Russian. The legend displays when the user hovers over it (desktop) or when the user clicks on the button (mobile/tablet).

Issues

fixes #3673

Todo

Add a component for the menu legend
Add a question-mark icon on the editor menu
Display it on hover rather than on click
Make it multilingual
Make it responsive
Fix failing tests

Blargian added 3 commits

June 9, 2021 20:41


          🚧 added basic legend component

514e7ff


          Created editor legend component

906de07


          display legend on click

e493a4d

Tirokk changed the title ~~[WIP] - 3673 post editor legend~~ feat: [WIP] 🍰 Post Editor Legend

Tirokk marked this pull request as draft

June 23, 2021 13:42

Tirokk assigned Blargian

Tirokk added feature features:comment features:post service: webapp labels

Tirokk reviewed

View reviewed changes

package.json Outdated

Comment on lines 52 to 54

+                },
+                "dependencies": {
+                  "jq": "^1.7.2"

Member

Tirokk Jun 23, 2021 •

edited

Loading

I don’t understand where all the new dependencies are coming from, because you didn’t invent anything new, as far I can see …
Here and the others below … 👇🏼

Any ideas? @Blargian @Mogge

Contributor Author

Blargian Jun 24, 2021

@Tirokk this one @Mogge said I would need when he helped me get the dev environment setup. It's required for implementing multilanguage support or for testing related to that. 😃

Member

Tirokk Jun 24, 2021

Hey @Mogge , isn’t this needed for the webapp only? And not for the main folder … 🤔

Contributor

Mogge Jun 27, 2021 •

edited

Loading

It runs over the scripts folder in the main folder. So I guess it is right there. We have to see what happens when running yarn locales.

Tirokk reviewed

View reviewed changes

webapp/components/Editor/MenuBar.vue Outdated

Comment on lines 74 to 76

+                data() {
+                  return {}
+                },

Member

Tirokk Jun 23, 2021

In case it is empty you can leave it away, I guess. @Blargian 👍🏼

Tirokk reviewed

View reviewed changes

yarn.lock Outdated

Comment on lines 1720 to 1726

+              bindings@^1.2.1:
+                version "1.5.0"
+                resolved "https://registry.yarnpkg.com/bindings/-/bindings-1.5.0.tgz#10353c9e945334bc0511a6d90b38fbc7c9c504df"
+                integrity sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==
+                dependencies:
+                  file-uri-to-path "1.0.0"

Member

Tirokk Jun 23, 2021 •

edited

Loading

same same ☝🏼

Member

Tirokk commented Jun 23, 2021 •

edited

Loading

Hey @Blargian !

This looks quite nice for a start. 🤗😍
And for a VueJS beginner … 👍🏼
So I’m looking forward to see it developing …

I have left you little hints …

Blargian added 2 commits

June 24, 2021 21:10


          localisation in progress

7a6b856


          fixed rendering issue

651e578

Mogge reviewed

View reviewed changes

webapp/components/Editor/MenuLegend.vue Outdated

+                  return {
+                    hover: false,
+                    legenditems: [
+                      { iconname: 'bold', name: 'bold', shortcut: 'Ctrl+b' },

Contributor

Mogge Jun 27, 2021 •

edited

Loading

Fett

Mogge reviewed

View reviewed changes

webapp/components/Editor/MenuLegend.vue Outdated

+                    hover: false,
+                    legenditems: [
+                      { iconname: 'bold', name: 'bold', shortcut: 'Ctrl+b' },
+                      { iconname: 'italic', name: 'italic', shortcut: 'Ctrl+i' },

Contributor

Mogge Jun 27, 2021 •

edited

Loading

Kursiv

Mogge reviewed

View reviewed changes

webapp/components/Editor/MenuLegend.vue Outdated

+                      { iconname: 'bold', name: 'bold', shortcut: 'Ctrl+b' },
+                      { iconname: 'italic', name: 'italic', shortcut: 'Ctrl+i' },
+                      { iconname: 'underline', name: 'underline', shortcut: 'Ctrl+u' },
+                      { iconname: 'link', name: 'link', shortcut: '' },

Contributor

Mogge Jun 27, 2021

Unterstrichen

Mogge reviewed

View reviewed changes

webapp/components/Editor/MenuLegend.vue Outdated

+                      { iconname: 'italic', name: 'italic', shortcut: 'Ctrl+i' },
+                      { iconname: 'underline', name: 'underline', shortcut: 'Ctrl+u' },
+                      { iconname: 'link', name: 'link', shortcut: '' },
+                      { iconname: 'paragraph', name: 'paragraph', shortcut: '' },

Contributor

Mogge Jun 27, 2021

Absatz

Mogge reviewed

View reviewed changes

webapp/components/Editor/MenuLegend.vue Outdated

+                      { iconname: 'underline', name: 'underline', shortcut: 'Ctrl+u' },
+                      { iconname: 'link', name: 'link', shortcut: '' },
+                      { iconname: 'paragraph', name: 'paragraph', shortcut: '' },
+                      { label: 'H3', name: 'heading 3', shortcut: '### + space' },

Contributor

Mogge Jun 27, 2021

Überschrift 3

Mogge reviewed

View reviewed changes

webapp/components/Editor/MenuLegend.vue Outdated

+                      { iconname: 'link', name: 'link', shortcut: '' },
+                      { iconname: 'paragraph', name: 'paragraph', shortcut: '' },
+                      { label: 'H3', name: 'heading 3', shortcut: '### + space' },
+                      { label: 'H4', name: 'heading 4', shortcut: '#### + space' },

Contributor

Mogge Jun 27, 2021

Überschrift 4

Mogge reviewed

View reviewed changes

webapp/components/Editor/MenuLegend.vue Outdated

+                      { iconname: 'paragraph', name: 'paragraph', shortcut: '' },
+                      { label: 'H3', name: 'heading 3', shortcut: '### + space' },
+                      { label: 'H4', name: 'heading 4', shortcut: '#### + space' },
+                      { iconname: 'list-ul', name: 'unordered list', shortcut: '* + space' },

Contributor

Mogge Jun 27, 2021

Ungeordnete Liste

Mogge reviewed

View reviewed changes

webapp/components/Editor/MenuLegend.vue Outdated

+                      { label: 'H3', name: 'heading 3', shortcut: '### + space' },
+                      { label: 'H4', name: 'heading 4', shortcut: '#### + space' },
+                      { iconname: 'list-ul', name: 'unordered list', shortcut: '* + space' },
+                      { iconname: 'list-ol', name: 'ordered list', shortcut: '1. + space' },

Contributor

Mogge Jun 27, 2021

Geordnete Liste

Mogge reviewed

View reviewed changes

webapp/components/Editor/MenuLegend.vue Outdated

+                      { label: 'H4', name: 'heading 4', shortcut: '#### + space' },
+                      { iconname: 'list-ul', name: 'unordered list', shortcut: '* + space' },
+                      { iconname: 'list-ol', name: 'ordered list', shortcut: '1. + space' },
+                      { iconname: 'quote-right', name: 'quote', shortcut: '> + space' },

Contributor

Mogge Jun 27, 2021

Zitat

Contributor Author

Blargian Jun 27, 2021 •

edited

Loading

I gave you the German translations for the legend. What happens, if you run yarn locales --fix in the webapp folder?

Thanks for the German translations! yarn locales --fix runs two scripts in scripts/translations, they both result in "jq: command not found". I tried removing jq from the main package.json file and adding the dependency just to the webapp but it gives the same message. An empty [].json file gets added to the locales.

I was able to sort the locales by running sh sort.sh --fix from within scripts/translations. Doing the same for missing-keys.sh gives an error:

missing-keys.sh: eval: line 10: syntax error near unexpected token (' missing-keys.sh: eval: line 10: diff -q <( jq -f ./../../scripts/translations/sort_filter.jq ./../../webapp/locales/en.json | jq
-c 'path(..)|[.[]|tostring]|join(".")' ) <( jq -f ./../../scripts/translations/sort_filter.jq ./../../webapp/locales/de.json | jq
-c 'path(..)|[.[]|tostring]|join(".")' )'

Member

ulfgebhardt Jun 27, 2021

Could this be related? https://github.com/Ocelot-Social-Community/Ocelot-Social/blob/master/.github/workflows/test.yml#L25
I am not sure about all those translation tools & checks, but we have two scripts executed in our test workflow.
@Mogge

Mogge reviewed

View reviewed changes

webapp/components/Editor/MenuLegend.vue Outdated

+                      { iconname: 'list-ul', name: 'unordered list', shortcut: '* + space' },
+                      { iconname: 'list-ol', name: 'ordered list', shortcut: '1. + space' },
+                      { iconname: 'quote-right', name: 'quote', shortcut: '> + space' },
+                      { iconname: 'minus', name: 'ruler', shortcut: '---' },

Contributor

Mogge Jun 27, 2021

Linie

Mogge reviewed

View reviewed changes

Contributor

Mogge left a comment

I gave you the German translations for the legend. What happens, if you run yarn locales --fix in the webapp folder?

Blargian added 2 commits

June 27, 2021 11:58


          added localization and on hover

fea734c


          sort locales

8e66f1e

ulfgebhardt added this to the 🏃 21/06 June milestone

Contributor Author

Blargian commented Jun 27, 2021 •

edited

Loading

I pushed now the changes so that the legend displays when the user hovers over it. It is also now localised for English, Deutsch and Russian so I think the functionality is all there now. I'm getting some tests failing however - one of the backend unit tests and one of the cyprus tests.

Blargian added 2 commits

June 30, 2021 13:23


          fix for failing cypress test @ Report a post from various pages

646b7d2


          tests failing - try remove added dependency

77245dc

Blargian requested a review from Tirokk

June 30, 2021 12:29

Contributor Author

Blargian commented Jun 30, 2021

Hi @Tirokk, I fixed up one issue which was causing a cypress test to fail. Also removed jq as a dependency all together as it also seemed to be causing some tests to fail.

Blargian marked this pull request as ready for review

June 30, 2021 12:31

Tirokk requested review from ulfgebhardt and Mogge

June 30, 2021 13:04

Tirokk changed the title ~~feat: [WIP] 🍰 Post Editor Legend~~ feat: 🍰 Post Editor Legend

ulfgebhardt modified the milestones: 🏃 21/06 June, 🏃 21/07 July


          Change minor design and text issues

fdf14b2

- Remove the split line under the last list item.
- Enter spaces.
- Partial swapping of upper and lower case letters.

Tirokk approved these changes

View reviewed changes

Member

Tirokk left a comment •

edited

Loading

Hey @Blargian ,

I’m back from holidays 🏝 and have reviewed your PR.
Thanks for your patience and sorry for the delay! 🙏🏼

You did a really great job. Very cool 😍🚀💫💫

I have taken the liberty of changing a few small things that I noticed. Nothing serious. 👍🏼
Hope that’s okay for you?

Please merge, if the tests are successful! 🥰

PS: Please let me know if you like to care for those things for your own in the future.

Member

Tirokk commented Jul 19, 2021

Hey dear @Blargian ,
then I merge your PR into our code base. 😍

Tirokk merged commit e77848a into master

Tirokk deleted the 3673_post_editor_legend branch

July 19, 2021 08:52

Contributor Author

Blargian commented Jul 19, 2021

Hi @Tirokk! Sorry for not replying. I saw your message and then got a bit busy and forgot to respond. Of course I don't mind for you to make some changes. 🤗 Thank you

Member

Tirokk commented Jul 20, 2021 •

edited

Loading

There is an console warning I and @Blargian have overseen: #3673 (comment)

I try to fix this …

sushidave mentioned this pull request

🚀 [Feature] Explain Editor Icons with a hover/mouseover (Tooltip) #1950

Open

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

feature features:comment features:post service: webapp