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
