docker-registry-ui/src/components/dialogs/dialogs-menu.riot

<!--
 Copyright (C) 2016-2023 Jones Magloire @Joxit

 This program is free software: you can redistribute it and/or modify
 it under the terms of the GNU Affero General Public License as published by
 the Free Software Foundation, either version 3 of the License, or
 (at your option) any later version.

 This program is distributed in the hope that it will be useful,
 but WITHOUT ANY WARRANTY; without even the implied warranty of
 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 GNU Affero General Public License for more details.

 You should have received a copy of the GNU Affero General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
-->
<dialogs-menu>
  <add-registry-url
    if="{ !props.readOnlyRegistries }"
    opened="{ state['add-registry-url'] }"
    on-close="{ onClose('add-registry-url') }"
    on-notify="{ props.onNotify }"
    on-server-change="{ props.onServerChange }"
  ></add-registry-url>
  <change-registry-url
    opened="{ state['change-registry-url'] }"
    on-close="{ onClose('change-registry-url') }"
    on-notify="{ props.onNotify }"
    on-server-change="{ props.onServerChange }"
  ></change-registry-url>
  <remove-registry-url
    if="{ !props.readOnlyRegistries }"
    opened="{ state['remove-registry-url'] }"
    on-close="{ onClose('remove-registry-url') }"
    on-notify="{ props.onNotify }"
    on-server-change="{ props.onServerChange }"
  ></remove-registry-url>
  <div class="material-dropdown-wrapper">
    <material-button
      onClick="{ onClick }"
      waves-center="true"
      waves-opacity="0.6"
      waves-duration="600"
      color="var(--header-background)"
      text-color="var(--header-text)"
      icon
    >
      <i class="material-icons">more_vert</i>
    </material-button>
    <material-dropdown
      items="{ dropdownItems.filter(item => item.ro || !props.readOnlyRegistries) }"
      on-click="{ onDropdownSelect }"
      opened="{ state.isDropdownOpened }"
    ></material-dropdown>
  </div>
  <div class="overlay" onclick="{ onClick }" if="{ state.isDropdownOpened }"></div>
  <script>
    import AddRegistryUrl from './add-registry-url.riot';
    import ChangeRegistryUrl from './change-registry-url.riot';
    import RemoveRegistryUrl from './remove-registry-url.riot';

    export default {
      components: {
        AddRegistryUrl,
        ChangeRegistryUrl,
        RemoveRegistryUrl,
      },
      dropdownItems: [
        {
          title: 'Add URL',
          name: 'add-registry-url',
          ro: false,
        },
        {
          title: 'Change URL',
          name: 'change-registry-url',
          ro: true,
        },
        {
          title: 'Remove URL',
          name: 'remove-registry-url',
          ro: false,
        },
      ],
      onDropdownSelect(event) {
        this.update({
          [event.target.item]: true,
          isDropdownOpened: false,
        });
      },
      onClose(name) {
        return () => {
          this.update({
            [name]: false,
            isDropdownOpened: false,
          });
        };
      },
      onClick() {
        this.update({
          isDropdownOpened: !this.state.isDropdownOpened,
        });
      },
    };
  </script>
  <style>
    :host > .material-dropdown-wrapper {
      color: var(--primary-text);
      list-style-type: disc;
      margin-block-start: 0.7em;
    }
    material-dropdown .material-dropdown-container,
    material-dropdown .material-dropdown-container .material-dropdown-item {
      background-color: var(--background);
      color: var(--primary-text);
    }

    material-dropdown .material-dropdown-container .material-dropdown-item:hover {
      background-color: rgba(0, 0, 0, 0.12);
    }

    :host .material-dropdown-wrapper material-dropdown .material-dropdown-container {
      right: 0;
      top: 2em;
    }

    :host .overlay {
      position: fixed;
      height: 100%;
      width: 100%;
      top: 0;
      right: 0;
      z-index: 10;
    }

    :host material-button button {
      float: right;
      z-index: 2;
    }

    :host material-button .content i.material-icons {
      font-size: 24px;
    }

    :host material-popup * {
      line-height: 1em;
    }

    :host material-popup material-button .content {
      line-height: 36px;
    }
  </style>
</dialogs-menu>