Thanks a lot for your help too John ! My next step is to make it fast on Mobile. now it is very glitchy to scroll.
On Wed, Aug 19, 2015 at 5:17 PM, John Spackman <john-li...@zenesis.com> wrote: > Well done, looks nice :) > > From: Phyo Arkar <phyo.arkarl...@gmail.com> > Reply-To: qooxdoo Development <qooxdoo-devel@lists.sourceforge.net> > Date: Wednesday, 19 August 2015 11:06 > To: qooxdoo Development <qooxdoo-devel@lists.sourceforge.net> > Subject: Re: [qooxdoo-devel] Set margin between listitems > > results : > > > > > On Wed, Aug 19, 2015 at 4:33 PM, Phyo Arkar <phyo.arkarl...@gmail.com> > wrote: > >> Got it working , i wrote a decoration mixin, i will make a proper repo >> later. This need to be inset tho , not sure why non-inset box-shadows >> dosen’t work in ::before pseudo elements. >> >> /* ************************************************************************ >> >> qooxdoo - the new era of web development >> License: >> LGPL: http://www.gnu.org/licenses/lgpl.html >> EPL: http://www.eclipse.org/org/documents/epl-v10.php >> See the LICENSE file in the project's top-level directory for details. >> >> Authors: >> * Phyo Arkar Lwin (phyo.arkarlwin[at]gmail[o]com) >> ************************************************************************ >> *//** >> * Border implementation with two CSS borders. Both borders can be styled >> * independent of each other. >> * This mixin is usually used by {@link qx.ui.decoration.Decorator}. >> */ >> qx.Mixin.define("phwabe.mixins.MShadowBorderCss", { >> >> /* >> >> ***************************************************************************** >> PROPERTIES >> >> ***************************************************************************** >> */ >> >> properties: { >> /* >> >> --------------------------------------------------------------------------- >> PROPERTY: innerShadowCss : just apply CSS Shadow string directly , >> need inset >> >> --------------------------------------------------------------------------- >> */ >> /** top width of border */ >> innerShadowCss: { >> check: "string", >> nullable: true, >> >> apply: "_applyShadowBorderCss" >> } >> }, >> >> members: { >> >> /** >> * Takes a styles map and adds the CSS Box-Shadow inner pseudo element >> ::before >> * >> * @param styles {Map} A map to add the styles. >> */ >> _styleShadowBorderCss: function(styles) { >> var propName = qx.core.Environment.get("css.boxshadow"); >> var shadowStyle = [] >> >> // Add inner shadow >> styles[":before"] = { >> "width": "100%", >> "height": "100%", >> "position": "absolute", >> "content": '""', >> "left": 0, >> "top": 0, >> "box-shadow": this.getInnerShadowCss() >> }; >> var boxSizingKey = >> qx.bom.Style.getCssName(qx.core.Environment.get("css.boxsizing")); >> styles[":before"][boxSizingKey] = "border-box"; >> >> }, >> _applyShadowBorderCss: function() { >> if (qx.core.Environment.get("qx.debug")) { >> if (this._isInitialized()) { >> throw new Error("This decorator is already in-use. Modification is >> not possible anymore!"); >> } >> } >> } >> } >> }); >> >> usage : in decoration.js >> >> qx.Class.patch(qx.ui.decoration.Decorator, phwabe.mixins.MShadowBorderCss); >> >> ... >> "chatitem": { >> // include: 'window', >> style: { >> widthTop: 10, >> widthLeft: 10, >> widthRight: 10, >> color: "transparent", >> innerShadowCss: "inset 0px 0 1px 1px rgba(0, 0, 0, 0.12),inset 0 >> -1px 4px rgba(0, 0, 0, 0.24);", >> backgroundColor: "transparent" >> } >> }, >> >> ... >> >> >> >> On Wed, Aug 19, 2015 at 12:00 PM, Phyo Arkar <phyo.arkarl...@gmail.com> >> wrote: >> >>> 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 <phyo.arkarl...@gmail.com> >>> 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 <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 > > > ------------------------------------------------------------------------------ > > _______________________________________________ > 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
