Detailed UI overview
Let's see exactly what every single UI element does!
By now we have a good idea of how the main functionalities work and how to use them. If that's not the case, please visit the Introduction page to get started.
However, the FlyCode extension provides many different functionalities which can improve your experience and accelerate your work. Let's categorize them by where they can be found and take a deeper look!
Using the show/hide button visible below, you can expand or collapse the Panel at any point:
Panel show/hide button
You might prefer to have the Menu in a different place, luckily when clicking and holding the FlyCode logo (indicated by the drag icon) you can move it up and down. Next time you open extension, the Menu will be in wherever you left it.
Menu drag indicator, hold the FlyCode logo to move it.
If the placement of Panel leaves you unsatisfied, you can use the Panel toggle button which will move the Panel to the other side of your screen. This will also move the Menu, as it's always stuck to the Panel. Next time you open the extension, remember where you left the Panel .
☺
Panel (side) toggle button.
Whenever needed, you can visit your App in FlyCode with just this one simple button:
Visit FlyCode button.
Just make sure to not hit the 
, as this will close the extension!
When editing texts in the Panel, FlyCode extension provides the same experience as the FlyCode platform - we've made sure of it. That's why we'll only go briefly through these features.
In the screenshot below you can see:
- 1.Search input used to filter texts (or their keys) by a given query
- 2.Button to show sorting options
- 3.Button to show filtering options
- 4.Sorting menu – you can choose what to sort by and in what order
Finally, there's also the filtering menu which allows you to choose texts only with a certain status or editor.
Filtering and sorting of texts, sorting menu.
A single text contains a few options known from the FlyCode platform, but also a new one.
- 1.Find the text on the page – this allows you to better understand what text is it. See below for more details.
- 2.Option to view previous version of this text.
- 3.Editor avatar which when hovered over will display a bit more details about the editor.
Anatomy of a text.
When viewing previous version of a text, another button pops out. This is the revert button, which will allow you to completely reset the text content to what it originally was.
Original value + option to revert current draft.
Finding text on the page is tricky and may not work as you expected, so we decided to say a bit more about this feature.
Each time you search for a text, you will see a toast which indicates whether the text was found:
Successful toast after looking for a text.
or not:
Better luck next time!
If the text could not be found, you are currently browsing All texts. Every single text from the Current Page texts should be successfully found. Unfortunately that does not mean you will see it.
If your page automatically scrolled to a certain text – that's exactly what it should do! Otherwise, this means the text you are looking for is always on the screen, contained in a fixed element such as a navbar, a side menu, maybe a menu in the navbar which is visible only if you click or hover a trigger.
🎉
One more edge case is finding multiple elements. This will happen if you searched for a repeating text and it was found in many places across the current page. You will not be scrolled anywhere, because, well, there are multiple results.
Current page contains more than one such text.
In some cases you will see a screen which informs you that the current URL is not "connected" to any of your FlyCode apps. Notice the "Connected Domains" part. In there you can navigate to your other connected URLs. This will automatically open the extension after navigation is done.
"Connect current page to an App" screen.
If you see this screen and aren't sure what to do, it's a good idea to visit the connecting-current-website-with-an-application paragraph, or the Getting started page.
In some cases you will also see a purple text above the "Connect" button. This text is an indication, that the currently selected application is already connected to another URL. You are still able to "overwrite" that connection with a new one, but the previous URL will no longer be usable.
Warning about existing connection (association).
The Action Bar for texts with a 'Live' status is pretty boring, it only contains the status information and potentially the latest editor. You can notice that there is an option to Find text, when using it in the Action Bar, it will look for the text in Panel.
Action Bar for Live text.
However, when viewing the Action Bar of a draft, we have options to view the original text as well as to revert the text to its original value.
Action Bar for Draft text.