From b3fcb907d08b0c7731a5f0bf4aff9ae513f06f07 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Sat, 7 Oct 2017 05:50:38 +0200 Subject: [PATCH] Navigation edit, syntax illustrations MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- developer_manual/design/navigation.rst | 49 +++++++++++++++--- developer_manual/design/popovermenu.rst | 2 +- .../images/navigation-buttons.png | Bin 0 -> 1585 bytes 3 files changed, 42 insertions(+), 9 deletions(-) create mode 100644 developer_manual/images/navigation-buttons.png diff --git a/developer_manual/design/navigation.rst b/developer_manual/design/navigation.rst index 5b048365b..cb6d8047f 100644 --- a/developer_manual/design/navigation.rst +++ b/developer_manual/design/navigation.rst @@ -22,11 +22,12 @@ We implemented various essential functions and provide easy way of using them. .. figure:: ../images/navigation.png :alt: Navigation screenshot + :align: right Basic layout ============= -.. code-block:: html +.. code:: html
    @@ -48,12 +49,13 @@ Each entry is allowed to have a counter and/or a button for user interaction. * The ``app-navigation-entry-utils`` snippet need to be placed right next to the main link of your entry. * Maximum **two** items are allowed into the utils section. You can have: - * Two buttons - * One button and one counter + * Two :ref:`buttons ` + * One :ref:`button ` and one :ref:`button ` * You **can't** have more than two buttons, if you need more, you need to add a menu. * The order of the button and the counter are **not** interchangeable. You need to put the counter before the menu. -.. code-block:: html +.. code:: html + :class: with-figure
      @@ -67,7 +69,7 @@ Each entry is allowed to have a counter and/or a button for user interaction. .. _navigation_menu: Menu -^^^^^ +^^^^^^ If you need to add a few interactions for your entry, you can put everything in a popover menu. The menu needs to be placed after the ``app-navigation-entry-utils``. @@ -76,8 +78,9 @@ For the global rules and/or layout, you can check the dedicated :ref:`popover me .. figure:: ../images/navigation-menu.png :alt: Navigation menu + :align: right -.. code-block:: html +.. code:: html
        @@ -102,6 +105,8 @@ For the global rules and/or layout, you can check the dedicated :ref:`popover me
      +.. _navigation_counter: + Counter ^^^^^^^^ @@ -110,18 +115,46 @@ Do not change the alignment of the text. If you're using .. figure:: ../images/navigation-counter.png :alt: Navigation entry with counter + :align: right -.. code-block:: html +.. code:: html
    • 1
      • +.. _navigation_buttons: + +Buttons +^^^^^^^^^ + +The same way we display the menu three-dot-icon button, you're allowed to use up to 2 buttons in a single entry. + +* The icon class goes directly on the ``button`` element. +* If no class is set, the three-dot-icon will be used by default + +.. figure:: ../images/navigation-buttons.png + :alt: Navigation entry with counter + :align: right + +.. code:: html + +
      +
        +
      • + +
        • +
      • + +
        • +
      +
      + Drag and drop ============== The class which should be applied to a first level element **li** that hosts or can host a second level is **drag-and-drop**. This will cause the hovered entry to slide down giving a visual hint that it can accept the dragged element. In case of jQuery UI's droppable feature, the **hoverClass** option should be set to the **drag-and-drop** class. -.. code-block:: html +.. code:: html
        diff --git a/developer_manual/design/popovermenu.rst b/developer_manual/design/popovermenu.rst index 5e9a30759..a8b4572b5 100644 --- a/developer_manual/design/popovermenu.rst +++ b/developer_manual/design/popovermenu.rst @@ -18,7 +18,7 @@ This is exactly the same as the :ref:`navigation menu `. The on Basic layout ============= -.. code-block:: html +.. code:: html
          diff --git a/developer_manual/images/navigation-buttons.png b/developer_manual/images/navigation-buttons.png new file mode 100644 index 0000000000000000000000000000000000000000..91088ee01dbc25f3b7e6e4e75b80cc0ee8533baa GIT binary patch literal 1585 zcmZXUeK^x=7{`A}wpK<`mRR147An<>C}(0aFDp&9#FW=1PF{zc(7ZKL*`k)HNHtE@ zqOut$Ia)Tg(5z4kd1uT^D(BZfopW91xv%^AKKJK(?mzDDbv;j(r@ON{Ocw?KfI8L% zg9mjUOcYcF+&6V+5kXNSA9Th5i$CKgulzDdmPfiAJp%wMR{zW;K+$ys2qDo}oD<|D zOig_!Y=fGp5dfC)v6%gb$h?e!gi9t|-&4pZV{y6Pl+7-bPx_8`A06?N)Qtzr?KO=E z9}~II-Q=?L}s}=Yd$Z-U9-`p`?5vfsUOCZen{avTEkKAbF#DDucHGvQhdb~&rQ?w zN#*V=>f#TcV@Yl7sP2uP>gsAf-<~7Y%W3jq>`k0`ARE1L?V9ZIDWZo*o-eyUfzM{Q z$|qlm#fP+G`d+Td!lY_m685oJtX-$Ozs*e=JKlZvY&~<+fVemgt;gYT$PeE|)Qn3x z8;hN0sXV``T^uLW+Hf0P66=sQ7aj;zRk6WM*;TcNwTCH(0@hAZDMoeFj9Q1f{)`LF zave)j2!)~zJHNp`DI_dxXlRIxDC2V5{jE_bltFs`zySNmFfVbo^z|2kK)?wWtDF-| zPfw4^Y92lt5V5Wm6;YK#-qwf*Z1&#R5d?p}v9VF!oHyQ6zxcW3vaxgSqnaA|42?$9 zvGP+*+n?6Z*3rQjz$VAXqqn~uR<6xC$zqmhY_LCZG&U%RRyHW6N!gu*jVwQ*cMzx0 zAaf}Mo{1@4zbnEZ{e47S^3S!`@$V3u7vzVaAHAYr(RFhxD;=n6K|z5;BH{6PEhj*W zt8d-}3_nMryJWHzD^@I1IoBShk3^nbnAyUgn46TVoC6FG69`~iq_LBisi`TnH|(P(wq_?KQJ7 zEhn@Lueh1n+S+n`+3w{W9~5|1e5`XYy0App_cUo08cuk?5^kCqs)P(R%a) zs~qtak4j5Z2NFo|nCR#UyJGk9Q#)ndyu>xICf9l``hhhtr>Ll{;weIv-+3IOuGr<$ zZ6DMTivqLDEhn~_7rZPiT*nkPRa1=e5eP*5yyE28_->dhXvzdXcL3|;j;VC?PyGifd-O~I literal 0 HcmV?d00001