Short version of question
How to apply defined in resource file QSS style to QWidget and QtQuick controls simultaneously?
Full version of question
There is some big project which is written using Qt. For customizing of appearance of controls is used Style Sheet defined in resource file. Now to the project added widget which use QtQuick control. By default control inherited from QWidget looks different with QtQuick controls. So question is: how to extend already existed StyleSheet on QtQuick controls with minimal changes of QtQuick code?
Example
Here is complete example for better describing of my question.
The project has following structure:
.
├── CMakeLists.txt
├── main.cpp
├── MainWidget.cpp
├── MainWidget.h
├── QtWidget.cpp
├── QtWidget.h
├── QuickWidget.cpp
├── QuickWidget.h
└── resources
├── resources.qrc
├── style.qss
└── widget.qml
MainWidget class defines (as expected) the main widget. At the begining MainWidget contains only one widget QtWidget which is inherited from QWidget. For customizing of appearance is used style sheet defined in resources/style.qss. Later QuickWidget class is added to the project. QuickWidget class v QtQuick control which is defined in file: resources/widget.qml. After building and launching application:
mkdir build
cd build
cmake ..
make
./qqcs
the following window will be displayed:
I'm using:
Qt 5.6;
KUbuntu 15.10;
Plasma Desctop.
Related
I have a vue- project with the following src directory tree
├── assets
| └── moderator
| └── css /* css styling for pages and components for moderators, e.g. everything is coloured blue*/
| └── user
| └── css /* css styling for pages and components for users, e.g. everything is coloured orage*/
├── components
| └── moderator /* here are the .vue components for moderators' views */
| └── user /* here are the .vue components for users' views*/
├── main.js
├── router.js
└── vue.config.js
The app will have two types of users :
Moderators
Users
Each type must have its own styling, components for users must use css-styles from assets/user/css, while moderators' from assets/user/css.
If I use scoped import, styling doesn't propagate on external components like those of Bootstrap.
So my questions:
How to set different styling for respective components so that moderator will have everything in blue, and user - in orange?
Is it possible to set style programmatically depending on routes, defined in router?
When you use Style in VueJS the css will render through all components. To use style only in the current component you need to uae scoped. This far you have done right, BUT! Bootstrap and other libraries mostly use components to represent their features so scoped will not work... But there is still a way! You can use >>> before the css you want to work in child-components. >>>b-corousel {color=red;}
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 3 years ago.
Improve this question
I want to use styled-components in my app and I am wondering how to organize it.
Basically styled-components are assigned to specific component for reusability.
But what about styled-components which I would like to use many times in other components (for example animations components)?
Should I create a file where I will keep these 'global' styled-components and import it to many components?
Is it good practice?
This is what most of my big production applications built with styled-components look like:
src
├── App
│ ├── Header
│ │ ├── Logo.js
│ │ ├── Title.js
│ │ ├── Subtitle.js
│ │ └── index.js
│ └── Footer
│ ├── List.js
│ ├── ListItem.js
│ ├── Wrapper.js
│ └── index.js
├── shared
│ ├── Button.js
│ ├── Card.js
│ ├── InfiniteList.js
│ ├── EmojiPicker
│ └── Icons
└── index.js
The App folder contains all the specific components that make up your bigger application. (you might structure that by route in your real app) Each of those bigger components is a folder with an index.js file and a bunch of styled components in individual files.
While I'm building my application and I notice I need a styled component from one bigger component in another bigger component, I drag its file to the shared/ folder, update all the imports and that's it! Over time shared/ becomes an improptu pattern library with all of the components I want/need to reuse throughout my entire app.
Another way that's fairly common is to have style.js files in the component folders which contains all of the styled components of that component. The upside being that you have less files that get in your way, but with the downside that it's harder to notice duplication and moving components into the shared folder is more work.
I personally use the first version more often than not, but that's probably just a matter of taste—try them both and see which one you like more!
You can also try Atomic Design to structure your app. This way you will be able to reuse your styled components. Based on Atomic Design methodology, you organize your components into atoms, molecules, organisms, pages and templates.
Atom
An atom is native html tag. For example, an Input element can be an Atom
const Input = props => <input {...props} />
Molecules
Group of atoms is a molecule. For example:
const Field = ({ label, ...inputProps }) => (
<Label>
{label}
<Input {...inputProps} />
</Label>
)
Organisms
Organism is a group of atoms, molecules and/or other organisms. For example:
const Form = (props) => (
<form {...props}>
<Field label="Name" type="text" />
<Field label="Email" type="email" />
</form>
)
Pages
A page is where you will put mostly organisms. For example:
const HomePage = () => (
<PageTemplate header={<Header />}>
<Form />
</PageTemplate>
)
Templates
A template is a layout to be used on pages. For example:
const PageTemplate = ({ header, children }) => (
<main>
{header && <div>{header}</div>}
{children}
</main>
)
Github example
There is a React starter project on Github that uses Atomic Design methodology with styled-components integration. Here is the Link.
The way i am organizing my Project with styled-component is the following:
src
├── Layout
│ ├── Header
│ │ ├── Logo.jsx
│ │ ├── styled.js
│ │ ├── container.js
│ │ └── index.js
│ └── LeftPanel
│ ├── LeftPanel.jsx
│ ├── styled.js
│ └── index.js
└── index.js
Reasoning:
Each folder is a feature.
Each file within a folder have a responsability.
.jsx represent a presentational component.
styled.js are styled components. Manage only how components look. Also any theme related file should be imported here, such as colors,borderStyles, etc.
container.js If we are using any state management we should have an artifact connecting our components with that library. In this case Redux.
index.js exports whatever is relevant.
The advantage that i see with this approach is that is pretty clear where changes have to be made if you decide to use another CSSinJS library.
Hope it make sense for someone else.
Cheers!
I'm writing a package with meteorjs and I use fourseven:scss and materializecss (scss version);
the folder structure of styles folder is the following:
|-- main.scss
|-- materialize
|-- materialize.scss
|-- components
| |-- prefixer.scss
| |-- (all others materialize css' components)
|-- myPlugin
|-- myPlugin.scss
main.scss uses
#import "materialize/materialize";
#import "myPlugin/myPlugin";
and myPlugin.scss uses
#import "../materialize/materialize";
but the app crashes on startup saying that components/prefixer file is not found (the source of error is the file myPlugin/myPlugin.scss);
If I put all css files in the same folder, I can get everything work but I'd like to keep things structured; does someone have some suggestions about how to solve this?
There is a problem with certain versions of that plugin if you follow this discussion it will lend some insight: https://github.com/meteoric/ionic-sass/issues/16
Try setting specific version of the package...
meteor add fourseven:scss#=3.2.0
And/Or, a fix I've been using for ages it seems is to comment out the problem includes until first build, and afterwords you can uncomment it and the build should work.
Hi I got a strange problem.
When I clicked three pages shown in the following three images
Step 1
controller welcome
Step 2
other controllers
Step 3, go back to the step1 view
controller welcome
The last image,
when I back to controller welcome from the other controllers
,that is step 2 to step 3.
The stylesheets were cached by the browser,
The step 3's layout is differ to step1 layout.
But they are the same page,How could it be, it seems the browser caches the css files ?
I add two assets folder used by the two layouts, in application.rb
config.assets.paths << "#{Rails.root}/vendor/themes"
themes
├── ace-admin-theme
│ ├── avatars
│ ├── css
│ ├── font
│ ├── images
│ ├── img
│ └── js
└── lenord-single-page-theme
├── css
├── fonts
├── img
├── index.html
├── js
└── rs-assets
Added the welcome.html.haml under layouts folder, so that welcome_controller can load this layout
layouts
├── _header.html.haml
├── application.html.haml
└── welcome.html.haml
All the source code I put here https://gist.github.com/poc7667/0198b973fce0fbf4dd26
Page A : OK
Page B : OK
Page A : Failed, the Page B's stylesheets are cached, it should be identical to original page A
It didn't work when I comment the data-turbolinks-track for the css
The strange phenomenon still occurs.
--- a/app/views/layouts/application.html.haml
+++ b/app/views/layouts/application.html.haml
## -2,7 +2,7 ##
%html
%head
%title VIVOTEK DQA DEVELOPER
- = stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true
+ = stylesheet_link_tag "application", media: "all"
= javascript_include_tag "application", "data-turbolinks-track" => true
/ Description, Keywords and Author
/ basic styles
diff --git a/app/views/layouts/welcome.html.haml b/app/views/layouts/welcome.html.haml
index 28d9c99..c3e6ec8 100644
--- a/app/views/layouts/welcome.html.haml
+++ b/app/views/layouts/welcome.html.haml
## -2,7 +2,7 ##
%html
%head
%title VIVOTEK DQA DEVELOPER
- = stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true
+ = stylesheet_link_tag "application", media: "all"
= javascript_include_tag "application", "data-turbolinks-track" => true
I open the firebug to see the included css files,
I found I need to reload the page to load the expected css files.
How to fix it ?
Update
When I reload page, the console showed those css files were loaded
Started GET "/assets/ace-admin-theme/css/bootstrap.min.css" for 127.0.0.1 at 2014-05-19 14:33:49 +0800
Started GET "/assets/ace-admin-theme/css/font-awesome.min.css" for 127.0.0.1 at 2014-05-19 14:33:49 +0800
When I click a hyperlink(by url helper) to other pages the css won't be load again.
But actually it should load the css files again, because some controllers use the different layout and assets.
But what's the worse is that if I click the link (generated by URLhelper) the problems happens
But if I go to the page by typing the URL on the browser manually, it works fine!!
To brief, the css files only load in the first time, and other necessary css files(for other layout) won't be load anymore.(If I view the page by clicking the URLHelperLink), but it works by manually type the URL on the browser (for example: localhost:3000/welcome, localhost:3000/urlcommands)
How could it be, it seems the browser caches the css files ?
Turbolinks
That might appear to be the case if you're using Turbolinks - which loads a new version of the <body> tag (leaving <head>). This would make your browser use the same CSS each request (where turbolinks is firing) problem would only be present if you're using the same layout
This may not be the problem (if you're changing layouts, the entire page will refresh)
A way to test this is to turn off turbolinks:
#app/views/layouts/application.html.erb
<%= stylesheet_link_tag "application", media: "all" %>
If you do this, Rails should refresh your whole page every time. This will allow you to see whether the styling will change each time
CSS
The other issue you may have is how you're calling your CSS. If you've got a different layout for step 3 - are you calling different CSS?
Personally, I would just use different styling for the different steps & incorporate them into the same spreadsheet.
Here's how I'd do it with SASS:
#app/assets/stylesheets/application.css.sass
.service
.step1
//styling
.step2
//styling
.step3
//styling
Update
I would say the issue here is likely to be your structure of your code with Turbolinks. I'm 90% sure the issue will be with Turbolinks (especially as you wrote you "need to refresh" the doc to make the CSS work)
Can you share your layouts & how you're calling them in your controllers?
Is there any way to add a popup (a closable window) with a warning or other message in Shiny - the R package I use to build my web application?
I have been searching for some time but without any results.
Although I don't think there is anything natively available in shiny, you can try adding jQueryUI to your application and using the Dialog widget. See http://jqueryui.com/dialog/.
(Un?)fortunately, you'll be forced to write some JavaScript to make it work.
Per #GSee's suggestion, here's a very minimal example of what it takes to make it work.
You'll need to download jQueryUI and set up a shiny project with a structure like so:
.
├── server.R
├── ui.R
└── www
├── css
│ └── jquery-ui.css
├── images
│ ├── animated-overlay.gif
│ ├── ui-bg_flat_0_aaaaaa_40x100.png
│ ├── ui-bg_flat_75_ffffff_40x100.png
│ ├── ui-bg_glass_55_fbf9ee_1x400.png
│ ├── ui-bg_glass_65_ffffff_1x400.png
│ ├── ui-bg_glass_75_dadada_1x400.png
│ ├── ui-bg_glass_75_e6e6e6_1x400.png
│ ├── ui-bg_glass_95_fef1ec_1x400.png
│ ├── ui-bg_highlight-soft_75_cccccc_1x100.png
│ ├── ui-icons_222222_256x240.png
│ ├── ui-icons_2e83ff_256x240.png
│ ├── ui-icons_454545_256x240.png
│ ├── ui-icons_888888_256x240.png
│ └── ui-icons_cd0a0a_256x240.png
└── js
└── jquery-ui.js
(all of the image icons come part of jQueryUI)
Next, add a file called scripts.js (or whatever you like) to the www/js folder, containing the following
$( function() {
$("#dialog").dialog();
})
This calls the jQueryUI dialog initializer on the element with id dialog.
Next, have a server.R and ui.R as follows:
server.R
--------
library(shiny)
shinyServer( function(input, output, session) {
## a very unsafe, basic access to the R console
output$dialog <- renderPrint({
code <- input$console
output <- eval( parse( text=code ) )
return(output)
})
})
and
ui.R
----
library(shiny)
shinyUI(bootstrapPage(
includeCSS("www/css/jquery-ui.css"),
includeScript("www/js/jquery-ui.js"),
includeScript("www/js/scripts.js"),
textInput("console", "Enter an R Command"),
uiOutput("dialog")
))
Now, if you do runApp(), you should see the results of evaluation of any code you write into the text input console appearing in the dialog box.
Now, the question is, how can we minimize it, or only show it when, say, error code is produced? That I'll have to leave for you, because I think it'll be tricky. Some options:
Figure out how to get our R code to send, or trigger, some JavaScript to show or hide the element. An example (not mine) using this to temporarily disable a button is here.
Attach a (JavaScript) observer or trigger to the output produced, and if you see an error (or output otherwise conforming in some way), show the box; otherwise hide it.
Generate an actual Shiny input/output pair to handle behavior as desired. (Brief tutorial at http://rstudio.github.io/shiny/tutorial/#building-inputs)
If you want to get a bit more out of your jQueryUI dialog, you can also try the extension jQuery-dialogextend here.
And, disclaimer: the console here is only for demonstrative purposes; please don't put any shiny apps that run unsanitized code from the user into the wild!
There is this new R package out there - shinyBS which brings many twitter bootstrap functionality into shiny like alerts, tooltips, popovers, modal dialogs, progress bars etc...
shinyBS
Bolaka is right, install and load the shinyBS package, then run bsExample("Alerts") to see an example with code you can copy and paste.