GNOME.org
 

[gtk+/gtk-style-context] Add some images to the docs

commit 371604840f59c5b6cc6e006c75f5dd42beacc055
Author: Matthias Clasen <mclasen redhat com>
Date:   Mon Nov 22 01:41:45 2010 -0500

    Add some images to the docs
    
    Add graphs for the transition functions and gradient examples.

 docs/reference/gtk/Makefile.am            |   11 ++-
 docs/reference/gtk/images/ease-in-out.png |  Bin 0 -> 8955 bytes
 docs/reference/gtk/images/ease-in.png     |  Bin 0 -> 8862 bytes
 docs/reference/gtk/images/ease-out.png    |  Bin 0 -> 8819 bytes
 docs/reference/gtk/images/ease.png        |  Bin 0 -> 9216 bytes
 docs/reference/gtk/images/gradient1.png   |  Bin 0 -> 722 bytes
 docs/reference/gtk/images/gradient2.png   |  Bin 0 -> 397 bytes
 docs/reference/gtk/images/gradient3.png   |  Bin 0 -> 2579 bytes
 docs/reference/gtk/images/gradient4.png   |  Bin 0 -> 4901 bytes
 docs/reference/gtk/images/linear.png      |  Bin 0 -> 8693 bytes
 gtk/gtkcssprovider.c                      |  189 +++++++++++++++++++++--------
 gtk/gtkstylecontext.c                     |   18 +++
 12 files changed, 166 insertions(+), 52 deletions(-)
---
diff --git a/docs/reference/gtk/Makefile.am b/docs/reference/gtk/Makefile.am
index b3e2901..4a3860d 100644
--- a/docs/reference/gtk/Makefile.am
+++ b/docs/reference/gtk/Makefile.am
@@ -327,7 +327,16 @@ HTML_IMAGES = \
 	$(srcdir)/images/layout-tblr.png				\
 	$(srcdir)/images/layout-tbrl.png				\
 	$(srcdir)/images/window-default.png				\
-	$(srcdir)/images/hello-world.png
+	$(srcdir)/images/hello-world.png				\
+	$(srcdir)/images/linear.png					\
+	$(srcdir)/images/ease.png					\
+	$(srcdir)/images/ease-in-out.png				\
+	$(srcdir)/images/ease-in.png					\
+	$(srcdir)/images/ease-out.png					\
+	$(srcdir)/images/gradient1.png					\
+	$(srcdir)/images/gradient2.png					\
+	$(srcdir)/images/gradient3.png					\
+	$(srcdir)/images/gradient4.png
 
 # Extra options to supply to gtkdoc-fixref
 FIXXREF_OPTIONS=--extra-dir=../gdk/html \
diff --git a/docs/reference/gtk/images/ease-in-out.png b/docs/reference/gtk/images/ease-in-out.png
new file mode 100644
index 0000000..1591b6f
Binary files /dev/null and b/docs/reference/gtk/images/ease-in-out.png differ
diff --git a/docs/reference/gtk/images/ease-in.png b/docs/reference/gtk/images/ease-in.png
new file mode 100644
index 0000000..cece95d
Binary files /dev/null and b/docs/reference/gtk/images/ease-in.png differ
diff --git a/docs/reference/gtk/images/ease-out.png b/docs/reference/gtk/images/ease-out.png
new file mode 100644
index 0000000..9a5162f
Binary files /dev/null and b/docs/reference/gtk/images/ease-out.png differ
diff --git a/docs/reference/gtk/images/ease.png b/docs/reference/gtk/images/ease.png
new file mode 100644
index 0000000..6a70bcd
Binary files /dev/null and b/docs/reference/gtk/images/ease.png differ
diff --git a/docs/reference/gtk/images/gradient1.png b/docs/reference/gtk/images/gradient1.png
new file mode 100644
index 0000000..248c998
Binary files /dev/null and b/docs/reference/gtk/images/gradient1.png differ
diff --git a/docs/reference/gtk/images/gradient2.png b/docs/reference/gtk/images/gradient2.png
new file mode 100644
index 0000000..cc5fc05
Binary files /dev/null and b/docs/reference/gtk/images/gradient2.png differ
diff --git a/docs/reference/gtk/images/gradient3.png b/docs/reference/gtk/images/gradient3.png
new file mode 100644
index 0000000..4ff8f90
Binary files /dev/null and b/docs/reference/gtk/images/gradient3.png differ
diff --git a/docs/reference/gtk/images/gradient4.png b/docs/reference/gtk/images/gradient4.png
new file mode 100644
index 0000000..b619cae
Binary files /dev/null and b/docs/reference/gtk/images/gradient4.png differ
diff --git a/docs/reference/gtk/images/linear.png b/docs/reference/gtk/images/linear.png
new file mode 100644
index 0000000..2339839
Binary files /dev/null and b/docs/reference/gtk/images/linear.png differ
diff --git a/gtk/gtkcssprovider.c b/gtk/gtkcssprovider.c
index de6ebf2..58812a5 100644
--- a/gtk/gtkcssprovider.c
+++ b/gtk/gtkcssprovider.c
@@ -331,35 +331,43 @@
  *     <tbody>
  *       <row>
  *         <entry>rgb(@r, @g, @b)</entry>
