Merge pull request #2591 from coreos-inc/cor-tabs

Change cor-tabs to be a TypeScript and Angular "neu" component
This commit is contained in:
josephschorr 2017-05-05 15:13:44 -04:00 committed by GitHub
commit f228ebdc22
24 changed files with 832 additions and 588 deletions

View file

@ -1,3 +0,0 @@
<div class="co-main-content-panel co-tab-panel co-fx-box-shadow-heavy">
<div class="co-tab-container" ng-transclude></div>
</div>

View file

@ -1,12 +0,0 @@
<li ng-class="tabActive == 'true' ? 'active' : ''">
<a data-toggle="tab"
data-target="{{ tabTarget }}"
ng-click="tabInit()">
<span data-title="{{ tabTitle }}"
data-placement="right"
data-container="body"
style="display:inline-block"
bs-tooltip><span ng-transclude/></span><span class="visible-xs-inline xs-label">{{ tabTitle }}</span>
</span>
</a>
</li>

View file

@ -1,4 +0,0 @@
<span class="co-tab-element" ng-class="isClosed ? 'closed' : 'open'">
<span class="xs-toggle" ng-click="toggleClosed($event)"></span>
<ul class="co-tabs col-md-1" ng-transclude></ul>
</span>

View file

@ -6,42 +6,42 @@
<div class="cor-loader"></div>
</div>
<div class="co-tab-modal-body" ng-show="!credentials.loading">
<div class="co-tab-panel">
<cor-tab-panel remember-cookie="quay.credentialsTab">
<!-- Tabs -->
<div class="cor-tabs" remember-cookie="quay.credentialsTab">
<span class="cor-tab" tab-active="true" tab-target="#cred-secret-{{ dialogID }}">
<cor-tabs>
<cor-tab tab-active="true" tab-id="cred-secret-{{ :dialogID }}">
<i class="fa" ng-class="entityIcon"></i> {{ secretTitle }}
</span>
</cor-tab>
<span class="cor-tab" tab-target="#cred-kubernetes-{{ dialogID }}">
<cor-tab tab-id="cred-kubernetes-{{ :dialogID }}">
<i class="fa kubernetes-icon icon"></i> Kubernetes Secret
</span>
</cor-tab>
<span class="cor-tab" tab-target="#cred-rkt-{{ dialogID }}">
<cor-tab tab-id="cred-rkt-{{ :dialogID }}">
<i class="fa rocket-icon icon"></i> rkt Configuration
</span>
</cor-tab>
<span class="cor-tab" tab-target="#cred-docker-login-{{ dialogID }}">
<cor-tab tab-id="cred-docker-login-{{ :dialogID }}">
<i class="fa docker-icon icon"></i> Docker Login
</span>
</cor-tab>
<span class="cor-tab" tab-target="#cred-docker-{{ dialogID }}">
<cor-tab tab-id="cred-docker-{{ :dialogID }}">
<i class="fa docker-icon icon"></i> Docker Configuration
</span>
</cor-tab>
<span class="cor-tab" tab-target="#cred-mesos-{{ dialogID }}" quay-show="isDownloadSupported()">
<cor-tab tab-id="cred-mesos-{{ :dialogID }}" quay-show="isDownloadSupported()">
<i class="fa mesos-icon icon"></i> Mesos Credentials
</span>
</div>
</cor-tab>
</cor-tabs>
<!-- Tab contents -->
<div class="cor-tab-content">
<cor-tab-content>
<h3>
Credentials for {{ credentials.username }}
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
</h3>
<div id="cred-secret-{{ dialogID }}" class="tab-pane active">
<cor-tab-pane id="cred-secret-{{ :dialogID }}">
<label>{{ secretTitle }}:</label>
<div class="copy-box" value="credentials.password"></div>
<div class="help-text">
@ -49,9 +49,9 @@
</div>
<div ng-transclude/>
</div>
</cor-tab-pane>
<div id="cred-kubernetes-{{ dialogID }}" class="tab-pane">
<cor-tab-pane id="cred-kubernetes-{{ :dialogID }}">
<label>Step 1: Download secret</label>
<div class="action-text">First, download the Kubernetes pull secret for the {{ entityTitle }}:</div>
<ul class="action-bar">
@ -83,9 +83,9 @@ spec:
imagePullSecrets:
- name: {{ getKubernetesSecretName(credentials) }}</code></pre>
</div>
</div>
</cor-tab-pane>
<div id="cred-mesos-{{ dialogID }}" class="tab-pane">
<cor-tab-pane id="cred-mesos-{{ :dialogID }}">
<label>Step 1: Download credentials bundle</label>
<div class="action-text">First, download the Docker credentials file as a bundle:</div>
<ul class="action-bar">
@ -122,9 +122,9 @@ spec:
]</code>
}</pre>
</div>
</div>
</cor-tab-pane>
<div id="cred-rkt-{{ dialogID }}" class="tab-pane">
<cor-tab-pane id="cred-rkt-{{ :dialogID }}">
<label>Step 1: Download credentials config</label>
<div class="action-text">First, download the rkt credentials file for the {{ entityTitle }}:</div>
<ul class="action-bar">
@ -137,15 +137,15 @@ spec:
<label>Step 2: Write to disk</label>
<div class="action-text">Second, place the file in the rkt configuration directory:</div>
<div class="copy-box" value="'mv ' + getRktFilename(credentials) + ' /etc/rkt/auth.d/'"></div>
</div>
</cor-tab-pane>
<div id="cred-docker-login-{{ dialogID }}" class="tab-pane">
<cor-tab-pane id="cred-docker-login-{{ :dialogID }}">
<label>Run docker login</label>
<div class="action-text">Enter the following command on the command line:</div>
<div class="copy-box" value="getDockerLogin(credentials)"></div>
</div>
</cor-tab-pane>
<div id="cred-docker-{{ dialogID }}" class="tab-pane">
<cor-tab-pane id="cred-docker-{{ :dialogID }}">
<label>Step 1: Download credentials config</label>
<div class="action-text">First, download the Docker credentials file for the {{ entityTitle }}:</div>
<ul class="action-bar">
@ -158,9 +158,9 @@ spec:
<label>Step 2: Write to disk</label>
<div class="action-text">Second, place the file in the Docker configuration directory. <strong>Note:</strong> This will <strong>overwrite</strong> existing credentials:</div>
<div class="copy-box" value="'mv ' + getDockerFilename(credentials) + ' ~/.docker/config.json'"></div>
</div>
</div>
</div>
</cor-tab-pane>
</cor-tab-content>
</cor-tab-panel>
</div><!-- /.co-tab-modal-body -->
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->