Editor
Where you can see and interact with all your texts!
Welcome to your App page. Here, you can view, edit, label and sort your texts (and more!). This is what it looks like:
Vader's Cool Startup's App page
Let's learn how to master the tools available to us here! But first, a quick bird's eye view of the page:
Depending on your text resource format, the texts table's format also varies, but the grand theme remains the same. The title of each text (or text group) is in the dark grey bars (in the example above they'll be
layout/header and src/index). They're determined differently according to the resources' format - if the format is hardcoded like in the example above, the title would be directory/component . In case the format is that of a JSON, the title will be the name of the text's key.Under the title, you'll find the texts themselves. Each text has a status symbol:
- Grey: the text is live and in your code.
- Orange: the text is a draft - it was edited but the implementing the new change was not yet requested.
- Red: the text is pending merge - it was edited and a request to implement it was made.
Texts with the same keys over different JSONs will be grouped together under a single title - this is what we'll refer to as a text group.
Then, we have the text's language - if detected.
Next to each text there is a pencil icon, which when clicked allows us to edit the text.
At the top of the page we have a search bar and different filters.
If the texts are not hardcoded (for example in a JSON) you'll find at the far end of each title an
Add labels button which allows us to add labels, or if we already have labels they will display instead of the button.We can use this labels tool to group different texts together, or unite them with a common theme, using different labels for each text group. To add a new label to a group, click the
Add labels button at the far right of the title bar. A text field will open, where you can write your new label. Once you enter a label, it will be saved and become available for reuse across all texts. Once you're satisfied with the label you've entered, press enter or click the label to add it. Now you can add more labels if you want to, or close the popup by simply clicking anywhere else.If you wish to remove a label, click on it to open the labels popup, and click the little
x in the label to remove it. Don't worry, it'll only remove it from the selected text, not from anywhere else it's used.Now you can filter by your different labels using the filter bar at the top of the table!
Add label button & a label
To edit a text, click the pencil icon next to it. The text will become a text field where you can edit it, with a check button for when you finished and a cancel button in case you changed your mind.
Once you're satisfied with the updated text, click the check icon ( ) or press cmd+enter (mac) or ctrl+enter (windows) to save the text. Now the text was saved as a draft, as indicated by the updated status circle to its left, which now turned orange.
✔
You'll also notice your avatar displayed at the far right of the text, indicating that you were the last person to updated this text.
To some teammates the context of a text (it's location in the app, component, page...) may be very clear, while to others not as much. This is why FlyCode enables users to add a description of the context of each text. This can be done via the context editor right next to the labels editor:
After saving a newly edited text to a draft, you need to first review it before implementing it to your project's code by clicking the
Review Drafts button at the top right:
Review drafts button
When you click the button, a popup will open:
Review drafts popup
Here we can see a few things. Firstly, we can see the amounts of changes made - this is the amount of drafts that are currently in the app, whether you did those changes or someone else in your team. The second item here is the editors' avatars next to each change- these are the avatars of whoever edited each draft. We also have checkboxes next to each draft - we can select which changes we want to request: you can implement different changes in different iterations. The last item we have here is the description text field - here, you can input a message describing what it is you're changing (or why, or whatever you see fit). This message will display in the GitHub Pull Request that will be created, and it will be associated with these specific changes.
Once you're satisfied and ready to request those changes, click on the
Request Changes button.This will automatically create a GitHub Pull Request for the developers in your team to approve and implement into the code. You will also have a link to the Pull Request right next to the
Request changes popup button:
Review drafts with PR link
Last modified 5mo ago