- *         <entry>An opaque color; @r, @g, @b can be either integers between 0 and 255 or percentages</entry>
- *         <entry>rgb(128, 10, 54)
- *                rgb(20%, 30%, 0%)</entry>
+ *         <entry>An opaque color; @r, @g, @b can be either integers between
+ *                0 and 255 or percentages</entry>
+ *         <entry><literallayout>rgb(128, 10, 54)
+ * rgb(20%, 30%, 0%)</literallayout></entry>
  *       </row>
  *       <row>
  *         <entry>rgba(@r, @g, @b, @a)</entry>
- *         <entry>A translucent color; @r, @g, @b are as in the previous row, @a is a floating point number between 0 and 1</entry>
- *         <entry>rgba(255, 255, 0, 0.5)</entry>
+ *         <entry>A translucent color; @r, @g, @b are as in the previous row,
+ *                @a is a floating point number between 0 and 1</entry>
+ *         <entry><literallayout>rgba(255, 255, 0, 0.5)</literallayout></entry>
  *       </row>
  *       <row>
  *         <entry>&num;@xxyyzz</entry>
- *         <entry>An opaque color; @xx, @yy, @zz are hexadecimal numbers specifying @r, @g, @b
- *                variants with between 1 and 4 hexadecimal digits per component are allowed</entry>
- *         <entry>&num;ff12ab
- *                &num;f0c</entry>
+ *         <entry>An opaque color; @xx, @yy, @zz are hexadecimal numbers
+ *                specifying @r, @g, @b variants with between 1 and 4
+ *                hexadecimal digits per component are allowed</entry>
+ *         <entry><literallayout>&num;ff12ab
+ * &num;f0c</literallayout></entry>
  *       </row>
  *       <row>
  *         <entry>&commat;name</entry>
- *         <entry>Reference to a color that has been defined with &commat;define-color</entry>
+ *         <entry>Reference to a color that has been defined with
+ *                &commat;define-color
+ *         </entry>
  *         <entry>&commat;bg_color</entry>
  *       </row>
  *       <row>
  *         <entry>mix(@color1, @color2, @f)</entry>
- *         <entry>A linear combination of @color1 and @color2. @f is a floating point number between 0 and 1.</entry>
- *         <entry>mix(&num;ff1e0a, &commat;bg_color, 0.8)</entry>
+ *         <entry>A linear combination of @color1 and @color2. @f is a
+ *                floating point number between 0 and 1.</entry>
+ *         <entry><literallayout>mix(&num;ff1e0a, &commat;bg_color, 0.8)</literallayout></entry>
  *       </row>
  *       <row>
  *         <entry>shade(@color, @f)</entry>
- *         <entry>A lighter or darker variant of @color. @f is a floating point number.</entry>
+ *         <entry>A lighter or darker variant of @color. @f is a
+ *                floating point number.
+ *         </entry>
  *         <entry>shade(&commat;fg_color, 0.5)</entry>
  *       </row>
  *       <row>
@@ -374,6 +382,80 @@
  *   </tgroup>
  * </informaltable>
  * </refsect2>
