dialogs-menu.riot

<!--
 Copyright (C) 2016-2021 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="container">
    <material-button onClick="{ onClick }" waves-center="true" rounded="true" waves-opacity="0.6" waves-duration="600">
      <i class="material-icons">more_vert</i>
    </material-button>
    <material-dropdown-list items="{ dropdownItems.filter(item => item.ro || !props.readOnlyRegistries) }" onSelect="{ onDropdownSelect }"
      opened="{ state.isDropdownOpened }" />
  </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(key, item) {
        this.update({
          [item.name]: true,
          isDropdownOpened: false
        });
      },
      onClose(name) {
        return () => {
          this.update({
            [name]: false,
            isDropdownOpened: false
          })
        }
      },
      onClick() {
        this.update({
          isDropdownOpened: !this.state.isDropdownOpened
        })
      }
    }
  </script>
  <style>
    :host > .container{
      position: absolute;
      top: 0px;
      right: 16px;
      color: #000;
      list-style-type: disc;
      margin-block-start: 0.7em;
    }

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

    :host material-button {
      background: rgba(255, 255, 255, 0);
      float: right;
      z-index: 2;
    }

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

    :host material-dropdown-list {
      display: inline-block;
      position: relative;
    }

    :host material-dropdown-list ul.dropdown-content {
      min-width: 156px;
      padding: 8px 0;
      margin: 0;
    }

    :host material-dropdown-list ul.dropdown-content li span {
      font-size: 1rem;
      line-height: 1.2em;
    }

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

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