Unfortunately, many things in Thunkable IDE are inconvenient to work with and we can’t fix them, but some things can be fixed if you change the style of elements.
For example, in block editing mode, I am constantly annoyed that tabs with screen names need to be constantly scrolled and it is impossible to search for them. What to do? You need to expand the area of tabs with screen names. For this:
in the browser, press F12 to display the toolbar
Select the tab that displays the HTML code of the page
in the search field, enter the line “ant-tabs ant-tabs-top ant-tabs-line”
in the style window of the found element, disable the max-width:600px property - all screen names will be displayed in the row. But when you switch to design mode, the working field becomes huge. To reduce it, look for an element with the “preview-container” class and set its width, for example, 800px
When you restart, the styles will return to the default and you will have to change them again - which is the main drawback of this method.
Similarly, you can change the dimensions and parameters of other elements.
If you have any ideas about how to prevent the lag when there are a lot of blocks, it would be very helpful.
This lag also appears when you want an App/Stored/Cloud Variable - but, since you suggested me earlier to use function parameters as variables, it works great
Using the Stylish plugin, I managed to significantly improve the interface. Unfortunately, I was not able to make another important improvement - move all the components from the Advanced tab to the Simple tab. Unfortunately, the script is used here, not the styles, which does not allow this transfer.
Now my interface looks like this (the script is given below and you can configure it on your own).
Hi @actech - thank you for sharing this feedback with us, it’s really helpful and also very well timed.
As you’ve no doubt noticed, the default properties for a number of components were updated last week. This is the first part of a bigger (and more time consuming!) effort we’ve started to improve the UI/UX of Thunkable X.
I completely understand where you are coming from, and given how complex your projects are in particular I get why this must be frustrating.
I think the main reason we haven’t heard this feedback before is that for the vast majority of our users, their projects only tend to have 4 or 5 screens. When users have too many screens it’s generally because they should be creating dynamic apps, but are just duplicating screens/layout instead.
I know that you group lots of (very helpful!) examples in one project, so it must get frustrating when you want to share a particular example with someone.
I don’t see any fix for this in the short term, by in the meantime, perhaps a spreadsheet, or a page on your website could be set up for each screen/example. Even better would be to have a short #thunkable-cross-tutorials page, (with remix link) for the most popular ones, and these could then be shared in the community?
This is a really interesting work around - thanks for sharing!
I was surprised why this idea of improving the interface came only now. Stylish is a great tool that I can now use to work in a user-friendly interface.
Each user has different monitors and display options, so I gave an example for a 20-inch monitor with a resolution of 1600*900. If someone is willing to post settings for other monitors and parameters, it will be great. Then users can choose a more appropriate configuration for them.
If someone doesn’t fully understand this idea, then it sounds like this: with the help of Stylish, you can create your own styles (or even more than one) for any site and save them. After that, when loading this site, the styles are automatically loaded and you do not need to re-configure anything. Stylish can be quickly enabled and disabled.
With stylish, @actech, you suggest that we could then develop for an ipad screen or for a screen of any dimensions because we can manipulate the size of the design screen. Is that correct or have I misread your previous posts?
I found how to manipulate these settings in chrome. I can change the pixel size of the designer. I wonder if the translates into a truest bigger screen layout or just a stretched layout
Browser plug-ins that allow you to use Javascript for this purpose give you even more opportunities to configure the interface. One of these plugins is Greasemonkey.
As an example, here is a script for switching the Design and Block modes using the Alt+Q and Alt+W hotkeys.
// ==UserScript==
// @name Thunkable
// @version 1
// @grant none
// ==/UserScript==
//@include https://x.thunkable.com/projects/
function findControl(name){
let _tabList = document.querySelectorAll('.tab');
for (let i of _tabList){
if ( i.innerHTML == name){
return i;
}
}
return null;
}
document.addEventListener('keydown', function(event) {
if (event.altKey || event.metaKey) {
if (event.code == 'KeyW'){
let _el = findControl('Blocks');
if (_el){
_el.click();
}
} else if (event.code == 'KeyQ'){
let _el = findControl('Design');
if (_el){
_el.click();
}
}
}
});