+ * <refsect2 id="gtkcssprovider-gradients">
+ * <title>Gradients</title>
+ * <para>
+ * Linear or radial Gradients can be used as background images.
+ * </para>
+ * <para>
+ * A linear gradient along the line from (@start-x, @start-y) to
+ * (@end-x, @end-y) is specified using the syntax
+ * <literallayout>-gtk-gradient (linear,
+ *               @start-x @start-y, @end-x @end-y,
+ *               color-stop (@position, @color),
+ *               ...)</literallayout>
+ * where @start-x and @end-x can be either a floating point number between
+ * 0 and 1 or one of the special values 'left', 'right' or 'center', @start-y
+ * and @end-y can be either a floating point number between 0 and 1 or one
+ * of the special values 'top', 'bottom' or 'center', @position is a floating
+ * point number between 0 and 1 and @color is a color expression (see above).
+ * The color-stop can be repeated multiple times to add more than one color
+ * stop. 'from (@color)' and 'to (@color)' can be used as abbreviations for
+ * color stops with position 0 and 1, respectively.
+ * </para>
+ * <example>
+ * <title>A linear gradient</title>
+ * <inlinegraphic fileref="gradient1.png" format="PNG"/>
+ * <para>This gradient was specified with
+ * <literallayout>-gtk-gradient (linear,
+ *                left top, right bottom,
+ *                from(&commat;yellow), to(&commat;blue))</literallayout></para>
+ * </example>
+ * <example>
+ * <title>Another linear gradient</title>
+ * <inlinegraphic fileref="gradient2.png" format="PNG"/>
+ * <para>This gradient was specified with
+ * <literallayout>-gtk-gradient (linear,
+ *                0 0, 0 1,
+ *                color-stop(0, &commat;yellow),
+ *                color-stop(0.2, &commat;blue),
+ *                color-stop(1, &num;0f0))</literallayout></para>
+ * </example>
+ * <para>
+ * A radial gradient along the two circles defined by (@start-x, @start-y,
+ * @start-radius) and (@end-x, @end-y, @end-radius) is specified using the
+ * syntax
+ * <literallayout>-gtk-gradient (radial,
+ *                @start-x @start-y, @start-radius,
+ *                @end-x @end-y, @end-radius,
+ *                color-stop (@position, @color),
+ *                ...)</literallayout>
+ * where @start-radius and @end-radius are floating point numbers and
+ * the other parameters are as before.
+ * </para>
+ * <example>
+ * <title>A radial gradient</title>
+ * <inlinegraphic fileref="gradient3.png" format="PNG"/>
+ * <para>This gradient was specified with
+ * <literallayout>-gtk-gradient (radial,
+ *                center center, 0,
+ *                center center, 1,
+ *                from(&commat;yellow), to(&commat;green))</literallayout></para>
+ * </example>
+ * <example>
+ * <title>Another radial gradient</title>
+ * <inlinegraphic fileref="gradient4.png" format="PNG"/>
+ * <para>This gradient was specified with
+ * <literallayout>
+ * -gtk-gradient (radial,
+ *                0.4 0.4, 0.1,
+ *                0.6 0.6, 0.7,
+ *                color-stop (0, &num;f00),
+ *                color-stop (0.1, &num;a0f),
+ *                color-stop (0.2, &commat;yellow),
+ *                color-stop (1, &commat;green))</literallayout></para>
+ * </example>
+ * </refsect2>
  * <refsect2 id="gtkcssprovider-properties">
  * <title>Supported properties</title>
  * <para>
@@ -405,48 +487,44 @@
  *     <tbody>
  *       <row>
  *         <entry>engine</entry>
- *         <entry><programlisting>engine-name</programlisting></entry>
+ *         <entry>engine-name</entry>
  *         <entry>#GtkThemingEngine</entry>
- *         <entry><programlisting>engine: clearlooks;</programlisting></entry>
+ *         <entry>engine: clearlooks;</entry>
  *       </row>
  *       <row>
  *         <entry>background-color</entry>
- *         <entry morerows="1"><programlisting>color</programlisting></entry>
- *         <entry morerows="1">#GdkRGBA</entry>
- *         <entry morerows="1">
- *           <programlisting>
- * background-color: &num;fff;
+ *         <entry morerows="2">color (see above)</entry>
+ *         <entry morerows="2">#GdkRGBA</entry>
+ *         <entry morerows="2"><literallayout>background-color: &num;fff;
  * color: @color-name;
  * background-color: shade (@color-name, 0.5);
- * color: mix (@color-name, &num;f0f, 0.8);</programlisting>
+ * color: mix (@color-name, &num;f0f, 0.8);</literallayout>
  *         </entry>
  *       </row>
  *       <row>
  *         <entry>color</entry>
  *       </row>
  *       <row>
+ *         <entry>border-color</entry>
+ *       </row>
+ *       <row>
  *         <entry>font</entry>
- *         <entry><programlisting>family [style] [size]</programlisting></entry>
+ *         <entry>family [style] [size]</entry>
  *         <entry>#PangoFontDescription</entry>
- *         <entry><programlisting>font: Sans 15;</programlisting></entry>
+ *         <entry>font: Sans 15;</entry>
  *       </row>
  *       <row>
  *         <entry>margin</entry>
- *         <entry morerows="1">
- *           <programlisting>
- * width
+ *         <entry morerows="1"><literallayout>width
  * vertical-width horizontal-width
  * top-width horizontal-width bottom-width
- * top-width right-width bottom-width left-width
- *           </programlisting>
+ * top-width right-width bottom-width left-width</literallayout>
  *         </entry>
  *         <entry morerows="1">#GtkBorder</entry>
- *         <entry morerows="1">
- *           <programlisting>
- * margin: 5;
+ *         <entry morerows="1"><literallayout>margin: 5;
  * margin: 5 10;
  * margin: 5 10 3;
- * margin: 5 10 3 5;</programlisting>
+ * margin: 5 10 3 5;</literallayout>
  *         </entry>
  *       </row>
  *       <row>
@@ -454,24 +532,19 @@
  *       </row>
  *       <row>
  *         <entry>background-image</entry>
