diff --git a/resources/www/_shared/styles/_main-menu.scss b/resources/www/_shared/styles/_main-menu.scss index dc99bdaf3f..27ebf231d7 100644 --- a/resources/www/_shared/styles/_main-menu.scss +++ b/resources/www/_shared/styles/_main-menu.scss @@ -10,6 +10,7 @@ $mainMenuLinkHoverColor: #000000 !default; $mainMenuMarginBottom: 0 !default; $mainMenuBottomBorder: none !default; + #mainMenu { height: $mainMenuHeight; line-height: $mainMenuLineHeight; @@ -19,6 +20,20 @@ $mainMenuBottomBorder: none !default; margin-bottom: $mainMenuMarginBottom; z-index: 100; box-sizing: border-box; + .arrow-up { + display: none; + width: 0; + height: 0; + border-left: 6px solid transparent; + border-right: 6px solid transparent; + border-bottom: 9px solid #d8d8d8; + } + .mobilemenu { + display: none; + } + .desktopmenu { + display: inline-block; + } .show-menu { display: none; i { @@ -26,6 +41,9 @@ $mainMenuBottomBorder: none !default; vertical-align: middle; color: $mainMenuLinkActiveColor; } + img { + margin-top: 5px; + } } ol { display: block; @@ -33,9 +51,8 @@ $mainMenuBottomBorder: none !default; padding: 0; list-style: none outside none; } - #custom-link-container { + #nav_notification_container { display: inline-block; - margin-left: 10px; } #mainLogo { margin:0 10px; @@ -110,34 +127,92 @@ $mainMenuBottomBorder: none !default; } @media screen and (max-width: 760px) { + .mobilemenu { + display: block; + } #mainMenu { .show-menu { - display: block; + display: inline-block; + cursor: pointer; } - #nav_menu { + .desktopmenu { display: none; + } + #nav_menu_container, #nav_customlink_container, #nav_account_container { + position: absolute; + top: 35px; + width: 172px; z-index: 1000; - ol { - position: static; - } - li.menu-bar-item { - width: 100%; - clear: both; - background: $mainMenuBackgroundColor; - border-bottom: 1px solid $mainMenuLinkActiveColor; + .nav_menu { z-index: 1000; - } - li.menu-bar-item a { + position: absolute; + border-radius: 5px; + background-color: #d8d8d8; width: 100%; - > span { - text-align: center; - font-size: 14px; - font-weight: bold; - &.selected { - border-top: none !important; + .bullet-type { + padding: 0; + } + .bullet-type:before { + content: "• "; + } + li.menu-bar-item { + left: 10px; + width: 151px; + clear: both; + border-bottom: 1px solid #b7b7b7; + z-index: 1000; + } + li.menu-bar-item a { + width: 100%; + > img { + float: left; + margin-top: 11px; + margin-right: 11px; + display: block; } + > span { + text-align: left; + font-size: 14px; + font-family: Roboto; + font-weight: 500; + font-style: normal; + font-stretch: normal; + letter-spacing: normal; + color: #4a4a4a; + &.selected { + border-top: 3px solid transparent; + } + } + } + li.menu-bar-item:last-child { + border-bottom: none; } } } + #nav_customlink_container { + left: 10px; + .arrow-up { + margin-left: 82px; + display: block; + } + } + #nav_menu_container { + left: 10px; + .arrow-up { + margin-left: 51px; + display: block; + } + } + #nav_account_container { + right: 10px; + .arrow-up { + margin-left: 147px; + display: block; + } + } + #nav_notification_container { + float: right; + margin-right: 50px; + } } } diff --git a/resources/www/common/images/icons/menu-admin.png b/resources/www/common/images/icons/menu-admin.png new file mode 100644 index 0000000000..f9546ed1fe Binary files /dev/null and b/resources/www/common/images/icons/menu-admin.png differ diff --git a/resources/www/common/images/icons/menu-burger.png b/resources/www/common/images/icons/menu-burger.png new file mode 100644 index 0000000000..9eb5ca72f9 Binary files /dev/null and b/resources/www/common/images/icons/menu-burger.png differ diff --git a/resources/www/common/images/icons/menu-help.png b/resources/www/common/images/icons/menu-help.png new file mode 100644 index 0000000000..8caff996d2 Binary files /dev/null and b/resources/www/common/images/icons/menu-help.png differ diff --git a/resources/www/common/images/icons/menu-lightbox.png b/resources/www/common/images/icons/menu-lightbox.png new file mode 100644 index 0000000000..26ecd2fe69 Binary files /dev/null and b/resources/www/common/images/icons/menu-lightbox.png differ diff --git a/resources/www/common/images/icons/menu-logout.png b/resources/www/common/images/icons/menu-logout.png new file mode 100644 index 0000000000..6a427577a6 Binary files /dev/null and b/resources/www/common/images/icons/menu-logout.png differ diff --git a/resources/www/common/images/icons/menu-name-user.png b/resources/www/common/images/icons/menu-name-user.png new file mode 100644 index 0000000000..f9546ed1fe Binary files /dev/null and b/resources/www/common/images/icons/menu-name-user.png differ diff --git a/resources/www/common/images/icons/menu-prod.png b/resources/www/common/images/icons/menu-prod.png new file mode 100644 index 0000000000..9a4affbbbc Binary files /dev/null and b/resources/www/common/images/icons/menu-prod.png differ diff --git a/resources/www/common/images/icons/menu-publication.png b/resources/www/common/images/icons/menu-publication.png new file mode 100644 index 0000000000..fb050222d6 Binary files /dev/null and b/resources/www/common/images/icons/menu-publication.png differ diff --git a/resources/www/common/images/icons/menu-report.png b/resources/www/common/images/icons/menu-report.png new file mode 100644 index 0000000000..f115d86760 Binary files /dev/null and b/resources/www/common/images/icons/menu-report.png differ diff --git a/resources/www/common/images/icons/menu-thesaurus.png b/resources/www/common/images/icons/menu-thesaurus.png new file mode 100644 index 0000000000..232b477374 Binary files /dev/null and b/resources/www/common/images/icons/menu-thesaurus.png differ diff --git a/resources/www/common/images/icons/menu-upload.png b/resources/www/common/images/icons/menu-upload.png new file mode 100644 index 0000000000..6007c191e2 Binary files /dev/null and b/resources/www/common/images/icons/menu-upload.png differ diff --git a/resources/www/common/images/icons/menu-user.png b/resources/www/common/images/icons/menu-user.png new file mode 100644 index 0000000000..4edec9bbad Binary files /dev/null and b/resources/www/common/images/icons/menu-user.png differ diff --git a/resources/www/common/images/icons/menu-web-site.png b/resources/www/common/images/icons/menu-web-site.png new file mode 100644 index 0000000000..6f7c0f2d5c Binary files /dev/null and b/resources/www/common/images/icons/menu-web-site.png differ diff --git a/templates/web/common/menubar.html.twig b/templates/web/common/menubar.html.twig index 484e98b052..94aed445a4 100644 --- a/templates/web/common/menubar.html.twig +++ b/templates/web/common/menubar.html.twig @@ -7,179 +7,261 @@ -
  • - +
  • +
    • - - - -
    -
      - - {% if app.getAuthenticator().isAuthenticated() and module == "prod" %} -
    1. - +
    +
    + +
  • + +
    • + +     + + + + +
    +
      +
    1. + {% if app.getAuthenticator().isAuthenticated() %} + {% if app.getAuthenticatedUser().isGuest %} + {{ 'Guest' | trans }} - {% else %} - + {% else %} + {{ app.getAuthenticatedUser().getDisplayName() }} - - {% endif %} - {% endif %} -
      2. -
    2. - + + {% endif %} + {% endif %} +
      3. +
    3. + {{ 'phraseanet:: aide' | trans }} - - - - - - - - -
      4. -
    4. - {% if app.getAuthenticator().isAuthenticated() %} - + + + + + + + + +
      5. +
    5. + {% if app.getAuthenticator().isAuthenticated() %} + {{ 'phraseanet:: deconnection' | trans }} - - {% endif %} -
      6. -
    + + {% endif %} + + +
    + + ">{{ 'phraseanet:: a propos' | trans }} + + + @@ -207,10 +289,10 @@ styleAttr += linksData.linkColor ? "color: " + linksData.linkColor + ";" : ""; styleAttr += linksData.linkBold == true ? "font-weight: bold;" : ""; - var spanElement = $('').attr('style', styleAttr).html(linksData.linkName); - var links = '
  • ' + + var spanElement = $('').attr('style', styleAttr).attr('class', 'bullet-type').html(linksData.linkName); + var links = '
  • ' + spanElement.prop("outerHTML") + '
    • '; - $('#mainMenu #custom-link-container').append(links); + $('#mainMenu #nav_customlink_container .nav_menu').append(links); } }); } else if (key === 'help-menu') { @@ -228,22 +310,68 @@ '' + spanElement.prop("outerHTML") + ''; $('.helpcontextmenu .context-menu-theme-vista').append(links); + + var spanElementMobile = $('').attr('style', styleAttr).attr('class', 'bullet-type').html(linksData.linkName); + var linksMobile = '
  • ' + + spanElementMobile.prop("outerHTML") + '
    • '; + $('#mainMenu #nav_account_container .nav_menu').append(linksMobile); } }); } } - $('#toggle-menu').on('click', function (event) { - $('#nav_menu').toggle(); + $('#toggle-menu-main').on('click', function (event) { + $('#nav_menu_container').toggle(); + if ($('#nav_customlink_container').is(":visible")) { + $('#nav_customlink_container').hide(); + } + if ($('#nav_account_container').is(":visible")) { + $('#nav_account_container').hide(); + } }); - var windowsize = $(window).width(); + $('#toggle-menu-link').on('click', function (event) { + $('#nav_customlink_container').toggle(); + if ($('#nav_menu_container').is(":visible")) { + $('#nav_menu_container').hide(); + } + if ($('#nav_account_container').is(":visible")) { + $('#nav_account_container').hide(); + } + }); + + $('#toggle-menu-account').on('click', function (event) { + $('#nav_account_container').toggle(); + if ($('#nav_menu_container').is(":visible")) { + $('#nav_menu_container').hide(); + } + if ($('#nav_customlink_container').is(":visible")) { + $('#nav_customlink_container').hide(); + } + }); + + + var windowSize = $(window).width(); $(window).resize(function (event) { - windowsize = $(window).width(); - if (windowsize > 760) { - if ($('#nav_menu').is(":hidden")) { - $('#nav_menu').show(); + windowSize = $(window).width(); + if (windowSize > 760) { + if ($('#nav_menu_container').is(":hidden")) { + $('#nav_menu_container').show(); } + if ($('#nav_customlink_container').is(":hidden")) { + $('#nav_customlink_container').show(); + } + if ($('#nav_account_container').is(":visible")) { + $('#nav_account_container').hide(); + } + } else if (windowSize <= 760) { + if ($('#nav_customlink_container').is(":visible")) { + $('#nav_customlink_container').hide(); + } + if ($('#nav_menu_container').is(":visible")) { + $('#nav_menu_container').hide(); + } + } }); });