How can I implement CSS transition effects with Tailwind when toggling the invisible property? - css-transitions

I am using TailwindUI for a landing page, and it includes a drop down menu that, when uncollapsed, looks like this:
Right now, I make the menu appear when the "Solutions" link is clicked with some very simple in-line JavaScript that toggles the invisible property. The code looks something like this:
script.
function closeMenu() {
document.getElementById('buttonMenu').classList.toggle("invisible");
}
I would like to know how I can implement transition effects that would make the toggling of the menu appear less abrupt. The following settings are recommended in by TailwindUI:
//
'Solutions' flyout menu, show/hide based on flyout menu state.
Entering: "transition ease-out duration-200"
From: "opacity-0 translate-y-1"
To: "opacity-100 translate-y-0"
Leaving: "transition ease-in duration-150"
From: "opacity-100 translate-y-0"
To: "opacity-0 translate-y-1"
What's the best way to go about doing this?

Related

Ember JS Change the color and title of a button component when a date is picked from date-picker

I have a web app in which there are two components - date picker and button.
When I select a date from date-picker, the button's title and color should change.
This is my hbs code where two components are given:
{{bootstrap-datepicker value=expiresAt todayHighlight=true todayBtn=true startDate=startDate changeDate="changeDateAction" autoclose=true}}
{{button-custom title="Previous Date" startDate=startDate status=1 id="button1"}}
The button-custom is created by me.
When I select a date, the function in datepicker named changeDateAction() will be called. I have a function in button component's controller, named changeValues() which when called will do my task.
How can I call changeValues() (which is in button-custom.js) from changeDateAction() which is in another file?
Please be as simple as possible as I'm beginner in Ember JS. Thanks in advance.
It seems like you'd like to inform a component (button-custom) about a change in a sibling component (bootstrap-datepicker). You've already set up an action handler (changeDateAction) that informs the parent component/controller about the change. In order to propagate that change to button-custom, I'd suggest to just pass the effect you'd like to achieve down to it:
{{bootstrap-datepicker changeDate="changeDateAction" (...)}}
{{button-custom title=title color=color (...)}}
Like this, you can control the appearance of the button from the outside by modifying title and color. Like that, the logic is moved to the parent component/controller, and the button component becomes a "dumb" presentational component.
The basic concept behind this is called "Data down, Actions up" (DDAU), and i'd highly recommend to read up on it (for example here if you're learning Ember!

MFC, Ribbons - CMFCRibbonButton with image: Always show the text

I've got an CMFCRibbonButton that displays a text and an icon. When I compact the ribbon, in the end only the small icon is shown.
Is there a way to tell the button not to get compacted into small icon state, but always show the text as well?
I tried pButton->SetCompactMode(FALSE); without success.
To be sure, CMFCRibbonButton::SetAlwaysLargeImage() is not what you are looking for? I ask, because when only an icon without text is displayed, it is usually the panel the button sits in that has collapsed. See CMFCRibbonPanel::IsCollapsed(). If you want to modify the behavior of the panel so that it won't collape, you could try to subclass CMFCRibbonPanel and play with overrides. The MFC Ribbon is not completely documented but my best bet is CMFCRibbonPanel::IsFixedSize():
class CMyPanel : public CMFCRibbonPanel
{
...
BOOL IsFixedSize() const { return TRUE; }
...
}
If this doesn't work you have to see yourself what happens in NotifyControlCommand or OnUpdateCmdUI when the panel collapses and modify the behavior as needed.

Adding and localizing menu items in the main menu of a Qt application menubar