- *         <entry>
- *           <programlisting>
- * -gtk-gradient (linear,
+ *         <entry><literallayout>-gtk-gradient (linear,
  *                starting-x-position starting-y-position,
  *                ending-x-position ending-y-position,
  *                [ [from|to] (color) |
  *                  color-stop (percentage, color) ] )
- *
  * -gtk-gradient (radial,
  *                starting-x-position starting-y-position, starting-radius,
  *                ending-x-position ending-y-position, ending-radius,
  *                [ [from|to] (color) |
- *                  color-stop (percentage, color) ]* )</programlisting>
+ *                  color-stop (percentage, color) ]* )</literallayout>
  *         </entry>
  *         <entry>#cairo_pattern_t</entry>
- *         <entry>
- *           <programlisting>
- * -gtk-gradient (linear,
+ *         <entry><literallayout>-gtk-gradient (linear,
  *                left top, right top,
  *                from (&num;fff), to (&num;000));
  * -gtk-gradient (linear, 0.0 0.5, 0.5 1.0,
@@ -482,27 +555,41 @@
  *                center center, 0.2,
  *                center center, 0.8,
  *                color-stop (0.0, &num;fff),
- *                color-stop (1.0, &num;000));</programlisting>
+ *                color-stop (1.0, &num;000));</literallayout>
  *         </entry>
  *       </row>
  *       <row>
+ *         <entry>border-width</entry>
+ *         <entry>integer</entry>
+ *         <entry>#gint</entry>
+ *         <entry>border-width: 5;</entry>
+ *       </row>
+ *       <row>
+ *         <entry>border-radius</entry>
+ *         <entry>integer</entry>
+ *         <entry>#gint</entry>
+ *         <entry>border-radius: 5;</entry>
+ *       </row>
+ *       <row>
+ *         <entry>border-style</entry>
+ *         <entry>[none|solid|inset|outset]</entry>
+ *         <entry>#GtkBorderStyle</entry>
+ *         <entry>border-style: solid;</entry>
+ *       </row>
+ *       <row>
  *         <entry>border-image</entry>
- *         <entry><programlisting>url([path]) top-distance right-distance bottom-distance left-distance horizontal-option vertical-option</programlisting></entry>
+ *         <entry><literallayout>url([path]) top right bottom left [repeat|stretch]? [repeat|stretch]?</literallayout></entry>
  *         <entry></entry>
- *         <entry>
- *           <programlisting>
- * border-image: url ("/path/to/image.png") 3 4 3 4 stretch;
- * border-image: url ("/path/to/image.png") 3 4 4 3 repeat stretch;</programlisting>
+ *         <entry><literallayout>border-image: url("/path/to/image.png") 3 4 3 4 stretch;
+ * border-image: url("/path/to/image.png") 3 4 4 3 repeat stretch;</literallayout>
  *         </entry>
  *       </row>
  *       <row>
  *         <entry>transition</entry>
- *         <entry><programlisting>duration [s|ms] [linear|ease|ease-in|ease-out|ease-in-out] [loop]?</programlisting></entry>
+ *         <entry><literallayout>duration [s|ms] [linear|ease|ease-in|ease-out|ease-in-out] [loop]?</literallayout></entry>
  *         <entry></entry>
- *         <entry>
- *           <programlisting>
- * transition: 150ms ease-in-out;
- * transition: 1s linear loop;</programlisting>
+ *         <entry><literallayout>transition: 150ms ease-in-out;
+ * transition: 1s linear loop;</literallayout>
  *         </entry>
  *       </row>
  *     </tbody>
diff --git a/gtk/gtkstylecontext.c b/gtk/gtkstylecontext.c
index ba65ccd..e4ad612 100644
--- a/gtk/gtkstylecontext.c
+++ b/gtk/gtkstylecontext.c
@@ -163,6 +163,24 @@
  * special value, in this case, the whole widget area will be updated
  * by the animation.
  * </para>
+ * <para>
+ * Transition animations can use several pre-defined transition functions:
+ * <figure><title>Linear transition</title>
+ * <graphic fileref="linear.png" format="PNG"/>
+ * </figure>
+ * <figure><title>Ease transition</title>
+ * <graphic fileref="ease.png" format="PNG"/>
+ * </figure>
+ * <figure><title>Ease-in-out transition</title>
+ * <graphic fileref="ease-in-out.png" format="PNG"/>
+ * </figure>
+ * <figure><title>Ease-in transition</title>
+ * <graphic fileref="ease-in.png" format="PNG"/>
+ * </figure>
+ * <figure><title>Ease-out transition</title>
+ * <graphic fileref="ease-out.png" format="PNG"/>
+ * </figure>
+ * </para>
  * </refsect2>
  *
  * <refsect2 id="gtkstylecontext-custom-styling">
[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]