src/angular/pages/main/p3xr-main-key.html

<div style="text-align: right">

<md-button class="md-button md-raised md-accent" ng-click="$ctrl.addKey({ $event: $event, key: $ctrl.$stateParams.key})" ng-if="$root.p3xr.state.connection.readonly !== true">
        <md-icon>add</md-icon>
        <span hide-sm hide-xs>{{ $root.p3xr.strings.intention.addKey }}</span>
        <md-tooltip ng-if="$root.$mdMedia('sm') || $root.$mdMedia('xs')" md-direction="bottom">{{
            $root.p3xr.strings.intention.addKey }}
        </md-tooltip>
    </md-button>

<md-button class="md-button md-raised md-warn" ng-click="$ctrl.delete({ $event: $event})" ng-if="$root.p3xr.state.connection.readonly !== true">
        <md-icon>delete</md-icon>
        <span hide-sm hide-xs>{{ $root.p3xr.strings.intention.delete }}</span>
        <md-tooltip ng-if="$root.$mdMedia('sm') || $root.$mdMedia('xs')" md-direction="bottom">{{
            $root.p3xr.strings.intention.delete }}
        </md-tooltip>
    </md-button>

<md-button class="md-button md-raised md-primary" ng-click="$ctrl.setTtl({ $event: $event})" ng-if="$root.p3xr.state.connection.readonly !== true">
        <md-icon>timer</md-icon>
        <span hide-sm hide-xs>{{ $root.p3xr.strings.intention.ttl }}</span>
        <md-tooltip ng-if="$root.$mdMedia('sm') || $root.$mdMedia('xs')" md-direction="bottom">{{
            $root.p3xr.strings.intention.ttl }}
        </md-tooltip>
        <md-tooltip ng-if="$root.$mdMedia('gt-sm')">{{ $root.p3xr.strings.label.ttlTitle }}</md-tooltip>
    </md-button>

<md-button class="md-button md-raised md-primary" ng-click="$ctrl.rename({ $event: $event})" ng-if="$root.p3xr.state.connection.readonly !== true">
        <md-icon>fingerprint</md-icon>
        <span hide-sm hide-xs>{{ $root.p3xr.strings.intention.rename }}</span>
        <md-tooltip ng-if="$root.$mdMedia('sm') || $root.$mdMedia('xs')" md-direction="bottom">{{
            $root.p3xr.strings.intention.rename }}
        </md-tooltip>
    </md-button>

<md-button class="md-button md-raised md-accent" ng-click="$ctrl.refresh()">
        <md-icon>refresh</md-icon>

<span hide-sm hide-xs>{{ $root.p3xr.strings.intention.reloadKey }}</span>
        <md-tooltip ng-if="$root.$mdMedia('sm')" md-direction="bottom">{{ $root.p3xr.strings.intention.reloadKey }}
        </md-tooltip>
    </md-button>
</div>

<md-list flex md-theme="{{ $root.p3xr.state.theme}}">

<md-divider></md-divider>

<md-list-item ng-click="$ctrl.rename({ $event: $event})">
        <p>{{ $root.p3xr.strings.page.key.label.key }}:&nbsp;</p>
        <span class="p3xr-typography-ellipsis"
              title="{{ $root.p3xr.ui.htmlEncode($ctrl.$stateParams.key) }}">{{ $ctrl.$stateParams.key }}</span>
    </md-list-item>

<md-divider></md-divider>

<md-list-item ng-click="$ctrl.setTtl({ $event: $event})" ng-if="$ctrl.response.ttl === -1">
        <p title="{{ $root.p3xr.strings.page.key.label.ttlTitle  }}"><span
            class="p3xr-main-key-label-key-title">{{ $root.p3xr.strings.page.key.label.ttl }}</span>:
        </p>
        <span ng-if="$ctrl.response.ttl === -1">
            {{ $root.p3xr.strings.page.key.label.ttlNotExpire }}
        </span>
    </md-list-item>

<md-list-item class="md-2-line" ng-click="$ctrl.setTtl({ $event: $event})" ng-if="$ctrl.response.ttl !== -1">
        <div class="md-list-item-text">
            <h3>
                <div layout="row" flex>
                    <div flex class="p3xr-main-key-label-key-title">
                        <span >{{ $root.p3xr.strings.page.key.label.ttl }}</span>:
                    </div>
                    <div>
                        <span ng-if="$ctrl.response.ttl == -1">
                            {{ $root.p3xr.strings.page.key.label.ttlNotExpire }}
                        </span>
                        <span ng-if="$ctrl.response.ttl != -1">

{{ $ctrl.response.ttl }}
                    </span>
                    </div>
                </div>
            </h3>
            <p ng-click="$ctrl.setTtl({ $event: $event})" style=" text-align: right;">
               <span style="opacity: 0.5; font-weight: normal;" ng-click="$ctrl.setTtl({ $event: $event})">
                   <span id="p3xr-main-key-ttl-counter"></span>
                </span>
            </p>
        </div>
    </md-list-item>

<md-divider></md-divider>

<md-list-item>
        <p>{{ $root.p3xr.strings.page.key.label.type }}:</p>
        {{ $root.p3xr.strings.redisTypes[$ctrl.response.type] }}
    </md-list-item>

<md-divider></md-divider>

<md-list-item>
        <p>{{ $root.p3xr.strings.page.key.label.encoding }}:</p>
        {{ $ctrl.response.encoding }}
    </md-list-item>

<md-divider></md-divider>

<md-list-item>
        <p>{{ $root.p3xr.strings.page.key.label.length }}:</p>
        <span ng-if="$ctrl.response.type === 'string'" style="opacity: 0.5">
                {{ $ctrl.charactersPrettyBytes($ctrl.response.length) }}
            &nbsp;
        </span>
        {{ $ctrl.response.length }}
        &nbsp;
        <span ng-if="$ctrl.response-type === 'string'">
                {{ $root.p3xr.strings.page.key.label.lengthString }}
        </span>
        <span ng-if="$ctrl.response.type !== 'string'">
            {{ $root.p3xr.strings.page.key.label.lengthItem }}
        </span>
    </md-list-item>

</md-list>

<md-divider></md-divider>

`/`	Focus search
`?`	Show this help
`Esc`	Unfocus input