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 <http://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.nethttps://lists.sourceforge.net/lists/l >>>>>>> istinfo/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.nethttps://lists.sourceforge.net/lists/l >>>>>>> istinfo/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.nethttps://lists.sourceforge.net/lists/li >>>>>> stinfo/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.nethttps://lists.sourceforge.net/lists/lis >>>>> tinfo/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
