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