I almost get it working doing this , but it is fake shadows:
"chatitem": {
// include: 'window',
style: {
widthTop: 10,
widthLeft: 10,
widthRight: 10,
color: "transparent",
innerWidthTop:1,
innerWidthLeft:1,
innerWidthRight:2,
innerWidthBottom : 3,
radiusBottomLeft:3,
radiusBottomRight:3,
innerColorBottom: "rgba(0, 0, 0, 0.32)",
innerColorRight: "rgba(0, 0, 0, 0.22)",
innerColorLeft: "rgba(0, 0, 0, 0.22)",
innerColorTop: "rgba(0, 0, 0, 0.12)",
// radius: 1,
// innerColor: "shadow",
// innerShadow: "0 2px 2px 0 rgba(0, 0, 255, 0.14),0 3px 1px -2px
"+
// "rgba(0, 0, 255, 0.2),0 1px 5px 0 rgba(0, 0, 255, 0.12)",
backgroundColor: "transparent"
}
},
On Tue, Aug 18, 2015 at 10:04 PM, Phyo Arkar <[email protected]>
wrote:
> I understand how list items works now:
>
> try this :
>
> "listitem": {
> // include: 'window',
> style: {
> width: 20,
> color: "#EFEFEF",
> innerWidth: 10,
> innerColor: "rgb(217, 0, 217)",
> backgroundColor: "transparent"
> }
> },
>
> It have can give similar effect.
>
> Now , i just need to put inner shadow into it. It makes a :before pseudo
> element.
>
> On Tue, Aug 18, 2015 at 8:41 PM, Phyo Arkar <[email protected]>
> wrote:
>
>> Wow , thanks alot John for this valuable suggestion and helping me out ,
>> thats awesome! I will try to implement that and if it works i will share
>> the results.
>> I have also create an issue , to see response from Core devs, when they
>> back from vacation.
>>
>> Awesome man , thanks a lot. So i will leave this for now and do other
>> things for phwa.be (We need Channel list and user list there urgent! :)
>>
>> I also created a channel for qooxdoo there http://phwa.be/c/qooxdoo
>>
>> On Tue, Aug 18, 2015 at 8:20 PM, John Spackman <[email protected]>
>> wrote:
>>
>>> So the virtual stuff handles its own layouting and you’re right does not
>>> appear to support margin. Actually it doesn’t support padding via
>>> appearances either because the code has to specify the row height (try
>>> setting the padding really high, e.g. 100 top and bottom to see how that
>>> breaks the appearance).
>>>
>>> It seems like the only way to fix this is to implement your own class
>>> that derives from qx.ui.form.ListItem and then implement your own layout
>>> within the ListItem. You make it creates instances of your ListItem
>>> derived class by providing your own WidgetProvider, but I’m not sure how
>>> you would hook that up to your qx.ui.list.List (although it definitely uses
>>> one). A Canvas layout would probably be fine in your ListItem, just set
>>> the default height for cells to match the layouting that you do.
>>>
>>> John
>>>
>>> From: Phyo Arkar <[email protected]>
>>> Reply-To: qooxdoo Development <[email protected]>
>>> Date: Tuesday, 18 August 2015 14:36
>>>
>>> To: qooxdoo Development <[email protected]>
>>> Subject: Re: [qooxdoo-devel] Set margin between listitems
>>>
>>> I have updated another post , i posted a wrong file.
>>>
>>> For the test , yes i overridden on purpose to override all listitems to
>>> make sure.
>>>
>>> I have attached full test tar.gz
>>>
>>>
>>>
>>> On Tue, Aug 18, 2015 at 7:50 PM, John Spackman <[email protected]>
>>> wrote:
>>>
>>>> I don’t see where you’re setting the appearance; what happens if you
>>>> modify vlistest.listItem’s properties to:
>>>>
>>>> properties: { content: { apply: "_applyPost", nullable: true },
>>>> appearance: {
>>>> init: "listitem",
>>>> refine: true
>>>> } },
>>>>
>>>> Or alternatively, what happens if you add this to your Appearance.js:
>>>>
>>>> "control" : { alias : "atom", style : function(states) {
>>>> return { padding: [20,10] };
>>>> }
>>>> }
>>>>
>>>> As an aside, “listitem" is also the name of a standard appearance and
>>>> you might want to choose a different name unless you want all listitems to
>>>> have your new style
>>>>
>>>> John
>>>>
>>>> From: Phyo Arkar <[email protected]>
>>>> Reply-To: qooxdoo Development <[email protected]>
>>>> Date: Tuesday, 18 August 2015 14:11
>>>>
>>>> To: qooxdoo Development <[email protected]>
>>>> Subject: Re: [qooxdoo-devel] Set margin between listitems
>>>>
>>>> I’ve tested to make sure if my code is the problem , unfortunately it
>>>> isn’t. Setting Margin of ListItem Dosen’t work in default virtual-list with
>>>> default listItem either.
>>>>
>>>> here is the code:
>>>>
>>>>
>>>> qx.Class.define("vlistest.listItem", {
>>>> extend: qx.ui.core.Widget,
>>>> include: [qx.ui.form.MModelProperty],
>>>> construct: function() {
>>>> this.base(arguments);
>>>> var chat_grid = new qx.ui.layout.Grid();
>>>> chat_grid.setColumnFlex(1, 1);
>>>> this._createChildControl("content");
>>>>
>>>> },
>>>>
>>>> properties: {
>>>> content: {
>>>> apply: "_applyPost",
>>>> nullable: true
>>>> }
>>>>
>>>> },
>>>>
>>>> members: {
>>>> _createChildControlImpl: function(id) {
>>>> var that = this;
>>>> var control;
>>>>
>>>> switch (id) {
>>>> case "content":
>>>> control = new qx.ui.basic.Label();
>>>> control.addListener("mouseover", function() {
>>>> control.setSelectable(this.hasState("selected"))
>>>> control.setNativeContextMenu(this.hasState("selected"))
>>>> }, this)
>>>> control.addListener("mouseout", function() {
>>>> control.setSelectable(false)
>>>> control.setNativeContextMenu(false)
>>>> }, this)
>>>> control.setWrap(true)
>>>> control.setAllowGrowX(true);
>>>> control.setRich(true);
>>>> control.set({
>>>> appearance: "content"
>>>> });
>>>> this.add(control, {
>>>> row: 0,
>>>> column: 0,
>>>> colSpan: 4
>>>> });
>>>> break;
>>>> return control || this.base(arguments, id);
>>>> },
>>>>
>>>> _applyPost: function(value, old) {
>>>> var content = this.getChildControl("content");
>>>> content.setValue(value);
>>>> // console.log(value)
>>>> }
>>>> }
>>>> }
>>>> });
>>>>
>>>> here is the appearance , i over written listitem and margin of 100:
>>>>
>>>>
>>>> qx.Theme.define("vlistest.theme.Appearance",
>>>> {
>>>> extend : qx.theme.indigo.Appearance,
>>>>
>>>> appearances :
>>>> {
>>>> "list" :
>>>> {
>>>> alias : "scrollarea",
>>>> include : "textfield"
>>>> },
>>>>
>>>> "listitem" :
>>>> {
>>>> alias : "atom",
>>>>
>>>> style : function(states)
>>>> {
>>>> var padding = [3, 5, 3, 5];
>>>> if (states.lead) {
>>>> padding = [ 2, 4 , 2, 4];
>>>> }
>>>> if (states.dragover) {
>>>> padding[2] -= 2;
>>>> }
>>>>
>>>> var backgroundColor;
>>>> if (states.selected) {
>>>> backgroundColor = "background-selected"
>>>> if (states.disabled) {
>>>> backgroundColor += "-disabled";
>>>> }
>>>> }
>>>> return {
>>>> gap : 4,
>>>> marginBottom : 100,
>>>> padding : padding,
>>>> backgroundColor : backgroundColor,
>>>> textColor : states.selected ? "text-selected" : undefined,
>>>> decorator : states.lead ? "lead-item" : states.dragover ?
>>>> "dragover" : "chatitem",
>>>> opacity : states.drag ? 0.5 : undefined
>>>> };
>>>> }
>>>> }
>>>> }
>>>> });
>>>>
>>>> Here is the decoration, i added a shadow border
>>>>
>>>>
>>>> qx.Theme.define("vlistest.theme.Decoration",
>>>> {
>>>> extend : qx.theme.indigo.Decoration,
>>>>
>>>> decorations :
>>>> {
>>>> "chatitem": {
>>>> style: {
>>>> width: 0,
>>>> shadowColor: "shadow",
>>>> shadowBlurRadius: 1,
>>>> widthBottom: 2,
>>>> color: "rgb(217, 217, 217)",
>>>> backgroundColor: "transparent"
>>>> }
>>>> }
>>>> }
>>>> });
>>>>
>>>> On Tue, Aug 18, 2015 at 6:18 PM, Phyo Arkar <[email protected]>
>>>> wrote:
>>>>
>>>> Thanks John , i am creating a new qooxdoo app to test it out.
>>>>>
>>>>> On Tue, Aug 18, 2015 at 5:51 PM, John Spackman <[email protected]
>>>>> > wrote:
>>>>>
>>>>>> Not having used virtual before I’m shooting in the dark a bit here,
>>>>>> but I can see from the demo browser (at
>>>>>> http://demo.qooxdoo.org/devel/demobrowser/#virtual~List.html) that a
>>>>>> List contains qx.ui.virtual.layer.WidgetCell and inside it is a
>>>>>> qx.ui.form.ListItem.
>>>>>>
>>>>>> That means that you can change the gap layout using an appearance, in
>>>>>> exactly the way as we both did earlier. The error you had before looks
>>>>>> like whatever you were setting the appearance property of, it wasn’t a
>>>>>> ListItem (were you setting WidgetCell.appearance instead?)
>>>>>>
>>>>>> John
>>>>>>
>>>>>> From: Phyo Arkar <[email protected]>
>>>>>> Reply-To: qooxdoo Development <[email protected]>
>>>>>> Date: Tuesday, 18 August 2015 12:08
>>>>>>
>>>>>> To: qooxdoo Development <[email protected]>
>>>>>> Subject: Re: [qooxdoo-devel] Set margin between listitems
>>>>>>
>>>>>> So what i just need now : Able to set margin for listItems to
>>>>>> increase Independant Gap between List Items, so that we can set on
>>>>>> Decorators/Boxshadows on listitems without overlapping each other.
>>>>>>
>>>>>> That would be quite easy if a QOoxdoo Core Dev can Enlighten us.
>>>>>>
>>>>>> On Tue, Aug 18, 2015 at 2:37 PM, Phyo Arkar <[email protected]
>>>>>> > wrote:
>>>>>>
>>>>>>> Thanks , the paddings works , but the margin dosen't
>>>>>>>
>>>>>>> on http://phwa.be , we hacked it by adding a component around the
>>>>>>> list item , but that implemention is slow and when virtual listitems
>>>>>>> resizes (images , video , etc) it dosen't resize sometimes.
>>>>>>>
>>>>>>> Thats why i am trying to see if Margin can be set between list
>>>>>>> items (You can set Margin , but It never got effected , when look into
>>>>>>> inspector , there is NO margin property set for list items , but any
>>>>>>> other
>>>>>>> widget is fine , which is very weird).
>>>>>>>
>>>>>>> Paddings will just make list items wider , not like margin.
>>>>>>>
>>>>>>> On Tue, Aug 18, 2015 at 2:19 PM, John Spackman <
>>>>>>> [email protected]> wrote:
>>>>>>>
>>>>>>>> Ah, I missed the bit about virtual lists, sorry.
>>>>>>>>
>>>>>>>> Yes, in Atom its the gap between the icon and the label; if you’re
>>>>>>>> using a completely custom widget then the layouting inside the object
>>>>>>>> is up
>>>>>>>> to the widget, so you would have to tell that layout to move the text
>>>>>>>> over. The margins and paddings on the widget would still work though
>>>>>>>> (although I’ve not used the virtual widget I imagine that’s the case)
>>>>>>>>
>>>>>>>> John
>>>>>>>>
>>>>>>>> From: Phyo Arkar <[email protected]>
>>>>>>>> Reply-To: qooxdoo Development <[email protected]>
>>>>>>>> Date: Tuesday, 18 August 2015 08:43
>>>>>>>> To: qooxdoo Development <[email protected]>
>>>>>>>> Subject: Re: [qooxdoo-devel] Set margin between listitems
>>>>>>>>
>>>>>>>> I think it is due to , not using atom. I am using custom widget.
>>>>>>>> and Gap is only horizontal space between objects right?
>>>>>>>>
>>>>>>>> On Tue, Aug 18, 2015 at 2:12 PM, Phyo Arkar <
>>>>>>>> [email protected]> wrote:
>>>>>>>>
>>>>>>>>> i am using virtual lis t(list.List) , is it because of that?
>>>>>>>>>
>>>>>>>>> going to test your code , thanks lots!
>>>>>>>>>
>>>>>>>>> On Tue, Aug 18, 2015 at 2:11 PM, Phyo Arkar <
>>>>>>>>> [email protected]> wrote:
>>>>>>>>>
>>>>>>>>>> this.classname
>>>>>>>>>> "qx.ui.core.queue.Manager"
>>>>>>>>>>
>>>>>>>>>> this.hf is undefined
>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>> On Tue, Aug 18, 2015 at 2:02 PM, Phyo Arkar <
>>>>>>>>>> [email protected]> wrote:
>>>>>>>>>>
>>>>>>>>>>>
>>>>>>>>>>> On Tue, Aug 18, 2015 at 1:57 PM, John Spackman <
>>>>>>>>>>> [email protected]> wrote:
>>>>>>>>>>>
>>>>>>>>>>>> typeof hf
>>>>>>>>>>>>
>>>>>>>>>>>
>>>>>>>>>>> Thanks , i am working on it.
>>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>
>>>>>>>> ------------------------------------------------------------------------------
>>>>>>>> _______________________________________________ qooxdoo-devel mailing
>>>>>>>> list
>>>>>>>> [email protected]
>>>>>>>> https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
>>>>>>>>
>>>>>>>>
>>>>>>>> ------------------------------------------------------------------------------
>>>>>>>>
>>>>>>>> _______________________________________________
>>>>>>>> qooxdoo-devel mailing list
>>>>>>>> [email protected]
>>>>>>>> https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
>>>>>>>>
>>>>>>>>
>>>>>>>
>>>>>> ------------------------------------------------------------------------------
>>>>>> _______________________________________________ qooxdoo-devel mailing
>>>>>> list
>>>>>> [email protected]
>>>>>> https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
>>>>>>
>>>>>>
>>>>>> ------------------------------------------------------------------------------
>>>>>>
>>>>>> _______________________________________________
>>>>>> qooxdoo-devel mailing list
>>>>>> [email protected]
>>>>>> https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
>>>>>>
>>>>>>
>>>>>
>>>> ------------------------------------------------------------------------------
>>>> _______________________________________________ qooxdoo-devel mailing list
>>>> [email protected]
>>>> https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
>>>>
>>>>
>>>> ------------------------------------------------------------------------------
>>>>
>>>> _______________________________________________
>>>> qooxdoo-devel mailing list
>>>> [email protected]
>>>> https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
>>>>
>>>>
>>> ------------------------------------------------------------------------------
>>> _______________________________________________ qooxdoo-devel mailing list
>>> [email protected]
>>> https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
>>>
>>>
>>> ------------------------------------------------------------------------------
>>>
>>> _______________________________________________
>>> qooxdoo-devel mailing list
>>> [email protected]
>>> https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
>>>
>>>
>>
>
------------------------------------------------------------------------------
_______________________________________________
qooxdoo-devel mailing list
[email protected]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
