while I was looking for ux sites I found some interesting ui for chat bubbles. Which is,
Chat Bubble UI ref
After brainstorming several days, I couldn't figure out how to develop that. But I have found some approaches to that problem which I want your suggestions:
I should calculate message line width (absolutely), however the problem in here is each language has different character sets and how should I know each letter width and do correct calculation.
On the edges which bubbles intercepting there shouldn't be rounded corners and my approach for that problem is dividing each line to separate component, hold above line width & below line width compare and give dynamic styling to that component like:
{
borderTopRightRadius : 5,
borderBottomRightRadius:0
}
etc. The problem in that solution is I will have tons of components for each line and so many refs. I am kinda discouraged on that when I consider performance issues.
I am inviting you to do some brainstorming (not coding) and find an efficient way to solve my problem. Many thanks, who spends time to read that.
This is really interesting problem. Having more experience with web and react (rather than react native), I'll describe the way I would solve it in the browser.
Render line, but keep it invisible (opacity: 0 or visibility: none)
Get it's size and determine if it is wider than the previous sibling
Based on that apply a CSS class. Specific CSS classes would have border radius and pseudo element (::before) which would be the nice "transition" part (SVG for sure).
Show the line. I would even render it beneath the already rendered ones and in this step animate the group to top.
I think you have to create element for each line (again I'm talking about the web). Border radius shouldn't create performance issues.
Let me know what you think, I may cook a small example for you when I catch time.
You can try:
bubbleChat: {
borderRadius: 15,
borderTopLeftRadius: 0,
display: 'flex',
paddingLeft: 15,
minWidth: 50
},
bubbleWrapper: {
flexDirection: 'row'
}
Related
This is the final result:
As you can see in the pic, each line in blue is separated by each element.
I want to try this, I have already designed the elements:
But I don't know how to put in the right place each line, here's a complete example:
https://codesandbox.io/s/stoic-pond-luh0l
The way I'm trying to solve this is with this line:
<FlowDivider style={{ left: 240 * index + 1 }} />
But I don't know what's the right operation for this problem... Thanks!
First of all, you should put styles in classess instead of style attribute.
Back to the question:
I have two ideas for that task.
Just separate icons from the descriptions. And it will be easy. Just use flex and combine icons and separators.
Set fixed width for the section with cards. Create section with separators outside of the static flow. Set the same width for separators section and use flex to set equal gaps. (assumption is that all cards has the same layout)
But i prefere to use first method. It's easier to resolve and manage.
P.S. If you ask just for math algorithm:
It's not that easy, because you have changeable card width. That's your constants which you need to include in your algorithm:
icon width: 50px, padding from both card sides: 30px. Variables which you need to include: gaps between cards(15-35px), cards width minus icon width(it's hard, because it's relative, and you don't have that information).
So to fulfill your idea you need to get card width, calculate distance between two icons, and than you will know how much space you need between separators. Soooo, i don't recommend that approach;)
I don't use grid lately, so i'm not able to give you easy answer with grid.
I'm using the Inovua React Data Grid for a project, and we are trying to make some subtle changes to increase the amount of data we can see on a smaller grid. We only have limited space, so we're trying to remove unnecessary clutter. I have been struggling to find any answers to my questions on the API reference documentation, which in my opinion is quite lacking.
Trying to decrease the padding- I believe there is a default padding of 8px within the grid, but seemingly nowhere to change it. I want to trim it down a bit, so it appears more like an Excel sheet.
I want to remove the header ellipsis!! There literally is a page in their reference docs for this (columns.headerEllipsis), but it just doesn't work when I try it. Perhaps they're demo/example is just awful, but I try adding headerEllipsis: false as a column property and my terminal tells me it 'isn't a known property'.
This seems like bad design on their part, but when a column/data gets trimmed (with or without ellipsis) because the text is too long, hovering over it does not display the entire text. Is there no way to change this?
I have considered writing a custom header render function to specifically change the ellipsis style settings to solve (2) as well as to render the headers as a tooltip to solve (3), but this seems excessive. Is there a better way to do this?
Thanks!
Still unable to solve the padding issue (1), but I was able to easily resolve (2) and (3) by building that custom header render function after all. It wasn't difficult, here is what I did:
const getHeader = (name: string) => {
return (cellProps: CellProps) => {
cellProps.headerEllipsis = false; // disables ellipsis
return <div>
<Tooltip title={name}> {/* material-ui Tooltip: */}
<span>{name}</span> {/* displays text on hover */}
</Tooltip>
</div>
}
};
And then I just added this line where I defined columns:
name: e,
header: getHeader(e), // add this line
By defining the custom header render function, it also overwrites a lot of the default styles (i.e. headerEllipsis). This actually made it much easier to adjust the spacing and shrink the columns in the grid, so even though I couldn't find the solution to (1), this custom render function is definitely the way to go!
So I have something like this :
return (
//set mushroom forest background, make it fill screen
<div className="App" style={ {
backgroundImage: `url(${pools})`,
backgroundPosition: 'center',
backgroundSize: 'contain, cover',
backgroundRepeat: 'no-repeat'
}}>
I want to use both cover and contain for my background image, but it seems to choose 1 and render with it rather than applying both.
But when I render it with react, the image isn't stretched to the page. It only seems to pick up the first of either contain or cover, and use that for rendering the image. Anyone know how to make a background image do both contain and cover in react? The syntax I have there works just fine in its CSS equivalent.
I'm really trying to assign two values to a CSS style in react, using the syntax and have it work. Right now it either fills the whole page, but cuts off part of the image, or leaves white space on the sides but displays the whole image. I've found CSS tutorials using both cover and contain at the same time, is there some special syntax I need to use in react or JavaScript to make this work?
I've tried putting two styles into an array, using two strings such as ['contains', 'cover'] but that doesn't seem to work either.
Edit: Figured out a way around it, not sure if you can do this double value assignment thing is css at all, think I was mostly misreading a guide to doing something.
I am trying to achieve a very common effect in react native of having text wrap around an image. On the web you would assign a float property to the image and follow it with a p tag. .
Here is a RNPlay example I've been working on. I think the method I currently have is a bit hackish, and doesn't properly work since the text does not align with the top of the image and flow down. Is there a proper and clean way to accomplish this?
You can use a Text as container instead of the typical View.
<Text style={{flex: 1}}>
<Image source={Images.IconExplore} style={{ width: 16, height: 16 }} />
<Text> Your past has been in control for far too long. It's time to shift to a higher expression of what you are capable of so you can create the life you want to live.</Text>
</Text>
Unfortunately, there is still no easy way to do it, even after the introduction of nested Views inside Text. Surprisingly in the iOS community this seems to be non-trivial.
iphone - How to implement the effect of "float" for image, just like in CSS style
https://github.com/Cocoanetics/DTCoreText/issues/438
One idea that comes to mind that would be worth tinkering around with is measuring the text, dimensions and/or character count, and depending on the size of the image, divide the text into two Text components, one that goes to the right/left and the other that goes below the image.
There is this under-promoted React Native library that might help, which allows you to measure the width and height of a Text component based on its content:
https://github.com/alinz/react-native-swiss-knife/blob/master/lib/text/index.ios.js
Alright, so here is the situation...
Say I have a navbar for a site, and I allow users to change the number of links they want on this navbar. This means they could have 3, 5, 10, etc.
What I want to do is make it so that if one link is up, it only takes up, say, 1/5th of the space on the navbar. If I weren't using borders, I might do something like:
width: 18%;
padding: 0 1%;
However, I have two problems with this:
1) For 4 buttons, that's fine that it doesn't fill up the whole row. It would look ugly if the links were too wide... but when I have 6 or 7 buttons, it's got huge overflow!
2) Since I have borders, I can't use a percentage value for the borders or the widths, because I can't properly estimate how much of the percentage it will be.
Now, I know I don't have to use percentage values, but what I would ideally prefer is that the first button is the smallest possible size necessary for all the other buttons to fit properly, meaning that if I have 950px and 6 links, the first link can be about 150px while the others are 160px... that's fine. I want all the other buttons on the navbar to be equally sized, regardless of how many links there are.
I also need for it to accept a border... I figure the way to do this is to put a border in the nested div, so that way it doesn't effect the overall width of the button? This is all well and good, but I'm still plagued by the issue of not being able to design a dynamic site using the style I want if I can't get all the nav buttons to fit the width properly.
Are there some js tricks I could use? I don't even know...
Thanks
Edit: Here is my demo fiddle
A pure CSS solution, based on justification of the links, though still as semantic list items:
See demo fiddle.
Tested on W7 in IE7, IE8, IE9, Chrome 12, SafariWin 5, Opera 11, FF 4.
Update:
Concerning the width: Since you dynamically inject the navigation links into the HTML page, it likely is also possible to classify the navigation bar style.
See updated fiddle.
Here's a solution with jQuery
http://jsfiddle.net/pxfunc/kKJcr/
The menu is dynamically sized based on number of menu items and the width of the nav ul
var $nav = $('#nav');
var formatNav = function() {
var menuItemCount = $nav.children().length,
// base width
menuItemWidth = $nav.children().width(),
// border + padding + margin + base width of the menu item
menuItemOuterWidth = $nav.children().outerWidth(true),
// border + padding + margin only for the menuItem
menuItemDiff = menuItemOuterWidth - menuItemWidth,
// menu item container width (the <ul>)
navWidth = $nav.width();
$nav.children().width(Math.round(navWidth / menuItemCount) - menuItemDiff);
};
I did something like this at a previous job, but it did require a blend of JS and CSS.
One way to do it with JS - you need to simply take the total width of the navbar (minus padding, borders, etc, of course) and divide the number of buttons shown - then dump that out as the css width:width/numbOfbuttons%; on each button.
Just be careful not to hit exactly 100% cause this may cause wrap.
However - ideally (and the way we did it) this is much easier if you have a known number of potential buttons, or combinations.
Then, the solution is to set up a series of css classes designed to each scenario:
.oneButt a{width:widthThatLooksNotStupid%;}
.twoButt a{width:49%;}
/* etc */
And then just have the JS evaluate and set the specially designed class on the parent. Yeah..this requires a bit more CSS writing, and requires that you don't have an infinite number of potentials...
.ninehundredsevetyfiveButt a {width:FFFF;}
.ninehundredsevetysixButt a {width:UUUUU;}
...right. BUT - you get to set up a nice styling that actually fits various scenarios.
UPDATE from my comment below. Use general uh...classes...of situations, and apply these via JS:
.notEnoughToFillSpaceCruizer {width:wide;}
.enoughToFillSpaceCruizer {width:notAsWide;}
.jekPorkins {color:fuschia; font-size:99em; content:"You've got a problem..."; /* the user has failed, administer punishment*/}
Maybe you should question your design of trying to fit a dynamic number of buttons onto single row. I think the best design for you is a drop down navigator (like a window menu). That way it doesn't matter how many nav options the users adds, the design is still useable.
If you simply must have a nav bar with no drop downs, the short answer is to use a <table> if you need to support older browsers. At least a table will not wrap, but at some point the design of your site will look awful if it's squashed too much.
I'm sure there could CSS3 answers but I dont know them.