I am trying to create color scheme for a react Switch that includes a disabled customized color. I have a customized Switch that goes red and green with an on and off text. I mostly pieced it together from other examples. I am uncertain what I need in the withStyles have greyed out colors when the switch is disabled.
In the below example I want to grey out the bottom two since they are disabled
https://codesandbox.io/s/material-demo-forked-9cn2w?file=/demo.js
I have had quite a few issues piecing together withStyles options on other components as well. Is there documentation that I missed that would outline things like the '&:before' / 'track' / 'checked' keywords? They are seem specific to the Switch component, so do I need to dig into the Switch documentation more?
MaxAlex pointed me in the right direction for the switch css source code. Here is what I ended up with. The gradient seems unnecessary, but it won't take just "#737373". It is proof of concept code anyways.
disabled: {
"& + $track": {
background: "linear-gradient(to right, #737373, #737373)",
"&:before": {
opacity: 0
},
"&:after": {
opacity: 1
}
},
'&$checked + $track':{
background: "linear-gradient(to right, #737373, #737373)",
"&:before": {
content: '"on"',
opacity: 1
},
"&:after": {
content: '"off"',
opacity: 0
}
}
},
Related
I'm trying to figure out if there is a way I can use container queries in react-tss. The docs don't mention anything about it or media queries for that matter. I was able to do something like the following for media queries and it compiled to the right css.
const styles = {
button: {
width: 100
},
'#media (min-width: 1024px)': {
button: {
width: 200
}
}
}
However I can't make that work with #container. Maybe there is no current solution for this with tss-react. If not and there are any other suggestions in using container queries with mui5 I'm all ears. Thank you.
Since the title attempts to address every part of my question, which is very difficult, I need to clearify a bit:
I want to be able to apply a theme to my Office UI Fabric application with all the different color shades an Office UI Fabric theme should have, without having to define each shade myself. The only things I want to define are the primary theme color, the body text color and the body background color. This is just what the theme generator on the Office UI Fabric website does.
So to get to the point: Is it possible to use the functionality of the theme generator in any Office UI Fabric application?
My naive approach was to use createTheme, since it accepts a partial theme, and I hoped to get a full one back:
const theme = createTheme({
palette: { themePrimary: '#007610' },
semanticColors: { bodyBackground: '#ffffff', bodyText: '#000000' },
});
loadTheme(theme);
Alas, this wasn't the case. Only the properties provided are applied.
So is there a simple (official) way to do this or are the sources of the theme creator available somewhere?
So after some investigation of the ColorPage.tsx from the Office UI Fabric repository I found the missing pieces to achieve this myself. The code below is just a very simple usage of that mechanism, that suffices my needs. For now, I don't want the user to change the main background or foreground colors, hence the simplifications. Use and extend it at your own risk, but feel free to ask me, if something isn't clear. But I guess its rather clear what's going on here.
import { loadTheme } from '#uifabric/styling';
import {
IThemeRules,
ThemeGenerator,
themeRulesStandardCreator,
} from 'office-ui-fabric-react/lib/ThemeGenerator';
import { getColorFromString } from 'office-ui-fabric-react/lib/utilities/color/getColorFromString';
import { IColor } from 'office-ui-fabric-react/lib/utilities/color/interfaces';
export default class ThemeProvider {
private themeRules: IThemeRules;
constructor() {
const themeRules = themeRulesStandardCreator();
ThemeGenerator.insureSlots(this.themeRules, false);
ThemeGenerator.setSlot(themeRules.backgroundColor, getColorFromString('#ffffff'), false, true, true);
ThemeGenerator.setSlot(themeRules.foregroundColor, getColorFromString('#000000'), false, true, true);
this.themeRules = themeRules;
}
public loadThemeForColor(hexColor: string): void {
const newColor: IColor = getColorFromString(hexColor);
const themeRules = this.themeRules;
ThemeGenerator.setSlot(themeRules.primaryColor, newColor.str, false, true, true);
this.themeRules = themeRules;
const theme = ThemeGenerator.getThemeAsJson(this.themeRules);
loadTheme({
...{ palette: theme },
isInverted: false,
});
}
}
For more insights have a look at the ColorPage.tsx yourself within the official repo, since I didn't strive to understand everything going on in there.
I have a list component that I want to display a button to send a suggestion for the data to be included if it turns up no results.
List component itself is implemented like this:
{
xtype: 'list',
itemTpl: '{name}',
// This is not ideal!
emptyText: [
'<div class="x-button-normal x-button">',
'<span class="x-button-label">',
'Suggest <i><span id="suggest-name"></i>',
'</span>',
'</div>'
].join(''),
store: 'TheStore'
}
And this is the handler for the search field that simply sets a substring filter on the store:
'keyup': function(self, e, eOpts) {
queryString = self.getValue();
var store = Ext.getStore('TheStore');
store.clearFilter();
if(queryString){
var thisRegEx = new RegExp(queryString, "i");
store.filterBy(function(record) {
if (thisRegEx.test(record.get('name'))) {
return true;
};
return false;
});
// Changes the button so it shows name
document.getElementById('suggest-name').innerText = queryString;
}
},
Right now, I have the emptyText set to some simple HTML that emulates the look of a Sencha Touch button, but this means I have none of the button behaviour since it's not tied into the component system (such as being depressed when tapped). How can I set the emptyText attribute (or emulate it) since a proper button is displayed instead?
Try to view the two screencasts below
Sencha Touch - Intro to Nested List Component
Sencha Touch 2 -
Intro to List Component
I know it's about 2 years too late... but I ran into the same problem as #Hampus Nilsson and when I found the solution, I figured if I was running into this 2 years later, others might run into it as well.
With that said... I'm currently running Sencha Touch version 2.3.1. The solution, as it pertains to that version, was really easy to implement, just super tricky to find. The problem is that Sencha has a CSS property on the emptyText component (x-list-emptytext class) that is ignoring all pointer interactions called pointer-events: none; (who knew?!)
This property is found in:
[sdk_root]/resources/themes/stylesheets/sencha-touch/base/src/dataview/_List.scss
.x-list-emptytext {
text-align: center;
pointer-events: none; // THIS ONE!!
font-color: #333333;
#include st-box();
#include st-box-orient(vertical);
#include st-box-pack(center);
}
To fix this, simply override that property in your own sass/css. I chose to override it with pointer-events: inherit; but your mileage may vary.
THEN, all you need to do is setup a listener on your list, I recommend in the initialize function of your list class, like the so:
this.emptyTextCmp.element.on({
delegate: '.x-button-normal',
scope: this,
tap: this.yourCustomFunction
});
Where this is your list component. It's important to note that you need a "." in front of the class name of your delegate. In the above example, I set the delegate to: '.x-button-normal', because that was one of the two classes listed in the question's code. I could've also used '.x-button'. If it were me, I'd give your html an additional class, to be used as the delegate, that helps identify it a little better, instead of just using the default Sencha class as your delegate. That's an opinion, not a requirement.
That's it, I hope this helps someone else!
I am only a month old with extjs and still experimenting. My question is: I have a grid panel and within it the 'tools' config options. I am using this to enable/disable a Ext.grid.feature.Grouping variable. The 2 handler functions have the logic to disable/enable the 2 views by clicking on the 2 'cross' buttons that appear on the right side of the header. The logic is fine. However, I would like to display my set of custom images in place of the 'cross' buttons. Can this be done? If yes, how? Do I need to make some changes in the css code for that?
I have looked into the documentation and also done a good search but nothing seems to answer my question.
Specify a custom type config on your tools:
Ext.create('Ext.grid.Panel', {
...
tools: [
{
type: 'enable-grouping',
handler: function() {
...
}
},
{
type: 'disable-grouping',
handler: function() {
...
}
}
]
});
Then define the following classes in a stylesheet to style your new tools:
.x-tool-enable-grouping {
background-image: url('path/to/tool/image/enable-grouping.png');
}
.x-tool-disable-grouping {
background-image: url('path/to/tool/image/disable-grouping.png');
}
The size of a tool image should be 15 x 15 px
I'm trying to write an application launcher using QtQuick\QML, and I'd like the user experience to be similar to iOS, in terms of having a grid of icons that can be rearranged with icons that "move out of the way" via animated transitions and a "snap to grid" effect if the icon is dropped in an intermediate position. I've tried using GridView and the drag properties, but I can't seem to get the layout do what I want. What would be the best way to implement this type of app using QML? I'm fairly new to QtQuick, and I feel like maybe I'm missing something fundamental that would make this fairly easy\obvious to write.
For putting icons in a grid, you can use the grid view:
http://developer.qt.nokia.com/doc/qt-4.8/qml-gridview.html
Go through the Qt Quick documentation, you will find out how to do this.
This is not directly relevant to implementing the grid of icons, but I recently came across the QML component Loader. This lets you load QML components on demand, and could be useful for the code that launches an app after the icon is selected.
http://doc-snapshot.qt-project.org/5.0/qml-qtquick2-loader.html
I have made Nokia N9 launched look and feel (Maemo 6, or also known as MeeGo).
It is similar, I just scroll from up to down with icons, while you change "pages" from left to right (and vice versa).
I don't know is it best way, but this is how I did icon manager (its shrinked, this is only to give you idea - in reality it is considerably larger):
Item
{
id: root
function getChildAt(x, y) {}
function getIndexOfChild(child) {}
function moveChild(child, x, y)
{
//moving around icons
}
function setIndexToChild(child)
{
//index of child in Grid element (where to drop)
}
Flickable
{
id: scroller
clip: true
//you most likely want HorizontalFlick ("paging" effect you can add on onBeginingXChanged)
flickableDirection: Flickable.VerticalFlick
contentHeight: iconTable.height
contentWidth: iconTable.width
Grid
{
id: iconTable
width: root.width
anchors.top: parent.top
flow: Grid.LeftToRight
spacing: 10
add: Transition
{
NumberAnimation
{
properties: "x,y"
//make desired transition
}
}
move: Transition
{
NumberAnimation
{
properties: "x,y"
//make desired transition
}
}
}
}
}
You could also write down your own implementation of manager in C++ and later on use it in QML.
This is how it looks like:
I created something distantly connected to this recently, the idea is: create a ListView with snapping. Its delegate should contain a GridView. Separate all of the apps into n-element chunks. Then (it's only the idea)
ListModel
{
ListElement { apps: [app1, app2, ..., appn] }
ListElement { apps: [app1, app2, ..., appn] }
....
ListElement { apps: [app1, app2, ..., appk] }
}
Then populate the ListView with this model and the GridView with the apps property.
I don't know whether you can provide drag and drop here, though