So first of all here is a screenshot of the said menu of Evernote, localized in French:
[]
As you can see, all the menu items in the main menu (by main menu I mean the one whose name is the application name, like here it is Evernote) are localized in French. There are lots of menu items which the Evernote app itself brings, like Évaluez Evernote pour Mac (Rate Evernote for Mac), Information du compte... (Account Info...), etc. Plus there are the standard OS X provided menu items like Quit Evernote, Preferences, etc which are also localized.
My questions:
How do I add a new item in this main menu? How to access this menu to add items?
How do I localize these items based on my app localization, both OS X provided default ones and the ones I add?
In the Evernote menu, everything seems to be localized except the Services menu option (the submenu options are however localized!)? Can't this be localized as well?
What I have tried:
fMenuBar = fMainWindow->menuBar();
fMenuFile = fMenuBar->addMenu(QObject::tr(qPrintable(String_Class::FileMenu))); //"File" in English, translated into other languages
fAboutAppAct = new QAction(QObject::tr(qPrintable(String_Class::About_App)), fMainWindow); //prints "About App", localized in all languages
fMenuFile->addAction(fAboutAppAct);
fAboutAppAct->setMenuRole(QAction::AboutRole); //otherwise it sits with the other file menu options in the File menu
//reset UI language slot, called whenver UI language is reset. It retranslates all strings in all menus, except this
void AppMenu::reTranslateUISlot()
{
fAboutAppAct->setText(QObject::tr(qPrintable(String_Class::About_App)));
}
Maybe you could reimplement in MainWindow or in AppMenu the changeEvent.
void MainWindow::changeEvent(QEvent *event)
{
if (event->type() == QEvent::LanguageChange) {
this->retranslateUi(this);
quickStart->retranslateUi(quickStart);
//etc...
} else {
QMainWindow::changeEvent(event);
}
}
You could force Widgets to retranslate themselves. But you need to have registered some QTranslator first.
For example, in the constructor of MainWindow (or in some config dialog) if it's possible to change language at runtime (what I've done in my software):
CustomizeOptionsDialog::CustomizeOptionsDialog(QWidget *parent)
: QDialog(parent, Qt::Tool)
{
// Load the language of the application
customTranslator.load(languages.value( SettingsPrivate::instance()->language()) );
// Translate standard buttons (OK, Cancel, ...)
defaultQtTranslator.load("qt_" + SettingsPrivate::instance()->language(), QLibraryInfo::location(QLibraryInfo::TranslationsPath));
QApplication::installTranslator(&customTranslator);
QApplication::installTranslator(&defaultQtTranslator);
}
Where language() returns "fr", "gb" or "cs" (initialized from a signal emitted when one has chosen a new language in options).
/** Change language at runtime. */
void CustomizeOptionsDialog::changeLanguage(const QString &language)
{
QString lang = languages.value(language);
SettingsPrivate *settings = SettingsPrivate::instance();
// If the language is successfully loaded, tells every widget that they need to be redisplayed
if (!lang.isEmpty() && lang != settings->language() && customTranslator.load(lang)) {
settings->setLanguage(language);
defaultQtTranslator.load("qt_" + lang, QLibraryInfo::location(QLibraryInfo::TranslationsPath));
QApplication::installTranslator(&customTranslator);
/// TODO: reload plugin UI
QApplication::installTranslator(&defaultQtTranslator);
} else {
labelStatusLanguage->setText(tr("No translation is available for this language :("));
}
}
I hope it's helping.
I still haven't found the complete answer to my problems. But here some of the observations I have made over the last few days:
To be able to add menu items in the main menu, you have to set the menu role accordingly, i.e after adding it wherever you want to (it won't matter, because it will move out), you set the menu role like this:
fYourAction->setMenuRole(QAction::ApplicationSpecificRole);
This will add the menu item in the main menu. If you add more than item in this way, they will appear in the order in which you set their menu roles.
There are few specific roles Qt already provides - i.e for the About <app> item, Quit <app> item, Preferences... item, etc. They are mentioned here.
For example, if your action has a text "Foo", and you add it somewhere as a menu item, and set the role like
fFooAction->setMenuRole(QAction:: PreferencesRole);
then it will automatically move to the main menu and show as Preferences..., what text you actually put in the action will be immaterial. Whatever slot you have attached to it as a response to the triggered() signal will still fire correctly, though. Same goes for QAction::AboutRole as well, whatever text you add in that action, it will move to the main menu and show as About <your_app_name>.
The problem with QAction::AboutRole or QAction:: PreferencesRole is like I said, they won't localize even if you try. They will get localized only when the system locale changes, if you change it just within your app by installing a new translator, it won't change. The workaround? Avoid them and use QAction::ApplicationSpecificRole for all items you want to appear in the main menu. Then they will get properly localized as per your custom translator, and will respect whatever text you provide in the action, i.e if you give foo as text in the action, it will appear as foo in the main menu, and get localized accordingly. Again, mind you, when you are adding multiple items, set the role of the items in order of their appearance, i.e to simulate the Evernote menu above, first set the menu role for the about_app action, then the preferences action. Where you are adding them will be of no importance since they will be moved to a new menu, so the order in which you set the menu role for the items will determine the order in which they appear in the main menu.
The problem with the above approach is that I don't know how to insert separators between the items I am adding in the main menu. It is easy to do that in the menus we add, since we have access to the menu object, but here we don't have access (we add the items somewhere else, and make them move to the main menu by setting the menu role), so I don't know yet how to add multiple separators in the main menu.

Qt wizard back button Ui issue

I'm new with Qt and I'm making a little application. I've do it with QWizard and QWizardPages.
I Have added 2 CustomButtons to the wizard so it has 5 buttons down: ButA, ButB, Back, Next/Finish, and Cancel.
ButA and ButB don't have to appear in all WizardPages. Eg:
WP0: just ButB
WP1: ButA and ButB
To do that, I have:
void WP0::initializePage()
{
wizard()->button(QWizard::CustomButton1)->setVisible(false);
}
With that when the app starts, you can't see butA. BUT if you go to the next page (where you see ButA and ButB) and then you click on BackButton, then you see ButA in WP0.
I supose that then you click on BackButton there is no call to WP0::initializePage() so my question is: how or where should I call that wizard()->button(QWizard::CustomButton1)->setVisible(false);
to never see ButA on WP0 ? Or what should I do?
I don't know if I understand your question completely. your description is kind of complicated. I think you should try button's events. It means you should call this function in press event or something like that and it's better that you define a boolean variable for true or false and call it by reference. I think this should solve your problem.

Touch Up Inside event not working after rotation of tab bar

I have a button in one of view controller of tab bar controller. All set up in storyboard. I registered action method like this
- (IBAction)buttonPressed:(id)sender {
NSLog(#"Button pressed");
}
The thing is that once I make left and top constraints (to force it stay in the right upper corner) touch up inside event stops working after I change rotation. So just open app in portrait mode - method is working. Change to landscape and I cannot tap button suddenly.
I've recreated problem in this easy example project.
Many thanks.
Just put the following code in you TabBarViewController class.
- (void)viewDidLayoutSubviews
{
// fix for iOS7 bug in UITabBarController
self.selectedViewController.view.superview.frame = self.view.bounds;
}
Recently I noticed same bug in my application. First I tried Slavco Petkovski method. But this caused me another bug with rotating and getting right bounds and frame, so I kept searching.
I found another solution for this problem, mainly setting autoresizing mask of view controller's view in xib. But since arrows in inspector in my Xcode (version 5.0.1) are inactive and you can't set them, you have to open xib file in text editor find autoresizingMask property for main view and change it like this:
<autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
EDIT:
Alternatively you can do this in your view controller's code - same result as in changes in xcode:
self.view.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;