For the 2 panels in the AgentDesktopView, I'm trying to adjust the size of Panel 1.
I've tried:
flex.AgentDesktopView
.defaultProps
.splitterOptions
.initialFirstPanelSize = '250px'
and
flex.AgentDesktopView
.defaultProps
.splitterOptions
.minimumFirstPanelSize = '250px'
I've tried searching through docs and can't find much information around it.
Twilio developer evangelist here.
If you have a plugin you can put the code in, you can try this
flex.AgentDesktopView.defaultProps.splitterOptions = {
initialFirstPanelSize: "250px",
minimumFirstPanelSize: "250px",
//minimumSecondPanelSize: "xx%"
};
Either the theme or these component options can be used ie. if you're updating the config in the manager when you changed the options:
manager.updateConfig(appConfig);
Let me know if this helps at all!
Related
I was using min-[1000px]:bg-orange-400 and max-[1000px]:bg-orange-400. Somehow they suddenly stopped working and I got this in the terminal as tailwind intellisense's output:
The 'min-' and 'max-' variants are not supported with a 'screens' configuration containing mixed units.
tailwind config:
module.exports = {
content: ["./src/**/*.{js,jsx,ts,tsx}"],
theme: {
extend: {
colors: {
brand: "#2E3192",
},
},
},
};
could not find the bug
I've never seen this min and max syntax you're using, but my advise would be to use the breakpoints tailwind provides out of the box or extending their breakpoints in the tailwind config.
In your case the next breakpoint tailwind defines would be lg (1024px).
So you could go with this: bg-orange-300 lg:bg-orange-400.
You can use arbitrary media queries as well, but I would only do that as a last resort, because it doesn't align with the overall design system then and you get into specificity troubles when you're using multiple of those on one element. In that case it would look like this: bg-orange-300 [#media(min-width:1000px)]:bg-orange-400
Can I use the styled-system to achieve something like this?
<MyComponent
backgroundImage={{
default: "https://placekitten.com/380/80",
sm: "https://placekitten.com/340/80"
}}
/>
or this (because I know it can be done this way too with other "style props" such as width, but I prefer to use an object with keys):
<MyComponent
backgroundImage={[
"https://placekitten.com/300/80",
"https://placekitten.com/500/80"
]}
/>
I think the code examples above are self-descriptive and they follow the library's pattern but just to be clear, I'm mapping the values (image sources) to the breakpoints (default and next one up).
For example, this works out of the box:
<Box
width={[
default: 1,
sm: 1/3,
]}
/>
The output is something like this:
.QWojd {
width: 100%;
}
#media screen and (min-width: 24em) {
.QWojd {
width: 33.33333333333333%;
}
}
I've been looking into the source code and this part here makes me think it should work with backgroundImage too:
Sadly, it doesn't work, and the result is a stringified object (or concatenated array values) in the CSS output.
I can't think of how the variant function would be useful here as people have suggested. I've tried to use the system function but I just can't understand the documentation. The ResponsiveValue type gives me a hint but I feel like crawling in the dark when I try to understand the internals.
Ultimately, I'd like to use the "breakpoints object" (or array) with whatever custom prop I feel like, like this:
<Box
myProp={[
default: 'foo',
sm: 'bar',
]}
/>
Note: I've learned (from experience) that you can just use the "breakpoints array" version (without setting breakpoints in a theme and passing it to a provider) and that will map the value to the first 2 default breakpoints (not sure where they come from) but if you want to use an object with keys you need to use a ThemeProvider with a theme object with your own breakpoints.
Note 2: I can understand the styled-system documentation up to this point: https://styled-system.com/custom-props. When I arrive here I feel like this is what I'm looking for but I can't understand the example, the explanation confuses me even more and I can't find any examples on the web.
Note 3: Spectrum Chat has a styled-system channel and the library author is in there but sadly I haven't been able to send any messages there (constant network error)
Examples
Ok, so according to the docs (https://styled-system.com/custom-props/), in order to create a custom prop (or in this case, replace the existing one) you should use the system utility. Since I'm not a user of this library (styled-system), I'm not 100% sure that this is correct approach, but I tested on top of your example code and it seems to work as you wanted.
The component declaration (it also works with objects like you wanted) with an array:
<ResponsiveImageBox
color="white"
backgroundImage={[
"https://placekitten.com/300/80",
"https://placekitten.com/500/80"
]}
>
Box 8
</ResponsiveImageBox>
with objects:
<ResponsiveImageBox
color="white"
backgroundImage={{
default: "https://placekitten.com/300/80",
sm: "https://placekitten.com/500/80"
}}
>
Box 8
</ResponsiveImageBox>
And this is the component code:
export const ResponsiveImageBox = styled(Box)(
({ myCustomProp }) => {
return css`
${system({
backgroundImage: {
property: "backgroundImage",
transform: value => `url(${value})`
}
})}
`
});
As you can see on examples 4, 5 and 8 (https://stackblitz.com/edit/styled-system-mccqje?file=Examples.tsx), I also did it for the border-radius attribute with a simple prop renaming and just specifying what css attribute I wanted to change (property), so no need to add transform as the value will remain the same.
export const ExtendedBox2 = styled(Box)<ExtendedBoxProps>`
background-position: center;
${system({
myCustomProp: {
property: "border-radius"
}
})}
`;
Have a look and see if this is what you were looking for! :)
I know you already marked it as solved, and Eduardo's approach definitely works. However another way you can do it "out of the box" is to use aliases so that you can use objects instead of arrays (source: https://styled-system.com/responsive-styles/):
// theme.js
const breakpoints = ['40em', '52em', '64em', '80em']
// aliases
breakpoints.sm = breakpoints[0]
breakpoints.md = breakpoints[1]
breakpoints.lg = breakpoints[2]
breakpoints.xl = breakpoints[3]
export default {
breakpoints,
}
// ResponsiveImageBox.js
<ResponsiveImageBox
color="white"
backgroundImage={{
md: "https://placekitten.com/300/80",
sm: "https://placekitten.com/500/80"
}}
>
Box 8
</ResponsiveImageBox>
I'm trying to increase the height of the line on the selected Pivot item link in Microsoft's Fluent UI using React.
Here's a screenshot for the purposes of clarification:
The orange arrow is pointing to the blue line of which I would like to increase the height.
I have tried setting the styles attribute of the Pivot component but thus far have been unsuccessful. Here's some code
const pivotStyles: Partial<IStyleSet<IPivotStyles>> = {
link: { ? },
linkContent: { ? }
};
<Pivot styles={pivotStyles} linkSize={PivotLinkSize.large}>
<PivotItem headerText="Zane"></PivotItem>
<PivotItem headerText="Kai"></PivotItem>
<PivotItem headerText="Jay"></PivotItem>
</Pivot>
I have experimented with different attributes of both link and linkContent but haven't found a way yet. I believe what I'm trying to do is manipulate the IStyle interface but I can't find details of the attributes of it. The link there is very vague. For example, what are all the available attributes of link, linkContent, etc.?
Any thoughts on this would be most appreciated!
Thank you.
Turns out I was on the right track and just needed the exact fields. Here's what ended up working:
const pivotStyles = {
linkIsSelected: {
selectors: {
':before': {
height: '6px', // was previously defaulted at 2px
}
}
}
};
I scoured about 4.24 million sites to find this answer but here are some of the most helpful in case they are of interest:
the actual source code of Pivot.styles.ts
the Microsoft Fluent UI Pivot Documentation
A deep examination of the classes using Chrome Dev Tools also helped. ;)
Here's a picture of the end result:
I have looked around the Quill documentation, GitHub topics, and here in Stack Overflow and I have been unable to find a simple example of using the format attribute. I would like to limit my users so that they can only bold, italicize, underline, and hyperlink text.
From what I understand, this can be achieved with a format whitelist, but I have only been able to find examples regarding custom fonts or other more complex properties.
Thank you for your time!
I did some more digging around and found the answer. The following creates a Quill editor that allows only bold, italics, underline, and links. The list of allowed formats is just an array, and all omitted formats will not be allowed in the editor, so they won't show up if a user pastes text.
var toolbarOptions = [['bold', 'italic', 'underline'],['link'],['clean']];
var formatWhitelist = ['bold','italic','link'];
var quill = new Quill('#notification-message', {
scrollingContainer: 'true',
theme: 'snow',
formats: formatWhitelist,
modules: {
toolbar: toolbarOptions
}
});
Am new to angularjs/googlecharts and learning on the job. I've the following code in my controller which renders the piechart initially and has no issues.
There is a slider directive, which when changed (basically a date range slider), should update the columnchart with new data. But I don't know how to update the piechart data. I do get the new data from the backend without any problems though.
Here is the initialization code in controller:
$scope.piechart = {};
$scope.piechart.type ='PieChart';
piechartData = response.data.piechart;
var piechartoptions = {
'min-width':800,
'max-width':320,
'is3D':true,
'pieSliceText': 'label',
'pieSliceTextStyle': {fontSize: 10},
'chartArea' : { left: 30, top: 60 },
'backgroundColor': {fill:'transparent'},
'legend': {'textStyle':{'color': 'white',
'fontSize': 12},
'position': "top",
'maxLines':10,
'alignment':"start"},
'height':500
};
$scope.piechart.data = new google.visualization.DataTable(piechartData);
$scope.piechart.options = piechartoptions;
$scope.piechart.formatters = {};
In the directive (which is used in the html that the above controller's scope resides in), I've access to the chart like the following:
scope.$parent.piechart
So in a very naive way i did this but to no avail:
scope.$parent.piechart.data = new google.visualization.DataTable(response.data.piechart)
TIA for all the help.
I bumped into this issue today. An easy quick fix is to simply write
this.chartData = Object.assign([], this.chartData) to reassign to the exposed dataset property into your component so it triggers change detection.
More information from this issue in a different library:
valor-software/ng2-charts#959 (comment)
Hope this helps weary travellers :)
To achieve this you need to create watch on your slider model so when it gets change you need to update your pie chart model so it'll automatically update.
Watch
$scope.$watch('sliderModel',function(n,o) {
// update your new pie chart data here, I think you need to update below model only
$scope.piechart.data = new google.visualization.DataTable(piechartData);
}
It just an example. You have to update it with new data for pie chart.
Proper Angular way to use google chart
You should use google-chart directives to plot pie chart so this kind of problems will be solved automatically.
Have a look here - Angular-google-chart