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
