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
