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 <phyo.arkarl...@gmail.com>
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 <john-li...@zenesis.com>
> 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 <phyo.arkarl...@gmail.com>
>> Reply-To: qooxdoo Development <qooxdoo-devel@lists.sourceforge.net>
>> Date: Tuesday, 18 August 2015 14:36
>>
>> To: qooxdoo Development <qooxdoo-devel@lists.sourceforge.net>
>> 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 <john-li...@zenesis.com>
>> 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 <phyo.arkarl...@gmail.com>
>>> Reply-To: qooxdoo Development <qooxdoo-devel@lists.sourceforge.net>
>>> Date: Tuesday, 18 August 2015 14:11
>>>
>>> To: qooxdoo Development <qooxdoo-devel@lists.sourceforge.net>
>>> 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 <phyo.arkarl...@gmail.com>
>>> 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 <john-li...@zenesis.com>
>>>> 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 <phyo.arkarl...@gmail.com>
>>>>> Reply-To: qooxdoo Development <qooxdoo-devel@lists.sourceforge.net>
>>>>> Date: Tuesday, 18 August 2015 12:08
>>>>>
>>>>> To: qooxdoo Development <qooxdoo-devel@lists.sourceforge.net>
>>>>> 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 <phyo.arkarl...@gmail.com>
>>>>> 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 <
>>>>>> john-li...@zenesis.com> 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 <phyo.arkarl...@gmail.com>
>>>>>>> Reply-To: qooxdoo Development <qooxdoo-devel@lists.sourceforge.net>
>>>>>>> Date: Tuesday, 18 August 2015 08:43
>>>>>>> To: qooxdoo Development <qooxdoo-devel@lists.sourceforge.net>
>>>>>>> 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 <
>>>>>>> phyo.arkarl...@gmail.com> 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 <
>>>>>>>> phyo.arkarl...@gmail.com> wrote:
>>>>>>>>
>>>>>>>>> this.classname
>>>>>>>>> "qx.ui.core.queue.Manager"
>>>>>>>>>
>>>>>>>>> this.hf is undefined
>>>>>>>>>
>>>>>>>>>
>>>>>>>>>
>>>>>>>>> On Tue, Aug 18, 2015 at 2:02 PM, Phyo Arkar <
>>>>>>>>> phyo.arkarl...@gmail.com> wrote:
>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>> On Tue, Aug 18, 2015 at 1:57 PM, John Spackman <
>>>>>>>>>> john-li...@zenesis.com> wrote:
>>>>>>>>>>
>>>>>>>>>>> typeof hf
>>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>> Thanks , i am working on it.
>>>>>>>>>>
>>>>>>>>>
>>>>>>>>>
>>>>>>>>
>>>>>>> ------------------------------------------------------------------------------
>>>>>>> _______________________________________________ qooxdoo-devel mailing 
>>>>>>> list
>>>>>>> qooxdoo-devel@lists.sourceforge.net
>>>>>>> https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
>>>>>>>
>>>>>>>
>>>>>>> ------------------------------------------------------------------------------
>>>>>>>
>>>>>>> _______________________________________________
>>>>>>> qooxdoo-devel mailing list
>>>>>>> qooxdoo-devel@lists.sourceforge.net
>>>>>>> https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
>>>>>>>
>>>>>>>
>>>>>>
>>>>> ------------------------------------------------------------------------------
>>>>> _______________________________________________ qooxdoo-devel mailing list
>>>>> qooxdoo-devel@lists.sourceforge.net
>>>>> https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
>>>>>
>>>>>
>>>>> ------------------------------------------------------------------------------
>>>>>
>>>>> _______________________________________________
>>>>> qooxdoo-devel mailing list
>>>>> qooxdoo-devel@lists.sourceforge.net
>>>>> https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
>>>>>
>>>>>
>>>> ​
>>> ------------------------------------------------------------------------------
>>> _______________________________________________ qooxdoo-devel mailing list
>>> qooxdoo-devel@lists.sourceforge.net
>>> https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
>>>
>>>
>>> ------------------------------------------------------------------------------
>>>
>>> _______________________________________________
>>> qooxdoo-devel mailing list
>>> qooxdoo-devel@lists.sourceforge.net
>>> https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
>>>
>>>
>> ------------------------------------------------------------------------------
>> _______________________________________________ qooxdoo-devel mailing list
>> qooxdoo-devel@lists.sourceforge.net
>> https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
>>
>>
>> ------------------------------------------------------------------------------
>>
>> _______________________________________________
>> qooxdoo-devel mailing list
>> qooxdoo-devel@lists.sourceforge.net
>> https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
>>
>>
>
------------------------------------------------------------------------------
_______________________________________________
qooxdoo-devel mailing list
qooxdoo-devel@lists.sourceforge.net
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel

Reply via email to